/* =============================================================================
   ol-mo.css : the ONE stylesheet of the ERP (sign-in + dashboard) AND the public site.
   - Logical properties everywhere => RTL/LTR with no extra rules.
   - Looks (v0.7.0): 5 palettes (indigo, lagoon, emerald, terra, graphite) x 2 modes (light default, dark) + "auto"; generated by tools_ui/gen_themes.py (contrast-checked).
     Every palette owns its sidebar colour, so the sidebar always differs from the page, header and cards.
     Chosen officially in General settings, overridable per browser in the user menu.
   - No images: icons are SVG symbols. Respects prefers-reduced-motion.
   ============================================================================= */


:root{
  --ol-font:system-ui,-apple-system,"Segoe UI",Tahoma,"Noto Sans Arabic",Roboto,sans-serif;
  --ol-r:16px;--ol-r-sm:11px;--ol-r-xs:8px;--ol-ease:cubic-bezier(.2,.8,.2,1);--ol-ease-out:cubic-bezier(.16,1,.3,1);--ol-dur:.2s;--ol-dur-slow:.45s;
  --ol-side-w:272px;--ol-top-h:66px;
  --ol-bad:#d92d4b;--ol-warn:#b86a00;--ol-ok:#0b8f63;--ol-info:#2563eb;--ol-side-line:rgba(255,255,255,.10);
  /* chart colours (readable on light and dark) */
  --ol-c1:var(--ol-brand);--ol-c2:#e8920c;--ol-c3:#12a679;--ol-c4:#8b5cf6;--ol-c5:#e5484d;--ol-c6:#0ea5c6;--ol-c7:#d946a8;--ol-c8:#7fb214;
}
/*THEMES-START (generated by tools_ui/gen_themes.py - do not edit by hand)*/
:root[data-palette=indigo],:root[data-palette=ocean],:root[data-palette=royal],:root:not([data-palette]){--ol-brand:#4e62e4;--ol-brand-hover:#2a42df;--ol-brand-2:#7e4def;--ol-brand-ink:#ffffff;--ol-brand-soft:rgba(78,98,228,0.1);--ol-ring:rgba(78,98,228,0.34);--ol-bg:#f3f4f9;--ol-surface:#ffffff;--ol-surface-2:#f9f9fc;--ol-text:#0e1125;--ol-muted:#575a6b;--ol-line:#dfe1ec;--ol-line-2:#c1c4d7;--ol-side:#0b1035;--ol-side-2:#182054;--ol-side-text:#c4caf3;--ol-shadow:0 1px 2px rgba(16,21,55,0.06),0 8px 24px rgba(16,21,55,0.07);--ol-shadow-lg:0 24px 64px rgba(16,21,55,0.32);--ol-p50:#eceffd;--ol-p100:#d5dafb;--ol-p200:#b0baf7;--ol-p300:#7d8df2;--ol-p400:#4f64ee;--ol-p500:#2a42df;--ol-p600:#1d33c3;--ol-p700:#182aa0;--ol-p800:#121f78;--ol-p900:#0c1550}
:root[data-palette=lagoon]{--ol-brand:#0e8190;--ol-brand-hover:#0b606b;--ol-brand-2:#4595f7;--ol-brand-ink:#ffffff;--ol-brand-soft:rgba(14,129,144,0.1);--ol-ring:rgba(14,129,144,0.34);--ol-bg:#f3f7f8;--ol-surface:#ffffff;--ol-surface-2:#f9fbfc;--ol-text:#0f1e24;--ol-muted:#57656b;--ol-line:#dfe8ec;--ol-line-2:#c2d1d6;--ol-side:#0b2934;--ol-side-2:#194352;--ol-side-text:#c4e6f2;--ol-shadow:0 1px 2px rgba(16,45,55,0.06),0 8px 24px rgba(16,45,55,0.07);--ol-shadow-lg:0 24px 64px rgba(16,45,55,0.32);--ol-p50:#ecfcfe;--ol-p100:#d3f8fd;--ol-p200:#adf2fb;--ol-p300:#77e9f8;--ol-p400:#47e1f5;--ol-p500:#20d2e9;--ol-p600:#14b7cc;--ol-p700:#1196a7;--ol-p800:#0c707d;--ol-p900:#084b54}
:root[data-palette=emerald],:root[data-palette=forest]{--ol-brand:#1b8359;--ol-brand-hover:#146142;--ol-brand-2:#54e3e8;--ol-brand-ink:#ffffff;--ol-brand-soft:rgba(27,131,89,0.1);--ol-ring:rgba(27,131,89,0.34);--ol-bg:#f4f8f6;--ol-surface:#ffffff;--ol-surface-2:#f9fcfb;--ol-text:#10231d;--ol-muted:#576b64;--ol-line:#e1eae7;--ol-line-2:#c5d3ce;--ol-side:#0d3226;--ol-side-2:#1c4f3e;--ol-side-text:#c7f0e2;--ol-shadow:0 1px 2px rgba(16,55,42,0.06),0 8px 24px rgba(16,55,42,0.07);--ol-shadow-lg:0 24px 64px rgba(16,55,42,0.32);--ol-p50:#edfcf6;--ol-p100:#d7f9eb;--ol-p200:#b4f4da;--ol-p300:#83ecc2;--ol-p400:#56e6ac;--ol-p500:#34d595;--ol-p600:#26ba7f;--ol-p700:#1f9868;--ol-p800:#17724e;--ol-p900:#104c34}
:root[data-palette=terra],:root[data-palette=sunset]{--ol-brand:#c54f20;--ol-brand-hover:#a2411a;--ol-brand-2:#eec14f;--ol-brand-ink:#ffffff;--ol-brand-soft:rgba(197,79,32,0.1);--ol-ring:rgba(197,79,32,0.34);--ol-bg:#f8f5f4;--ol-surface:#ffffff;--ol-surface-2:#fcfaf9;--ol-text:#231810;--ol-muted:#6b5f57;--ol-line:#eae5e1;--ol-line-2:#d3cbc5;--ol-side:#321c0d;--ol-side-2:#4f301c;--ol-side-text:#f0d7c7;--ol-shadow:0 1px 2px rgba(55,32,16,0.06),0 8px 24px rgba(55,32,16,0.07);--ol-shadow-lg:0 24px 64px rgba(55,32,16,0.32);--ol-p50:#fdf1ed;--ol-p100:#fae0d6;--ol-p200:#f6c5b1;--ol-p300:#f19f7e;--ol-p400:#ec7d51;--ol-p500:#dd5e2c;--ol-p600:#c14d1f;--ol-p700:#9e3f1a;--ol-p800:#762f13;--ol-p900:#4f200d}
:root[data-palette=graphite]{--ol-brand:#b45309;--ol-brand-hover:#9a4607;--ol-brand-2:#fbbf24;--ol-brand-ink:#ffffff;--ol-brand-soft:rgba(180,83,9,.11);--ol-ring:rgba(180,83,9,.34);--ol-bg:#f3f4f7;--ol-surface:#ffffff;--ol-surface-2:#f8f9fb;--ol-text:#0f172a;--ol-muted:#5f6b7e;--ol-line:#e4e7ee;--ol-line-2:#cdd3df;--ol-side:#10151f;--ol-side-2:#252d3d;--ol-side-text:#cbd5e1;--ol-p500:#b45309}
:root[data-theme=dark][data-palette=indigo],:root[data-theme=dark][data-palette=ocean],:root[data-theme=dark][data-palette=royal],:root[data-theme=dark]:not([data-palette]){--ol-brand:#6a7cf0;--ol-brand-hover:#8b99f4;--ol-brand-2:#8b5ff1;--ol-brand-ink:#0a0e1a;--ol-brand-soft:rgba(106,124,240,0.16);--ol-ring:rgba(106,124,240,0.45);--ol-bg:#0a0c16;--ol-surface:#111320;--ol-surface-2:#16192a;--ol-text:#ecedf3;--ol-muted:#a4a6b7;--ol-line:#1f2237;--ol-line-2:#343955;--ol-side:#080b1e;--ol-side-2:#121736;--ol-side-text:#bdc1db;--ol-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.4);--ol-shadow-lg:0 24px 64px rgba(0,0,0,.6);color-scheme:dark}
:root[data-theme=dark][data-palette=lagoon]{--ol-brand:#0ccfe9;--ol-brand-hover:#25dbf4;--ol-brand-2:#59a0f8;--ol-brand-ink:#0a0e1a;--ol-brand-soft:rgba(12,207,233,0.16);--ol-ring:rgba(12,207,233,0.45);--ol-bg:#0a1316;--ol-surface:#111c20;--ol-surface-2:#172429;--ol-text:#ecf1f3;--ol-muted:#a4b2b7;--ol-line:#203137;--ol-line-2:#364c54;--ol-side:#08181e;--ol-side-2:#132c35;--ol-side-text:#bdd3db;--ol-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.4);--ol-shadow-lg:0 24px 64px rgba(0,0,0,.6);color-scheme:dark}
:root[data-theme=dark][data-palette=emerald],:root[data-theme=dark][data-palette=forest]{--ol-brand:#20d58d;--ol-brand-hover:#37e19d;--ol-brand-2:#66e6ea;--ol-brand-ink:#0a0e1a;--ol-brand-soft:rgba(32,213,141,0.16);--ol-ring:rgba(32,213,141,0.45);--ol-bg:#0b1512;--ol-surface:#131e1a;--ol-surface-2:#192722;--ol-text:#ecf3f1;--ol-muted:#a4b7b1;--ol-line:#23342e;--ol-line-2:#3a5049;--ol-side:#0a1d16;--ol-side-2:#153329;--ol-side-text:#bddbd1;--ol-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.4);--ol-shadow-lg:0 24px 64px rgba(0,0,0,.6);color-scheme:dark}
:root[data-theme=dark][data-palette=terra],:root[data-theme=dark][data-palette=sunset]{--ol-brand:#e75e27;--ol-brand-hover:#eb7647;--ol-brand-2:#efc761;--ol-brand-ink:#0a0e1a;--ol-brand-soft:rgba(231,94,39,0.16);--ol-ring:rgba(231,94,39,0.45);--ol-bg:#150f0b;--ol-surface:#1e1713;--ol-surface-2:#271f19;--ol-text:#f3efec;--ol-muted:#b7aba4;--ol-line:#342a23;--ol-line-2:#50433a;--ol-side:#1d110a;--ol-side-2:#332115;--ol-side-text:#dbc9bd;--ol-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.4);--ol-shadow-lg:0 24px 64px rgba(0,0,0,.6);color-scheme:dark}
:root[data-theme=dark][data-palette=graphite]{--ol-brand:#f0a43a;--ol-brand-hover:#f6b65a;--ol-brand-2:#fbbf24;--ol-brand-ink:#0a0e1a;--ol-brand-soft:rgba(240,164,58,.16);--ol-ring:rgba(240,164,58,.45);--ol-bg:#0a0d14;--ol-surface:#10141d;--ol-surface-2:#161b26;--ol-text:#e8ecf4;--ol-muted:#9aa5b8;--ol-line:#1f2633;--ol-line-2:#313a4c;--ol-side:#070a10;--ol-side-2:#161c28;--ol-side-text:#b9c3d4;--ol-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.4);--ol-shadow-lg:0 24px 64px rgba(0,0,0,.6);color-scheme:dark}
@media (prefers-color-scheme:dark){
:root:not([data-theme=light]):not([data-theme=dark])[data-palette=indigo],:root:not([data-theme=light]):not([data-theme=dark])[data-palette=ocean],:root:not([data-theme=light]):not([data-theme=dark])[data-palette=royal],:root:not([data-theme=light]):not([data-theme=dark]):not([data-palette]){--ol-brand:#6a7cf0;--ol-brand-hover:#8b99f4;--ol-brand-2:#8b5ff1;--ol-brand-ink:#0a0e1a;--ol-brand-soft:rgba(106,124,240,0.16);--ol-ring:rgba(106,124,240,0.45);--ol-bg:#0a0c16;--ol-surface:#111320;--ol-surface-2:#16192a;--ol-text:#ecedf3;--ol-muted:#a4a6b7;--ol-line:#1f2237;--ol-line-2:#343955;--ol-side:#080b1e;--ol-side-2:#121736;--ol-side-text:#bdc1db;--ol-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.4);--ol-shadow-lg:0 24px 64px rgba(0,0,0,.6);color-scheme:dark}
:root:not([data-theme=light]):not([data-theme=dark])[data-palette=lagoon]{--ol-brand:#0ccfe9;--ol-brand-hover:#25dbf4;--ol-brand-2:#59a0f8;--ol-brand-ink:#0a0e1a;--ol-brand-soft:rgba(12,207,233,0.16);--ol-ring:rgba(12,207,233,0.45);--ol-bg:#0a1316;--ol-surface:#111c20;--ol-surface-2:#172429;--ol-text:#ecf1f3;--ol-muted:#a4b2b7;--ol-line:#203137;--ol-line-2:#364c54;--ol-side:#08181e;--ol-side-2:#132c35;--ol-side-text:#bdd3db;--ol-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.4);--ol-shadow-lg:0 24px 64px rgba(0,0,0,.6);color-scheme:dark}
:root:not([data-theme=light]):not([data-theme=dark])[data-palette=emerald],:root:not([data-theme=light]):not([data-theme=dark])[data-palette=forest]{--ol-brand:#20d58d;--ol-brand-hover:#37e19d;--ol-brand-2:#66e6ea;--ol-brand-ink:#0a0e1a;--ol-brand-soft:rgba(32,213,141,0.16);--ol-ring:rgba(32,213,141,0.45);--ol-bg:#0b1512;--ol-surface:#131e1a;--ol-surface-2:#192722;--ol-text:#ecf3f1;--ol-muted:#a4b7b1;--ol-line:#23342e;--ol-line-2:#3a5049;--ol-side:#0a1d16;--ol-side-2:#153329;--ol-side-text:#bddbd1;--ol-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.4);--ol-shadow-lg:0 24px 64px rgba(0,0,0,.6);color-scheme:dark}
:root:not([data-theme=light]):not([data-theme=dark])[data-palette=terra],:root:not([data-theme=light]):not([data-theme=dark])[data-palette=sunset]{--ol-brand:#e75e27;--ol-brand-hover:#eb7647;--ol-brand-2:#efc761;--ol-brand-ink:#0a0e1a;--ol-brand-soft:rgba(231,94,39,0.16);--ol-ring:rgba(231,94,39,0.45);--ol-bg:#150f0b;--ol-surface:#1e1713;--ol-surface-2:#271f19;--ol-text:#f3efec;--ol-muted:#b7aba4;--ol-line:#342a23;--ol-line-2:#50433a;--ol-side:#1d110a;--ol-side-2:#332115;--ol-side-text:#dbc9bd;--ol-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.4);--ol-shadow-lg:0 24px 64px rgba(0,0,0,.6);color-scheme:dark}
:root:not([data-theme=light]):not([data-theme=dark])[data-palette=graphite]{--ol-brand:#f0a43a;--ol-brand-hover:#f6b65a;--ol-brand-2:#fbbf24;--ol-brand-ink:#0a0e1a;--ol-brand-soft:rgba(240,164,58,.16);--ol-ring:rgba(240,164,58,.45);--ol-bg:#0a0d14;--ol-surface:#10141d;--ol-surface-2:#161b26;--ol-text:#e8ecf4;--ol-muted:#9aa5b8;--ol-line:#1f2633;--ol-line-2:#313a4c;--ol-side:#070a10;--ol-side-2:#161c28;--ol-side-text:#b9c3d4;--ol-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.4);--ol-shadow-lg:0 24px 64px rgba(0,0,0,.6);color-scheme:dark}
}
.ol-mo-sw-indigo{background:linear-gradient(135deg,#0b1035 42%,#4e62e4 43%,#7e4def)}
.ol-mo-sw-lagoon{background:linear-gradient(135deg,#0b2934 42%,#0e8190 43%,#4595f7)}
.ol-mo-sw-emerald{background:linear-gradient(135deg,#0d3226 42%,#1b8359 43%,#54e3e8)}
.ol-mo-sw-terra{background:linear-gradient(135deg,#321c0d 42%,#c54f20 43%,#eec14f)}
.ol-mo-sw-graphite{background:linear-gradient(135deg,#10151f 42%,#b45309 43%,#fbbf24)}
/*THEMES-END*/
:root[data-theme=dark]{--ol-bad:#ff6b81;--ol-warn:#f5a524;--ol-ok:#2ed3a0;--ol-info:#6ea8ff}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=dark]){--ol-bad:#ff6b81;--ol-warn:#f5a524;--ol-ok:#2ed3a0;--ol-info:#6ea8ff}}

*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:radial-gradient(900px 340px at 85% -120px,color-mix(in srgb,var(--ol-brand) 9%,transparent),transparent 70%),radial-gradient(700px 300px at 0% -100px,color-mix(in srgb,var(--ol-brand-2) 7%,transparent),transparent 70%),var(--ol-bg);background-repeat:no-repeat;color:var(--ol-text);font:15px/1.6 var(--ol-font);-webkit-font-smoothing:antialiased}
h1{font-size:1.45rem;margin:0;letter-spacing:-.01em}h2{font-size:1.05rem;margin:0 0 .9rem}h3{font-size:.95rem;margin:0 0 .5rem}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}
:focus-visible{outline:2px solid var(--ol-brand-2);outline-offset:2px}
::selection{background:var(--ol-brand-soft)}
*{scrollbar-width:thin;scrollbar-color:var(--ol-line-2) transparent}
.ol-mo-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ol-mo-i{width:1.25em;height:1.25em;flex:none;vertical-align:-.22em;transition:transform var(--ol-dur) var(--ol-ease)}
.ol-mo-muted,.ol-mo-hint{color:var(--ol-muted);font-size:.88rem}.ol-mo-hint{display:flex;gap:.45rem;align-items:flex-start}.ol-mo-hint .ol-mo-i{margin-top:.15rem}
[hidden]{display:none!important}

/* ---------- motion ---------- */
@keyframes ol-fade{from{opacity:0}to{opacity:1}}
@keyframes ol-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ol-pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ol-drop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ol-slide{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes ol-shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes ol-spin{to{transform:rotate(360deg)}}
.ol-mo-main>*{animation:ol-rise .48s var(--ol-ease) both}.ol-mo-main>*:nth-child(2){animation-delay:.06s}.ol-mo-main>*:nth-child(3){animation-delay:.12s}.ol-mo-main>*:nth-child(4){animation-delay:.18s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------- buttons ---------- */
.ol-mo-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.55rem 1rem;border:1px solid var(--ol-line-2);border-radius:var(--ol-r-sm);background:var(--ol-surface);color:var(--ol-text);font-weight:500;line-height:1.2;transition:background var(--ol-dur),border-color var(--ol-dur),transform var(--ol-dur) var(--ol-ease),box-shadow var(--ol-dur),color var(--ol-dur);user-select:none}
.ol-mo-btn:hover{border-color:var(--ol-brand);color:var(--ol-brand);transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,.1)}
.ol-mo-btn:active{transform:translateY(0) scale(.98)}
.ol-mo-btn:disabled{opacity:.55;pointer-events:none}
.ol-mo-btn-primary{background:linear-gradient(135deg,var(--ol-brand),color-mix(in srgb,var(--ol-brand) 70%,var(--ol-brand-2)));border-color:transparent;color:var(--ol-brand-ink);box-shadow:0 6px 16px color-mix(in srgb,var(--ol-brand) 32%,transparent)}
.ol-mo-btn-primary:hover{filter:brightness(1.08) saturate(1.05);border-color:transparent;color:var(--ol-brand-ink);box-shadow:0 10px 24px color-mix(in srgb,var(--ol-brand) 40%,transparent)}
.ol-mo-btn-warn,.ol-mo-btn-danger{color:var(--ol-bad);border-color:color-mix(in srgb,var(--ol-bad) 55%,transparent);background:color-mix(in srgb,var(--ol-bad) 7%,var(--ol-surface))}
.ol-mo-btn-warn:hover,.ol-mo-btn-danger:hover{background:var(--ol-bad);border-color:var(--ol-bad);color:#fff}
.ol-mo-btn-danger.ol-mo-solid{background:var(--ol-bad);border-color:var(--ol-bad);color:#fff}
.ol-mo-btn-sm{padding:.3rem .65rem;font-size:.85rem;gap:.35rem}.ol-mo-btn-lg{padding:.8rem 1.2rem;font-size:1rem}.ol-mo-btn-block{width:100%}
.ol-mo-btn.ol-mo-busy{pointer-events:none;opacity:.8}.ol-mo-btn.ol-mo-busy::after{content:"";width:1em;height:1em;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:ol-spin .6s linear infinite}
.ol-mo-iconbtn{display:inline-grid;place-items:center;width:40px;height:40px;background:none;border:0;border-radius:11px;color:var(--ol-text);position:relative;transition:background var(--ol-dur),color var(--ol-dur),transform var(--ol-dur) var(--ol-ease)}
.ol-mo-iconbtn .ol-mo-i{width:1.35rem;height:1.35rem}.ol-mo-iconbtn:hover{background:var(--ol-brand-soft);color:var(--ol-brand)}.ol-mo-iconbtn:active{transform:scale(.92)}
.ol-mo-iconbtn.ol-mo-sm{width:30px;height:30px}.ol-mo-iconbtn.ol-mo-sm .ol-mo-i{width:1.1rem;height:1.1rem}
.ol-mo-chip{background:var(--ol-surface-2);border:1px solid var(--ol-line);border-radius:99px;padding:.3rem .8rem;font-size:.85rem;transition:.42s}.ol-mo-chip:hover{border-color:var(--ol-brand);color:var(--ol-brand)}
.ol-mo-linkbtn{background:none;border:0;color:var(--ol-brand);padding:.2rem .5rem;display:inline-flex;gap:.3rem;align-items:center}

/* ---------- forms: no labels, placeholders; custom select / number / date ---------- */
.ol-mo-fld{position:relative;min-width:0}
.ol-mo-in,.ol-mo-search{width:100%;padding:.78rem 1rem;border:1px solid var(--ol-line-2);border-radius:var(--ol-r-sm);background:var(--ol-surface);color:var(--ol-text);transition:border-color var(--ol-dur),box-shadow var(--ol-dur),background var(--ol-dur)}
.ol-mo-in::placeholder,.ol-mo-search::placeholder{color:var(--ol-muted);opacity:.85}
.ol-mo-in:hover{border-color:var(--ol-muted)}
.ol-mo-in:focus,.ol-mo-search:focus{outline:0;border-color:var(--ol-brand);box-shadow:0 0 0 4px var(--ol-brand-soft)}
textarea.ol-mo-in{resize:vertical;min-height:110px}
.ol-mo-fld.ol-mo-bad .ol-mo-in,.ol-mo-fld.ol-mo-bad .ol-mo-selbtn{border-color:var(--ol-bad);box-shadow:0 0 0 4px color-mix(in srgb,var(--ol-bad) 14%,transparent);animation:ol-shake .52s}
.ol-mo-err{color:var(--ol-bad);font-size:.8rem;min-height:0;max-height:0;overflow:hidden;transition:max-height var(--ol-dur),margin var(--ol-dur);display:flex;gap:.3rem;align-items:center}
.ol-mo-fld.ol-mo-bad .ol-mo-err{max-height:3rem;margin-top:.3rem}
.ol-mo-fld-ico>.ol-mo-i{position:absolute;inset-inline-start:.85rem;inset-block-start:1.45rem;transform:translateY(-50%);color:var(--ol-muted);pointer-events:none}
.ol-mo-fld-ico .ol-mo-in{padding-inline-start:2.7rem}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=date]{appearance:none}
.ol-mo-numwrap,.ol-mo-datewrap,.ol-mo-pwwrap{position:relative;display:block}
.ol-mo-numwrap .ol-mo-in{padding-inline-end:4.6rem}
.ol-mo-numbtns{position:absolute;inset-inline-end:.35rem;inset-block:.35rem;display:flex;gap:.2rem}
.ol-mo-numbtns button{width:30px;border:0;border-radius:7px;background:var(--ol-surface-2);color:var(--ol-text);display:grid;place-items:center;transition:.42s}.ol-mo-numbtns button:hover{background:var(--ol-brand);color:#fff}
.ol-mo-pwwrap .ol-mo-in,.ol-mo-datewrap .ol-mo-in{padding-inline-end:2.8rem}
.ol-mo-pwtoggle,.ol-mo-datebtn{position:absolute;inset-inline-end:.3rem;inset-block:.3rem;width:34px;border:0;background:none;border-radius:7px;color:var(--ol-muted);display:grid;place-items:center}.ol-mo-pwtoggle:hover,.ol-mo-datebtn:hover{color:var(--ol-brand);background:var(--ol-brand-soft)}
/* custom select */
.ol-mo-selwrap{position:relative}.ol-mo-selwrap>select{position:absolute;opacity:0;pointer-events:none;inset:0;width:100%;height:100%}
.ol-mo-selbtn{width:100%;display:flex;align-items:center;gap:.5rem;text-align:start;padding:.72rem .9rem;border:1px solid var(--ol-line-2);border-radius:var(--ol-r-sm);background:var(--ol-surface);transition:border-color var(--ol-dur),box-shadow var(--ol-dur)}
.ol-mo-selbtn:hover{border-color:var(--ol-muted)}.ol-mo-selwrap.ol-mo-open .ol-mo-selbtn{border-color:var(--ol-brand);box-shadow:0 0 0 4px var(--ol-brand-soft)}
.ol-mo-selbtn{padding-block:.42rem}.ol-mo-selbtn .ol-mo-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}.ol-mo-selbtn .ol-mo-ph{color:var(--ol-muted);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-mo-selbtn .ol-mo-val{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.ol-mo-selbtn .ol-mo-val.ol-mo-empty{color:var(--ol-muted);font-weight:400}
.ol-mo-list{position:fixed;z-index:400;background:var(--ol-surface);border:1px solid var(--ol-line);border-radius:12px;box-shadow:var(--ol-shadow-lg);padding:.35rem;max-height:280px;overflow:auto;animation:ol-drop .48s var(--ol-ease)}

.ol-mo-listsearch{width:100%;margin:.15rem 0 .35rem;padding:.5rem .7rem;border:1px solid var(--ol-line);border-radius:8px;background:var(--ol-surface-2)}
.ol-mo-opt{display:flex;align-items:center;gap:.5rem;width:100%;text-align:start;border:0;background:none;padding:.5rem .65rem;border-radius:8px;transition:background .42s}
.ol-mo-opt:hover,.ol-mo-opt.ol-mo-hl{background:var(--ol-brand-soft)}.ol-mo-opt.ol-mo-on{color:var(--ol-brand);font-weight:600}.ol-mo-opt .ol-mo-tick{margin-inline-start:auto;opacity:0}.ol-mo-opt.ol-mo-on .ol-mo-tick{opacity:1}
/* dropdown arrow: points OUT (towards the reading end) when closed, DOWN when open; flips with language direction */
.ol-mo-chev{margin-inline-start:auto;transition:transform var(--ol-dur) var(--ol-ease);width:1.05em;height:1.05em}
[dir=rtl] .ol-mo-chev{transform:scaleX(-1)}
.ol-mo-open>.ol-mo-selbtn .ol-mo-chev,.ol-mo-open>.ol-mo-userbtn .ol-mo-chev,.ol-mo-open>.ol-mo-subbtn .ol-mo-chev,.ol-mo-userbtn[aria-expanded=true] .ol-mo-chev,.ol-mo-subbtn[aria-expanded=true] .ol-mo-chev{transform:rotate(90deg)}
/* date picker */
.ol-mo-cal{position:fixed;z-index:400;width:292px;background:var(--ol-surface);border:1px solid var(--ol-line);border-radius:14px;box-shadow:var(--ol-shadow-lg);padding:.7rem;animation:ol-drop .48s var(--ol-ease)}
.ol-mo-calhead{display:flex;align-items:center;gap:.3rem;margin-bottom:.5rem}.ol-mo-calhead b{flex:1;text-align:center}
.ol-mo-calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}.ol-mo-calgrid span{font-size:.72rem;color:var(--ol-muted);padding:.25rem 0}
.ol-mo-day{border:0;background:none;border-radius:8px;aspect-ratio:1;font-size:.88rem;transition:.42s}.ol-mo-day:hover{background:var(--ol-brand-soft)}.ol-mo-day.ol-mo-on{background:var(--ol-brand);color:#fff}.ol-mo-day.ol-mo-today{box-shadow:inset 0 0 0 1px var(--ol-brand)}.ol-mo-day.ol-mo-off{opacity:.35}
.ol-mo-calfoot{display:flex;justify-content:space-between;margin-top:.4rem}
/* form layout (page and modal): roomy grid */
.ol-mo-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem 1.1rem;align-items:start}
.ol-mo-form>.ol-mo-fld-wide,.ol-mo-form>.ol-mo-form-actions,.ol-mo-form>.ol-mo-hint,.ol-mo-form>fieldset,.ol-mo-form>.ol-mo-modtitle,.ol-mo-form>.ol-mo-checks,.ol-mo-form>p,.ol-mo-form>.ol-mo-fs{grid-column:1/-1}
.ol-mo-form-actions{display:flex;gap:.6rem;justify-content:flex-end;padding-top:.4rem}
.ol-mo-form-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.ol-mo-check{display:flex;gap:.55rem;align-items:center;padding:.3rem .2rem;border-radius:8px;cursor:pointer;transition:background .42s}.ol-mo-check:hover{background:var(--ol-brand-soft)}
.ol-mo-check input{appearance:none;width:1.15rem;height:1.15rem;border:1.5px solid var(--ol-line-2);border-radius:6px;display:grid;place-items:center;transition:.42s;flex:none;background:var(--ol-surface)}
.ol-mo-check input::after{content:"";width:.55rem;height:.3rem;border:2px solid #fff;border-top:0;border-inline-end:0;transform:rotate(-45deg) scale(0);transition:transform .42s var(--ol-ease);margin-top:-2px}
.ol-mo-check input:checked{background:var(--ol-brand);border-color:var(--ol-brand)}.ol-mo-check input:checked::after{transform:rotate(-45deg) scale(1)}
.ol-mo-checks{columns:2 280px;column-gap:1.4rem}.ol-mo-modtitle{margin:.8rem 0 .2rem;text-transform:capitalize;color:var(--ol-brand);font-weight:600;break-after:avoid}
.ol-mo-fs{border:1px solid var(--ol-line);border-radius:12px;margin:0;padding:.9rem 1rem 1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem}.ol-mo-fs legend{padding:0 .5rem;font-weight:600;color:var(--ol-brand)}

/* ---------- cards, stats, tables ---------- */
.ol-mo-card{background:var(--ol-surface);border:1px solid var(--ol-line);border-radius:var(--ol-r);padding:1.25rem 1.4rem;margin-block-end:1.1rem;box-shadow:var(--ol-shadow);transition:box-shadow var(--ol-dur),transform var(--ol-dur) var(--ol-ease)}
.ol-mo-card>h2{display:flex;align-items:center;gap:.5rem}
.ol-mo-pagehead{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-block-end:1.1rem;flex-wrap:wrap}.ol-mo-pagehead-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.ol-mo-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1.1rem}.ol-mo-grid2>.ol-mo-card{margin:0}
.ol-mo-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.1rem;margin-block-end:1.1rem}
.ol-mo-stat{position:relative;overflow:hidden;display:flex;gap:.95rem;align-items:center;background:var(--ol-surface);border:1px solid var(--ol-line);border-radius:var(--ol-r);padding:1.05rem 1.15rem;box-shadow:var(--ol-shadow);transition:transform var(--ol-dur) var(--ol-ease),box-shadow var(--ol-dur),border-color var(--ol-dur)}
.ol-mo-stat::after{content:"";position:absolute;inset-inline-end:-30px;inset-block-start:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,var(--ol-brand-soft),transparent 70%);pointer-events:none}
.ol-mo-stat:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ol-brand) 35%,var(--ol-line))}.ol-mo-stat b{display:block;font-size:1.75rem;line-height:1.1;letter-spacing:-.02em}.ol-mo-stat span:not(.ol-mo-stat-ico){color:var(--ol-muted);font-size:.84rem}
.ol-mo-stat-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--ol-brand),color-mix(in srgb,var(--ol-brand) 55%,var(--ol-brand-2)));color:#fff;flex:none;box-shadow:0 8px 18px color-mix(in srgb,var(--ol-brand) 30%,transparent)}.ol-mo-stat-ico .ol-mo-i{width:1.4rem;height:1.4rem}
.ol-mo-stat-warn .ol-mo-stat-ico{background:linear-gradient(135deg,var(--ol-warn),#f59e0b);box-shadow:0 8px 18px color-mix(in srgb,var(--ol-warn) 30%,transparent)}.ol-mo-stat-warn b{color:var(--ol-warn)}
.ol-mo-tools{display:flex;gap:.8rem;align-items:center;margin-block-end:.8rem;flex-wrap:wrap}
.ol-mo-searchbox{position:relative;flex:1;max-width:360px;min-width:200px}.ol-mo-searchbox .ol-mo-i{position:absolute;inset-inline-start:.8rem;inset-block-start:50%;transform:translateY(-50%);color:var(--ol-muted);pointer-events:none}.ol-mo-searchbox .ol-mo-search{padding-inline-start:2.5rem;padding-block:.6rem}
.ol-mo-count{color:var(--ol-muted);font-size:.85rem}
.ol-mo-tablewrap{overflow-x:auto;border:1px solid var(--ol-line);border-radius:12px}.ol-mo-table{width:100%;border-collapse:collapse;font-size:.92rem}
.ol-mo-table th{text-align:start;color:var(--ol-muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;padding:.8rem .95rem;background:var(--ol-surface-2);border-block-end:1px solid var(--ol-line);cursor:pointer;white-space:nowrap;user-select:none}
.ol-mo-table th:hover{color:var(--ol-brand)}
.ol-mo-table td{padding:.7rem .9rem;border-block-end:1px solid var(--ol-line);vertical-align:middle}.ol-mo-table tbody tr:last-child td{border-block-end:0}
.ol-mo-table tbody tr{transition:background .42s}.ol-mo-table tbody tr:hover td{background:var(--ol-brand-soft)}
.ol-mo-table th.ol-mo-asc::after{content:" \25B2";font-size:.7em}.ol-mo-table th.ol-mo-desc::after{content:" \25BC";font-size:.7em}.ol-mo-empty td{text-align:center;color:var(--ol-muted);padding:2rem}
.ol-mo-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .6rem;border-radius:99px;font-size:.76rem;font-weight:600;background:var(--ol-line);color:var(--ol-text)}
.ol-mo-b-ok{background:color-mix(in srgb,var(--ol-ok) 15%,transparent);color:var(--ol-ok)}.ol-mo-b-bad{background:color-mix(in srgb,var(--ol-bad) 14%,transparent);color:var(--ol-bad)}.ol-mo-b-warn{background:color-mix(in srgb,var(--ol-warn) 16%,transparent);color:var(--ol-warn)}
.ol-mo-dl{display:grid;grid-template-columns:max-content 1fr;gap:.45rem 1.2rem;margin:0}.ol-mo-dl dt{color:var(--ol-muted)}.ol-mo-dl dd{margin:0;word-break:break-word}
.ol-mo-actions{display:flex;gap:.55rem;margin-block-start:1rem;flex-wrap:wrap}
.ol-mo-codebox{margin-block-start:1rem;padding:1.1rem;border:2px dashed var(--ol-brand);border-radius:12px;font:700 1.6rem ui-monospace,monospace;letter-spacing:.12em;text-align:center;background:var(--ol-brand-soft)}
.ol-mo-chartbox canvas{width:100%;display:block}

/* ---------- application shell: CSS grid, collapsible sidebar ---------- */
.ol-mo-shell{display:grid;grid-template-columns:var(--ol-side-w) minmax(0,1fr);grid-template-rows:var(--ol-top-h) 1fr auto;grid-template-areas:"side top" "side main" "side foot";min-height:100vh;transition:grid-template-columns .39s var(--ol-ease)}
:root[data-ol-collapsed="1"] .ol-mo-shell,.ol-mo-shell.ol-mo-collapsed{--ol-side-w:76px}
.ol-mo-side{grid-area:side;position:sticky;inset-block-start:0;height:100vh;background:radial-gradient(260px 220px at 0 0,color-mix(in srgb,var(--ol-brand-2) 22%,transparent),transparent 70%),linear-gradient(175deg,var(--ol-side-2),var(--ol-side) 70%);color:var(--ol-side-text);display:flex;flex-direction:column;padding:.9rem .7rem;overflow:hidden;z-index:50;box-shadow:inset -1px 0 0 var(--ol-side-line)}
[dir=rtl] .ol-mo-side{box-shadow:inset 1px 0 0 var(--ol-side-line)}
.ol-mo-brand{display:flex;align-items:center;gap:.7rem;color:#fff;padding:.2rem .45rem 1rem;white-space:nowrap}
.ol-mo-logo{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--ol-brand),var(--ol-brand-2));color:#fff;font:800 1.6rem var(--ol-font);box-shadow:0 8px 22px rgba(0,0,0,.28)}.ol-mo-logo-sm{width:42px;height:42px;font-size:1.15rem;border-radius:13px;flex:none}
.ol-mo-brandname{font-size:1.08rem;letter-spacing:.01em}
.ol-mo-nav{flex:1;overflow-y:auto;overflow-x:hidden;margin-inline:-.3rem;padding-inline:.3rem}
.ol-mo-navtitle{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;opacity:.55;padding:1.1rem .75rem .35rem;white-space:nowrap}
.ol-mo-navitem{display:flex;align-items:center;gap:.8rem;width:100%;text-align:start;background:none;border:0;color:inherit;padding:.64rem .8rem;border-radius:12px;white-space:nowrap;position:relative;transition:background .42s,color .42s,transform .42s var(--ol-ease)}
.ol-mo-navitem .ol-mo-i{width:1.3rem;height:1.3rem;opacity:.85}.ol-mo-navitem:hover{background:rgba(255,255,255,.09);color:#fff}.ol-mo-navitem:hover .ol-mo-i{opacity:1}
.ol-mo-navitem.ol-mo-on{background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.08));color:#fff;font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ol-mo-navitem.ol-mo-on::before{content:"";position:absolute;inset-inline-start:-.7rem;inset-block:22% 22%;width:4px;border-radius:0 4px 4px 0;background:var(--ol-brand-2)}[dir=rtl] .ol-mo-navitem.ol-mo-on::before{border-radius:4px 0 0 4px}
.ol-mo-navitem.ol-mo-on .ol-mo-i{opacity:1;color:var(--ol-brand-2)}
.ol-mo-collapse{display:flex;align-items:center;gap:.8rem;border:0;background:rgba(255,255,255,.07);color:inherit;padding:.6rem .8rem;border-radius:12px;margin-top:.6rem;white-space:nowrap}.ol-mo-collapse:hover{background:rgba(255,255,255,.14);color:#fff}
:root[data-ol-collapsed="1"] .ol-mo-collapse .ol-mo-i,.ol-mo-collapsed .ol-mo-collapse .ol-mo-i{transform:scaleX(-1)}[dir=rtl] .ol-mo-collapse .ol-mo-i{transform:scaleX(-1)}[dir=rtl]:root[data-ol-collapsed="1"] .ol-mo-collapse .ol-mo-i{transform:none}
:root[data-ol-collapsed="1"] .ol-mo-navlbl,:root[data-ol-collapsed="1"] .ol-mo-brandname,.ol-mo-collapsed .ol-mo-navlbl,.ol-mo-collapsed .ol-mo-brandname{display:none}
:root[data-ol-collapsed="1"] .ol-mo-navtitle,.ol-mo-collapsed .ol-mo-navtitle{font-size:0;padding:.3rem 0;margin:.5rem .8rem;border-block-start:1px solid rgba(255,255,255,.14)}
:root[data-ol-collapsed="1"] .ol-mo-navitem,:root[data-ol-collapsed="1"] .ol-mo-collapse,.ol-mo-collapsed .ol-mo-navitem,.ol-mo-collapsed .ol-mo-collapse{justify-content:center;padding-inline:0}
:root[data-ol-collapsed="1"] .ol-mo-brand,.ol-mo-collapsed .ol-mo-brand{justify-content:center;padding-inline:0}
.ol-mo-top{grid-area:top;display:flex;align-items:center;gap:.6rem;padding:0 1.4rem;background:color-mix(in srgb,var(--ol-surface) 82%,transparent);backdrop-filter:blur(14px) saturate(1.4);border-block-end:1px solid var(--ol-line);position:sticky;inset-block-start:0;z-index:40}
.ol-mo-top-title{flex:1;font-weight:700;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ol-mo-top-tools{display:flex;align-items:center;gap:.25rem}.ol-mo-burger{display:none}
.ol-mo-main{grid-area:main;padding:1.4rem 1.4rem 1rem;width:100%;max-width:1480px;margin-inline:auto;outline:0;min-width:0}
.ol-mo-foot{grid-area:foot;display:flex;align-items:center;gap:.6rem;padding:.7rem 1.4rem;color:var(--ol-muted);font-size:.84rem;border-block-start:1px solid var(--ol-line);background:var(--ol-surface)}
.ol-mo-foot>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ol-mo-ver{opacity:.7}
.ol-mo-has-badge .ol-mo-dot{position:absolute;inset-block-start:3px;inset-inline-end:3px;min-width:18px;height:18px;border-radius:99px;background:var(--ol-bad);color:#fff;font:700 .68rem/18px var(--ol-font);text-align:center;font-style:normal;padding:0 4px;animation:ol-pop .45s var(--ol-ease);box-shadow:0 0 0 2px var(--ol-surface)}
.ol-mo-has-badge.ol-mo-ring .ol-mo-i{animation:ol-shake .6s}
/* user menu */
.ol-mo-usermenu{position:relative;margin-inline-start:.3rem}
.ol-mo-userbtn{display:flex;align-items:center;gap:.55rem;border:1px solid var(--ol-line);background:var(--ol-surface);border-radius:99px;padding:.22rem .7rem .22rem .25rem;transition:.42s}.ol-mo-userbtn:hover{border-color:var(--ol-brand)}
.ol-mo-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ol-brand-soft);color:var(--ol-brand);overflow:hidden;flex:none}.ol-mo-avatar .ol-mo-i{width:1.9rem;height:1.9rem}.ol-mo-avatar img{width:100%;height:100%;object-fit:cover;display:block}.ol-mo-avatar-xl{width:72px;height:72px}.ol-mo-avatar-xl .ol-mo-i{width:4.4rem;height:4.4rem}.ol-mo-avatar-lg{width:46px;height:46px}.ol-mo-avatar-lg .ol-mo-i{width:2.8rem;height:2.8rem}
.ol-mo-uname{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.ol-mo-userbtn .ol-mo-chev{margin-inline-start:.1rem}
.ol-mo-menu{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 8px);background:var(--ol-surface);border:1px solid var(--ol-line);border-radius:14px;box-shadow:var(--ol-shadow-lg);width:272px;max-height:calc(100vh - var(--ol-top-h) - 14px);overflow-y:auto;padding:.4rem;z-index:70;animation:ol-drop .48s var(--ol-ease)}
.ol-mo-menuhead{display:flex;gap:.7rem;align-items:center;padding:.6rem .6rem .8rem}.ol-mo-menuhead small{display:block;color:var(--ol-muted)}
.ol-mo-menuitem{display:flex;align-items:center;gap:.7rem;width:100%;text-align:start;background:none;border:0;padding:.58rem .7rem;border-radius:9px;transition:background .42s,color .42s}.ol-mo-menuitem:hover{background:var(--ol-brand-soft);color:var(--ol-brand)}
.ol-mo-menuitem .ol-mo-tick{margin-inline-start:auto;opacity:0;color:var(--ol-brand)}.ol-mo-menuitem.ol-mo-on .ol-mo-tick{opacity:1}.ol-mo-menuitem.ol-mo-on{font-weight:600}
.ol-mo-sep{height:1px;background:var(--ol-line);margin:.35rem .3rem}
.ol-mo-danger{color:var(--ol-bad)}.ol-mo-danger:hover{background:var(--ol-bad)!important;color:#fff!important}
.ol-mo-subbody{display:none;padding:.15rem 0 .3rem;margin-inline-start:1.1rem;border-inline-start:2px solid var(--ol-line);padding-inline-start:.3rem}.ol-mo-sub.ol-mo-open>.ol-mo-subbody{display:block;animation:ol-fade .48s}
.ol-mo-swatches{display:flex;flex-wrap:wrap;gap:.6rem;padding:.55rem .7rem}.ol-mo-swatch{width:30px;height:30px;border-radius:50%;border:2px solid var(--ol-surface);box-shadow:0 0 0 1px var(--ol-line-2);transition:transform .42s var(--ol-ease)}.ol-mo-swatch:hover{transform:scale(1.15)}
.ol-mo-swatch.ol-mo-on{box-shadow:0 0 0 2px var(--ol-brand)}

/* notifications popover, toasts */
.ol-mo-pop{position:fixed;inset-block-start:calc(var(--ol-top-h) + 6px);inset-inline-end:14px;width:min(400px,calc(100vw - 24px));max-height:72vh;overflow:auto;background:var(--ol-surface);border:1px solid var(--ol-line);border-radius:14px;box-shadow:var(--ol-shadow-lg);z-index:60;padding:.5rem;animation:ol-drop .48s var(--ol-ease)}
.ol-mo-notif{padding:.65rem .75rem;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;gap:.1rem;transition:background .42s}.ol-mo-notif:hover{background:var(--ol-brand-soft)}.ol-mo-unread{border-inline-start:3px solid var(--ol-brand);background:var(--ol-surface-2)}.ol-mo-notif span,.ol-mo-notif time{font-size:.82rem;color:var(--ol-muted)}
.ol-mo-markall{width:100%;margin-bottom:.4rem}
.ol-mo-toasts{position:fixed;inset-block-end:18px;inset-inline-end:18px;display:flex;flex-direction:column;gap:.6rem;z-index:300;width:min(380px,calc(100vw - 36px))}
.ol-mo-toast{display:flex;gap:.7rem;align-items:flex-start;background:var(--ol-surface);color:var(--ol-text);border:1px solid var(--ol-line);border-inline-start:4px solid var(--ol-ok);padding:.8rem .9rem;border-radius:12px;box-shadow:var(--ol-shadow-lg);animation:ol-slide .42s var(--ol-ease)}
.ol-mo-toast .ol-mo-i{width:1.4rem;height:1.4rem;color:var(--ol-ok);margin-top:.05rem}.ol-mo-toast p{margin:0;flex:1;word-break:break-word}
.ol-mo-toast.ol-mo-t-bad{border-inline-start-color:var(--ol-bad)}.ol-mo-toast.ol-mo-t-bad .ol-mo-i{color:var(--ol-bad)}.ol-mo-toast.ol-mo-t-info{border-inline-start-color:var(--ol-info)}.ol-mo-toast.ol-mo-t-info .ol-mo-i{color:var(--ol-info)}
.ol-mo-toast.ol-mo-out{opacity:0;transform:translateX(24px);transition:.38s}
.ol-mo-toast button{border:0;background:none;color:var(--ol-muted);padding:0}
/* tooltips: one floating element, positioned in JS so it can never leave the screen or hide under another layer */
.ol-mo-tip{position:fixed;z-index:1000;max-width:260px;background:#0f172a;color:#f1f5f9;font-size:.8rem;line-height:1.35;padding:.38rem .65rem;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:none;opacity:0;transform:scale(.94);transition:opacity .42s,transform .42s var(--ol-ease)}
.ol-mo-tip.ol-mo-show{opacity:1;transform:none}
/* modals: wide, animated */
.ol-mo-mwrap{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.2rem;background:rgba(8,13,28,.55);backdrop-filter:blur(3px);animation:ol-fade .48s}
.ol-mo-modal{width:min(1000px,100%);max-height:calc(100vh - 2.4rem);display:flex;flex-direction:column;background:var(--ol-surface);border:1px solid var(--ol-line);border-radius:18px;box-shadow:var(--ol-shadow-lg);animation:ol-pop .48s var(--ol-ease);overflow:hidden}
.ol-mo-modal.ol-mo-sm{width:min(460px,100%)}.ol-mo-modal.ol-mo-md{width:min(720px,100%)}
.ol-mo-mhead{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.2rem;border-block-end:1px solid var(--ol-line);background:var(--ol-surface-2)}.ol-mo-mhead h2{margin:0;flex:1;font-size:1.1rem}
.ol-mo-mbody{padding:1.2rem;overflow:auto;flex:1}
.ol-mo-mfoot{display:flex;gap:.6rem;justify-content:flex-end;padding:.9rem 1.2rem;border-block-start:1px solid var(--ol-line);background:var(--ol-surface-2)}
.ol-mo-mwrap.ol-mo-closing{opacity:0;transition:opacity .42s}.ol-mo-mwrap.ol-mo-closing .ol-mo-modal{transform:translateY(10px) scale(.98);transition:.42s}
.ol-mo-confirm{display:flex;gap:1rem;align-items:flex-start}.ol-mo-confirm-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;flex:none;background:color-mix(in srgb,var(--ol-warn) 16%,transparent);color:var(--ol-warn)}.ol-mo-confirm-ico .ol-mo-i{width:1.6rem;height:1.6rem}.ol-mo-confirm p{margin:.2rem 0 0;font-size:1.02rem}
.ol-mo-tabs{display:flex;gap:.3rem;border-block-end:1px solid var(--ol-line);margin-bottom:1rem;overflow-x:auto}.ol-mo-tab{display:flex;align-items:center;gap:.5rem;border:0;background:none;padding:.65rem 1rem;border-block-end:2px solid transparent;color:var(--ol-muted);white-space:nowrap;transition:.42s}.ol-mo-tab:hover{color:var(--ol-brand)}.ol-mo-tab.ol-mo-on{color:var(--ol-brand);border-block-end-color:var(--ol-brand);font-weight:600}
.ol-mo-tabpane{display:none}.ol-mo-tabpane.ol-mo-on{display:block;animation:ol-fade .48s}
.ol-mo-abrow{display:flex;align-items:baseline;gap:1rem;padding:.6rem .2rem;border-block-end:1px dashed var(--ol-line)}.ol-mo-abrow:last-child{border-block-end:0}
.ol-mo-abk{display:flex;align-items:center;gap:.6rem;flex:0 0 min(230px,42%);color:var(--ol-muted)}.ol-mo-abk .ol-mo-i{color:var(--ol-brand)}.ol-mo-abk b{font-weight:600;color:var(--ol-text)}.ol-mo-abv{flex:1;min-width:0;word-break:break-word}

/* ---------- chat ---------- */
.ol-mo-chat{position:fixed;inset-block-end:0;inset-inline-end:18px;width:min(380px,calc(100vw - 36px));height:min(540px,82vh);background:var(--ol-surface);border:1px solid var(--ol-line);border-radius:16px 16px 0 0;box-shadow:var(--ol-shadow-lg);display:flex;flex-direction:column;z-index:150;animation:ol-rise .38s var(--ol-ease)}
.ol-mo-chat header{display:flex;justify-content:space-between;align-items:center;padding:.55rem .9rem;background:linear-gradient(135deg,var(--ol-brand),var(--ol-brand-2));color:#fff;border-radius:15px 15px 0 0}.ol-mo-chat header b{display:flex;gap:.5rem;align-items:center}.ol-mo-chat header .ol-mo-iconbtn{color:#fff;width:32px;height:32px}.ol-mo-chat header .ol-mo-iconbtn:hover{background:rgba(255,255,255,.2);color:#fff}
.ol-mo-chat-body{flex:1;overflow:auto;display:flex;flex-direction:column;min-height:0}.ol-mo-chat-sec{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ol-muted);padding:.7rem .9rem .25rem}
.ol-mo-chat-row{display:flex;flex-direction:column;text-align:start;background:none;border:0;border-block-end:1px solid var(--ol-line);padding:.65rem .9rem;transition:background .42s}.ol-mo-chat-row:hover{background:var(--ol-brand-soft)}.ol-mo-chat-row span{font-size:.82rem;color:var(--ol-muted)}
.ol-mo-pill{background:var(--ol-bad);color:#fff;border-radius:99px;padding:0 .5rem;font-size:.72rem;font-style:normal}
.ol-mo-thread{flex:1;overflow:auto;padding:.7rem;display:flex;flex-direction:column;gap:.45rem}.ol-mo-bubble{max-width:82%;background:var(--ol-surface-2);border:1px solid var(--ol-line);padding:.45rem .75rem;border-radius:14px;align-self:flex-start;animation:ol-rise .48s var(--ol-ease)}.ol-mo-bubble p{margin:0;word-break:break-word}.ol-mo-bubble time{font-size:.68rem;color:var(--ol-muted)}
.ol-mo-mine{align-self:flex-end;background:var(--ol-brand);border-color:var(--ol-brand);color:#fff}.ol-mo-mine time{color:rgba(255,255,255,.75)}
.ol-mo-composer{display:flex;gap:.45rem;padding:.55rem;border-block-start:1px solid var(--ol-line)}.ol-mo-composer input{flex:1;padding:.6rem .8rem;border:1px solid var(--ol-line-2);border-radius:10px;background:var(--ol-surface)}.ol-mo-composer input:focus{outline:0;border-color:var(--ol-brand)}

/* ---------- sign-in ---------- */
.ol-mo-login-body{margin:0;min-height:100vh;display:grid}.ol-mo-login{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh}
.ol-mo-login-art{display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:3rem;background:linear-gradient(150deg,var(--ol-side),var(--ol-side-2) 55%,var(--ol-brand));color:#fff;position:relative;overflow:hidden}
.ol-mo-login-art::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);inset-block-end:-140px;inset-inline-end:-120px}
.ol-mo-login-art h2{font-size:2rem;margin:.4rem 0 0}.ol-mo-login-art p{opacity:.85;max-width:420px;margin:0}.ol-mo-login-art ul{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.7rem}.ol-mo-login-art li{display:flex;gap:.7rem;align-items:center;opacity:.92;animation:ol-rise .7s var(--ol-ease) both}.ol-mo-login-art li:nth-child(2){animation-delay:.15s}.ol-mo-login-art li:nth-child(3){animation-delay:.3s}
.ol-mo-login-art .ol-mo-i{width:1.4rem;height:1.4rem;color:var(--ol-brand-2)}
.ol-mo-login-card{align-self:center;justify-self:center;width:min(430px,100%);padding:2rem 1.6rem;animation:ol-rise .6s var(--ol-ease)}
.ol-mo-login-card h1{margin:0 0 1.5rem;font-size:1.7rem}.ol-mo-login-card form{display:grid;gap:1rem}
.ol-mo-login-msg{color:var(--ol-bad);min-height:1.3rem;font-size:.9rem}
.ol-mo-login-foot{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-block-start:1.4rem;flex-wrap:wrap}.ol-mo-copy{text-align:center;color:var(--ol-muted);font-size:.8rem;margin-top:1.2rem}

/* ---------- responsive ---------- */
@media (max-width:1100px){.ol-mo-main{padding:1.1rem}}
@media (max-width:900px){
  .ol-mo-shell{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "main" "foot"}
  .ol-mo-side{position:fixed;inset-block:0;inset-inline-start:0;width:min(290px,86vw);transform:translateX(-105%);transition:transform .38s var(--ol-ease);box-shadow:var(--ol-shadow-lg)}
  [dir=rtl] .ol-mo-side{transform:translateX(105%)}.ol-mo-side.ol-mo-open{transform:none}
  :root[data-ol-collapsed="1"] .ol-mo-navlbl,:root[data-ol-collapsed="1"] .ol-mo-brandname{display:inline}
  :root[data-ol-collapsed="1"] .ol-mo-navitem{justify-content:flex-start;padding-inline:.75rem}
  .ol-mo-sideshade{display:none}.ol-mo-sideshade.ol-mo-open{display:block;position:fixed;inset:0;background:rgba(8,13,28,.5);z-index:45;animation:ol-fade .48s}
  .ol-mo-burger{display:inline-grid}.ol-mo-collapse{display:none}.ol-mo-uname,.ol-mo-userbtn>.ol-mo-chev{display:none}.ol-mo-userbtn{padding:.22rem}
  .ol-mo-top{padding:0 .7rem}.ol-mo-main{padding:.9rem .8rem}
  .ol-mo-login{grid-template-columns:1fr}.ol-mo-login-art{display:none}
  .ol-mo-mwrap{padding:0;align-items:end}.ol-mo-modal{width:100%!important;max-height:94vh;border-radius:18px 18px 0 0}
  .ol-mo-abrow{flex-direction:column;gap:.15rem}.ol-mo-abk{flex:none}
}
@media (max-width:520px){.ol-mo-stats{grid-template-columns:1fr 1fr}.ol-mo-stat{flex-direction:column;align-items:flex-start;gap:.5rem}.ol-mo-form{grid-template-columns:1fr}.ol-mo-pagehead h1{font-size:1.2rem}}
@media print{.ol-mo-side,.ol-mo-top,.ol-mo-foot,.ol-mo-chat,.ol-mo-toasts{display:none!important}.ol-mo-shell{display:block}}
.ol-mo-profilehead{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}.ol-mo-profilehead b{font-size:1.1rem}
.ol-mo-mbody .ol-mo-card{border:0;box-shadow:none;padding:0;margin:0;background:none}.ol-mo-mbody .ol-mo-card>h2{display:none}
/* ---------- catalogue ---------- */
.ol-mo-lv{display:inline-block}.ol-mo-lv2{padding-inline-start:1.2rem}.ol-mo-lv3{padding-inline-start:2.4rem}.ol-mo-lv4{padding-inline-start:3.6rem}
.ol-mo-lv1{font-weight:700}
.ol-mo-crumb{display:flex;align-items:center;gap:.5rem;color:var(--ol-muted);margin:0 0 1rem}.ol-mo-crumb .ol-mo-i{color:var(--ol-brand)}
.ol-mo-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem}
.ol-mo-slot{display:grid;gap:.5rem;justify-items:center;text-align:center;padding:.8rem;border:1px dashed var(--ol-line-2);border-radius:var(--ol-r);background:var(--ol-surface-2)}
.ol-mo-slot-main{border-style:solid;border-color:var(--ol-brand-2)}
.ol-mo-slot-pic{width:100%;aspect-ratio:4/3;display:grid;place-items:center;border-radius:10px;background:var(--ol-surface);overflow:hidden;color:var(--ol-muted)}
.ol-mo-slot-pic img{width:100%;height:100%;object-fit:cover}.ol-mo-slot-pic .ol-mo-i{width:2.2rem;height:2.2rem}
.ol-mo-fld-wide{grid-column:1/-1}
.ol-mo-implist{margin:.8rem 0 0;padding-inline-start:1.2rem;color:var(--ol-bad);max-height:240px;overflow:auto}.ol-mo-implist li{margin:.15rem 0}
/* ---------- analytics + chart engine (colours = --ol-c1..8, so palette and dark mode need no redraw) ---------- */
.ol-mo-f1{fill:var(--ol-c1);background:var(--ol-c1)}.ol-mo-f2{fill:var(--ol-c2);background:var(--ol-c2)}.ol-mo-f3{fill:var(--ol-c3);background:var(--ol-c3)}.ol-mo-f4{fill:var(--ol-c4);background:var(--ol-c4)}.ol-mo-f5{fill:var(--ol-c5);background:var(--ol-c5)}.ol-mo-f6{fill:var(--ol-c6);background:var(--ol-c6)}.ol-mo-f7{fill:var(--ol-c7);background:var(--ol-c7)}.ol-mo-f8{fill:var(--ol-c8);background:var(--ol-c8)}
.ol-mo-k1{stroke:var(--ol-c1)}.ol-mo-k2{stroke:var(--ol-c2)}.ol-mo-k3{stroke:var(--ol-c3)}.ol-mo-k4{stroke:var(--ol-c4)}.ol-mo-k5{stroke:var(--ol-c5)}.ol-mo-k6{stroke:var(--ol-c6)}.ol-mo-k7{stroke:var(--ol-c7)}.ol-mo-k8{stroke:var(--ol-c8)}
.ol-mo-st1{stop-color:var(--ol-c1)}.ol-mo-st2{stop-color:var(--ol-c2)}.ol-mo-st3{stop-color:var(--ol-c3)}.ol-mo-st4{stop-color:var(--ol-c4)}.ol-mo-st5{stop-color:var(--ol-c5)}.ol-mo-st6{stop-color:var(--ol-c6)}.ol-mo-st7{stop-color:var(--ol-c7)}.ol-mo-st8{stop-color:var(--ol-c8)}
.ol-mo-ch{position:relative;min-height:60px;direction:inherit}
.ol-mo-chsvg{display:block;direction:ltr;overflow:visible;max-width:100%}
.ol-mo-grid{stroke:var(--ol-line);stroke-width:1;stroke-dasharray:3 4}
.ol-mo-axis{fill:var(--ol-muted);font:11px var(--ol-font)}
.ol-mo-line{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:ol-draw 1s var(--ol-ease) both}
@keyframes ol-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ol-mo-area{stroke:none;animation:ol-fade .9s both}
.ol-mo-dotc{stroke:var(--ol-surface);stroke-width:1.5}
.ol-mo-guide{stroke:var(--ol-line-2);stroke-width:1;stroke-dasharray:3 3}
.ol-mo-hot{fill:transparent;cursor:crosshair}
.ol-mo-bar{transform-box:fill-box;transform-origin:50% 100%;animation:ol-grow .6s var(--ol-ease) both;transition:opacity .42s}.ol-mo-bar:hover{opacity:.82}
@keyframes ol-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.ol-mo-cht{position:absolute;z-index:5;pointer-events:none;min-width:130px;background:var(--ol-text);color:var(--ol-surface);border-radius:10px;padding:.5rem .7rem;box-shadow:var(--ol-shadow-lg);font-size:.8rem;line-height:1.4;direction:inherit}
.ol-mo-cht b{display:block;margin-bottom:.2rem}.ol-mo-cht-r{display:flex;align-items:center;gap:.45rem}.ol-mo-cht-r i{width:9px;height:9px;border-radius:50%;flex:none}.ol-mo-cht-r span{flex:1}.ol-mo-cht-r em{font-style:normal;font-weight:700}
.ol-mo-leg{display:flex;flex-wrap:wrap;gap:.35rem .5rem;margin-block-start:.6rem}
.ol-mo-leg-i{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--ol-line);background:var(--ol-surface-2);border-radius:99px;padding:.18rem .7rem;font-size:.8rem;transition:opacity .42s,border-color .42s}.ol-mo-leg-i:hover{border-color:var(--ol-brand)}.ol-mo-leg-i i{width:9px;height:9px;border-radius:50%}.ol-mo-leg-i.ol-mo-off{opacity:.45;text-decoration:line-through}
.ol-mo-chempty{color:var(--ol-muted);text-align:center;margin:1.6rem 0}
/* ranked bars */
.ol-mo-hb{display:grid;gap:.55rem}.ol-mo-hbr{display:grid;grid-template-columns:minmax(80px,34%) 1fr auto;gap:.7rem;align-items:center;font-size:.88rem}
.ol-mo-hbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ol-text)}.ol-mo-hbt{height:12px;border-radius:99px;background:var(--ol-surface-2);box-shadow:inset 0 0 0 1px var(--ol-line);overflow:hidden}
.ol-mo-hbt i{display:block;height:100%;border-radius:99px;animation:ol-bar .7s var(--ol-ease) both;transform-origin:left center}[dir=rtl] .ol-mo-hbt i{transform-origin:right center}
@keyframes ol-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ol-mo-hbv{min-width:2.2rem;text-align:end;font-variant-numeric:tabular-nums}
/* donut + gauge */
.ol-mo-dn{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.1rem 1.6rem}
.ol-mo-dnsvg,.ol-mo-ggsvg{display:block;flex:none;direction:ltr}
.ol-mo-dntrack{stroke:var(--ol-surface-2);stroke:color-mix(in srgb,var(--ol-line) 80%,transparent)}
.ol-mo-dnseg{transition:opacity .42s,stroke-width .42s;animation:ol-fade .8s both}.ol-mo-dnseg.ol-mo-dim{opacity:.28}
.ol-mo-dnw{position:relative;width:176px;height:176px;flex:none}.ol-mo-dnc{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.ol-mo-dnc b{font-size:1.7rem;line-height:1.1}.ol-mo-dnc span{font-size:.75rem;color:var(--ol-muted)}
.ol-mo-dn{--dn-w:176px}.ol-mo-dnl{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;flex:1;min-width:150px}
.ol-mo-dnl li{display:grid;grid-template-columns:10px 1fr auto auto;gap:.55rem;align-items:center;font-size:.86rem;padding:.1rem .3rem;border-radius:8px;cursor:default}.ol-mo-dnl li:hover{background:var(--ol-brand-soft)}.ol-mo-dnl li i{width:10px;height:10px;border-radius:3px}
.ol-mo-dnl em{font-style:normal;color:var(--ol-muted);min-width:2.6rem;text-align:end;font-size:.78rem}.ol-mo-dnl b{font-variant-numeric:tabular-nums}
.ol-mo-gg{position:relative;display:grid;place-items:center;min-height:150px}.ol-mo-ggc{position:absolute;inset:0;display:grid;place-content:center;text-align:center}.ol-mo-ggc b{font-size:1.9rem}.ol-mo-ggc span{font-size:.75rem;color:var(--ol-muted);max-width:110px}
/* heat map */
.ol-mo-heat{display:grid;grid-template-columns:auto repeat(var(--cols,24),minmax(0,1fr));gap:3px;align-items:center;direction:ltr}
.ol-mo-heat>span{min-height:20px;border-radius:5px;font-size:.7rem;color:var(--ol-muted);display:flex;align-items:center}.ol-mo-heatc{justify-content:flex-start;min-height:14px!important}.ol-mo-heatr{padding-inline-end:.5rem;white-space:nowrap}
.ol-mo-hl0{background:var(--ol-surface-2);box-shadow:inset 0 0 0 1px var(--ol-line)}
.ol-mo-hl1{background:color-mix(in srgb,var(--ol-c1) 18%,var(--ol-surface))}.ol-mo-hl2{background:color-mix(in srgb,var(--ol-c1) 38%,var(--ol-surface))}.ol-mo-hl3{background:color-mix(in srgb,var(--ol-c1) 58%,var(--ol-surface))}.ol-mo-hl4{background:color-mix(in srgb,var(--ol-c1) 78%,var(--ol-surface))}.ol-mo-hl5{background:var(--ol-c1)}
.ol-mo-heat>span[class^=ol-mo-hl]:hover{outline:2px solid var(--ol-text);outline-offset:-1px}
.ol-mo-spsvg{display:block;margin-block-start:.5rem;overflow:visible}
/* layout: tabs, range chips, KPI tiles, card grid */
.ol-mo-chips{display:flex;gap:.35rem;flex-wrap:wrap;padding:.25rem;background:var(--ol-surface);border:1px solid var(--ol-line);border-radius:99px}.ol-mo-chips .ol-mo-chip{border-color:transparent;background:none}.ol-mo-chips .ol-mo-chip.ol-mo-on{background:var(--ol-brand);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--ol-brand) 35%,transparent)}
.ol-mo-pagehead h1+.ol-mo-muted,.ol-mo-pagehead .ol-mo-muted{margin:.15rem 0 0}
.ol-mo-an-tabs{margin-block-end:1.1rem}
.ol-mo-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-block-end:1.1rem}
.ol-mo-kpi{position:relative;overflow:hidden;background:var(--ol-surface);border:1px solid var(--ol-line);border-radius:var(--ol-r);padding:1rem 1.1rem .9rem;box-shadow:var(--ol-shadow);transition:transform var(--ol-dur) var(--ol-ease),border-color var(--ol-dur)}
.ol-mo-kpi:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ol-brand) 35%,var(--ol-line))}
.ol-mo-kpi-top{display:flex;align-items:center;justify-content:space-between;margin-block-end:.7rem}.ol-mo-kpi .ol-mo-stat-ico{width:40px;height:40px;border-radius:12px}.ol-mo-kpi .ol-mo-stat-ico .ol-mo-i{width:1.2rem;height:1.2rem}
.ol-mo-kpi>b{display:block;font-size:1.8rem;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.ol-mo-kpi-l{color:var(--ol-muted);font-size:.84rem}.ol-mo-kpi small{display:block;color:var(--ol-muted);font-size:.76rem;margin-block-start:.15rem}
.ol-mo-delta{display:inline-flex;align-items:center;gap:.25rem;padding:.12rem .55rem;border-radius:99px;font-size:.76rem;font-weight:700}.ol-mo-delta .ol-mo-i{width:.95rem;height:.95rem}
.ol-mo-d-good{background:color-mix(in srgb,var(--ol-ok) 15%,transparent);color:var(--ol-ok)}.ol-mo-d-bad{background:color-mix(in srgb,var(--ol-bad) 14%,transparent);color:var(--ol-bad)}.ol-mo-d-flat{background:var(--ol-surface-2);color:var(--ol-muted)}
.ol-mo-an-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.ol-mo-an-card{margin:0}.ol-mo-an-wide{grid-column:1/-1}
.ol-mo-cardhead{display:flex;align-items:center;gap:.55rem;margin-block-end:.9rem}.ol-mo-cardhead>.ol-mo-i{color:var(--ol-brand);width:1.3rem;height:1.3rem}.ol-mo-cardhead h2{margin:0;font-size:1rem;flex:1}.ol-mo-cardhead small{color:var(--ol-muted);font-size:.78rem}
.ol-mo-chartbox h3{margin:0 0 .6rem}
@media (max-width:1000px){.ol-mo-an-grid{grid-template-columns:1fr}}
.ol-mo-still *{animation:none!important}
.ol-mo-form>.ol-mo-tabs,.ol-mo-form>.ol-mo-tabpane{grid-column:1/-1}.ol-mo-form-pane.ol-mo-on{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem 1.1rem;align-items:start}
.ol-mo-delta{direction:ltr;unicode-bidi:isolate}
.ol-mo-404{display:grid;place-items:center;min-height:100vh;text-align:center;color:var(--ol-muted)}.ol-mo-404 h1{font-size:4.5rem;margin:0;background:linear-gradient(135deg,var(--ol-brand),var(--ol-brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- sidebar drop-downs (groups + parents) ---------- */
.ol-mo-navtitle.ol-mo-gtoggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;color:inherit;text-align:start;cursor:pointer;font:inherit;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;opacity:.6;padding:1.1rem .75rem .35rem;transition:opacity .42s}
.ol-mo-gtoggle:hover{opacity:1}
.ol-mo-gchev,.ol-mo-pchev{width:.9rem;height:.9rem;flex:none;transition:transform .42s var(--ol-ease)}
[dir=rtl] .ol-mo-gchev,[dir=rtl] .ol-mo-pchev{transform:scaleX(-1)}
.ol-mo-navgroup:not(.ol-mo-gshut) .ol-mo-gchev{transform:rotate(90deg)}
.ol-mo-pchev{margin-inline-start:auto}
.ol-mo-npar.ol-mo-popen>.ol-mo-parent .ol-mo-pchev{transform:rotate(90deg)}
.ol-mo-gbody{display:block}
.ol-mo-gshut .ol-mo-gbody{display:block;height:0;opacity:0;visibility:hidden;overflow:hidden}
.ol-mo-nsub{display:block;height:0;opacity:0;visibility:hidden;overflow:hidden;margin-inline-start:1.25rem;padding-inline-start:.4rem;border-inline-start:1px solid rgba(255,255,255,.16)}
.ol-mo-npar.ol-mo-popen .ol-mo-nsub{height:auto;opacity:1;visibility:visible}
.ol-mo-subitem{padding-block:.5rem}
.ol-mo-parent.ol-mo-has-on{color:#fff;font-weight:600}
.ol-mo-pdot{display:none;position:absolute;inset-block-end:.45rem;inset-inline-end:.7rem;width:7px;height:7px;border-radius:50%;background:var(--ol-brand-2);box-shadow:0 0 0 2px var(--ol-side)}
/* collapsed sidebar: groups stay flat as before; parents show a dot and open a fly-out */
:root[data-ol-collapsed="1"] .ol-mo-gshut .ol-mo-gbody{display:block;height:auto;opacity:1;visibility:visible;overflow:visible}
:root[data-ol-collapsed="1"] .ol-mo-gchev,:root[data-ol-collapsed="1"] .ol-mo-pchev,:root[data-ol-collapsed="1"] .ol-mo-nsub,:root[data-ol-collapsed="1"] .ol-mo-npar.ol-mo-popen .ol-mo-nsub{display:none}
:root[data-ol-collapsed="1"] .ol-mo-navtitle.ol-mo-gtoggle{font-size:0;padding:.3rem 0;margin:.5rem .8rem;border-block-start:1px solid rgba(255,255,255,.14);width:auto;cursor:default;pointer-events:none}
:root[data-ol-collapsed="1"] .ol-mo-pdot{display:block}
:root[data-ol-collapsed="1"] .ol-mo-parent{justify-content:center;padding-inline:0}
.ol-mo-fly{position:fixed;z-index:80;min-width:210px;max-width:290px;max-height:calc(100vh - 20px);overflow-y:auto;background:var(--ol-surface);color:var(--ol-text);border:1px solid var(--ol-line);border-radius:14px;box-shadow:var(--ol-shadow-lg);padding:.4rem;animation:ol-fade .48s}
.ol-mo-fly-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;opacity:.6;padding:.45rem .7rem .3rem}
.ol-mo-fly .ol-mo-navitem{color:var(--ol-text);padding:.55rem .7rem;justify-content:flex-start}
.ol-mo-fly .ol-mo-navitem:hover{background:var(--ol-hover,rgba(127,127,127,.12));color:var(--ol-text)}
.ol-mo-fly .ol-mo-navitem.ol-mo-on{background:color-mix(in srgb,var(--ol-brand) 14%,transparent);color:var(--ol-brand);box-shadow:none}
.ol-mo-fly .ol-mo-navitem.ol-mo-on::before{display:none}
.ol-mo-fly .ol-mo-navlbl{display:inline!important}
@media (max-width:900px){:root[data-ol-collapsed="1"] .ol-mo-gchev,:root[data-ol-collapsed="1"] .ol-mo-pchev{display:block}:root[data-ol-collapsed="1"] .ol-mo-navtitle.ol-mo-gtoggle{font-size:.68rem;padding:1.1rem .75rem .35rem;margin:0;border:0;width:100%;pointer-events:auto}:root[data-ol-collapsed="1"] .ol-mo-pdot{display:none}:root[data-ol-collapsed="1"] .ol-mo-npar.ol-mo-popen .ol-mo-nsub{display:block}:root[data-ol-collapsed="1"] .ol-mo-gshut .ol-mo-gbody{display:none}}
.ol-mo-fly .ol-mo-i{flex:none}

/* ---------- data shown as written information, one card per category, edit in a modal ---------- */
.ol-mo-info{background:var(--ol-surface);border:1px solid var(--ol-line);border-radius:var(--ol-r-lg,18px);box-shadow:var(--ol-shadow);padding:1.1rem 1.25rem;min-width:0}
.ol-mo-info>header{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.7rem;padding-bottom:.65rem;border-bottom:1px solid var(--ol-line)}
.ol-mo-info>header h3{display:flex;align-items:center;gap:.55rem;margin:0;font-size:1rem}.ol-mo-info>header h3 .ol-mo-i{color:var(--ol-brand);width:1.15rem;height:1.15rem}
.ol-mo-info-act{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.ol-mo-info dl{margin:0;display:grid;gap:.1rem}
.ol-mo-inforow{display:grid;grid-template-columns:minmax(110px,38%) 1fr;gap:.9rem;padding:.5rem 0;border-bottom:1px dashed var(--ol-line)}.ol-mo-inforow:last-child{border-bottom:0}
.ol-mo-inforow dt{color:var(--ol-muted);font-size:.9rem}.ol-mo-inforow dd{margin:0;word-break:break-word;font-weight:500}
.ol-mo-infogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:1.1rem;align-items:start}
@media (max-width:520px){.ol-mo-inforow{grid-template-columns:1fr;gap:.1rem}}
.ol-mo-dots{letter-spacing:.15em;color:var(--ol-muted)}
.ol-mo-sechead{display:flex;align-items:center;gap:.6rem;font-size:1.15rem;margin:1.4rem 0 .4rem}.ol-mo-sechead .ol-mo-i{color:var(--ol-brand)}

/* ---------- chat window controls + Messages page ---------- */
.ol-mo-chat header{gap:.3rem;cursor:default}.ol-mo-chat header b{flex:1;min-width:0}.ol-mo-chat header b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol-mo-chat-tools{display:flex;gap:.1rem}
.ol-mo-chat.ol-mo-min{height:auto}.ol-mo-chat.ol-mo-min .ol-mo-chat-body{display:none}.ol-mo-chat.ol-mo-min header{border-radius:15px 15px 0 0}
.ol-mo-chat-body .ol-mo-thread{min-height:0}
.ol-mo-daysep{align-self:center;font-size:.72rem;color:var(--ol-muted);background:var(--ol-surface-2);border:1px solid var(--ol-line);border-radius:99px;padding:.05rem .7rem;margin:.3rem 0}
.ol-mo-pad{padding:.7rem .9rem}
.ol-mo-info-wide{grid-column:1/-1}
.ol-mo-s-thread{display:flex;flex-direction:column;gap:.5rem;margin-block-end:1rem;max-height:420px;overflow:auto}.ol-mo-s-thread .ol-mo-bubble b{display:block;font-size:.78rem;opacity:.8}
.ol-mo-bubble.ol-mo-internal{background:color-mix(in srgb,var(--ol-warn,#d97706) 14%,var(--ol-surface));border-style:dashed;color:var(--ol-text)}.ol-mo-bubble.ol-mo-internal time{color:var(--ol-muted)}


/* ================= 0.6.0 : STAFF MESSAGES (mail-like) / CUSTOMER SERVICE / LIVE CHAT ================= */
.ol-mo-navpill{margin-inline-start:auto;min-width:20px;height:20px;padding:0 .4rem;border-radius:99px;background:var(--ol-bad);color:#fff;font:700 .7rem/20px var(--ol-font);text-align:center;font-style:normal}
:root[data-ol-collapsed="1"] .ol-mo-navpill,.ol-mo-collapsed .ol-mo-navpill{position:absolute;inset-block-start:4px;inset-inline-end:10px;min-width:9px;height:9px;padding:0;font-size:0;border:2px solid var(--ol-side)}
.ol-mo-tabs-top{padding:0 .4rem;margin:0}
.ol-mo-tab.ol-mo-on{color:var(--ol-brand);border-block-end-color:var(--ol-brand);font-weight:600}.ol-mo-tab .ol-mo-pill{margin-inline-start:.15rem}
.ol-mo-newdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ol-brand);margin-inline-end:.5rem;box-shadow:0 0 0 3px var(--ol-brand-soft)}
/* mailbox */
.ol-mo-mailbox{padding:0;overflow:hidden}
.ol-mo-mailbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.2rem 1rem 0;border-block-end:1px solid var(--ol-line)}.ol-mo-mailbar .ol-mo-tabs{border:0;margin:0}
.ol-mo-mailbar .ol-mo-searchbox{margin-block:.4rem}
.ol-mo-maillist{display:flex;flex-direction:column}
.ol-mo-mailrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;text-align:start;background:none;border:0;border-block-end:1px solid var(--ol-line);padding:.85rem 1.1rem;color:inherit;transition:background .42s;width:100%}
.ol-mo-mailrow:last-child{border-block-end:0}.ol-mo-mailrow:hover{background:var(--ol-brand-soft)}.ol-mo-mailrow[hidden]{display:none}
.ol-mo-mail-main{display:flex;flex-direction:column;gap:.1rem;min-width:0}.ol-mo-mail-top{display:flex;align-items:center;gap:.6rem}.ol-mo-mail-top small{display:inline-flex;align-items:center;gap:.25rem;color:var(--ol-muted);font-size:.74rem}.ol-mo-mail-top small .ol-mo-i{width:.9rem;height:.9rem}
.ol-mo-mail-sub{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ol-mo-mail-snip{color:var(--ol-muted);font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol-mo-mail-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;font-size:.74rem;color:var(--ol-muted)}.ol-mo-starred .ol-mo-i{width:1rem;height:1rem;color:#f59e0b;fill:#f59e0b}
.ol-mo-mailrow:not(.ol-mo-unread) .ol-mo-mail-sub{font-weight:500}.ol-mo-mailrow.ol-mo-unread{background:color-mix(in srgb,var(--ol-brand) 5%,var(--ol-surface))}.ol-mo-mailrow.ol-mo-unread .ol-mo-mail-top b,.ol-mo-mailrow.ol-mo-unread .ol-mo-mail-sub{color:var(--ol-brand)}
.ol-mo-emptystate{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:3.2rem 1rem;color:var(--ol-muted)}.ol-mo-emptystate .ol-mo-i{width:3rem;height:3rem;opacity:.35}.ol-mo-emptystate p{margin:0}
.ol-mo-avatar{flex:0 0 auto}
/* recipient picker */
.ol-mo-pickhead{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-block-end:.5rem;font-weight:600}
.ol-mo-pick{max-height:230px;overflow:auto;border:1px solid var(--ol-line-2);border-radius:var(--ol-r-sm);background:var(--ol-surface)}
.ol-mo-pickrow{display:flex;align-items:center;gap:.7rem;padding:.5rem .8rem;border-block-end:1px solid var(--ol-line);cursor:pointer;transition:background .42s}.ol-mo-pickrow:last-child{border-block-end:0}.ol-mo-pickrow:hover{background:var(--ol-brand-soft)}.ol-mo-pickrow[hidden]{display:none}
.ol-mo-pickrow input{accent-color:var(--ol-brand);width:1.05rem;height:1.05rem}.ol-mo-pickname{display:flex;flex-direction:column;line-height:1.25}.ol-mo-pickname small{color:var(--ol-muted)}
.ol-mo-pickrow:has(input:checked){background:color-mix(in srgb,var(--ol-brand) 10%,var(--ol-surface))}
/* thread of letters */
.ol-mo-mailthread{display:flex;flex-direction:column;gap:1rem}
.ol-mo-mailpeople{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;color:var(--ol-muted);font-size:.86rem}
.ol-mo-letters{display:flex;flex-direction:column;gap:.9rem}
.ol-mo-letter{background:var(--ol-surface);border:1px solid var(--ol-line);border-radius:var(--ol-r);overflow:hidden;animation:ol-rise .48s var(--ol-ease)}
.ol-mo-letter header{display:flex;align-items:center;gap:.7rem;padding:.65rem 1rem;background:var(--ol-surface-2);border-block-end:1px solid var(--ol-line)}.ol-mo-letter header b{flex:1}.ol-mo-letter header time{color:var(--ol-muted);font-size:.78rem}
.ol-mo-letter.ol-mo-mine{border-color:color-mix(in srgb,var(--ol-brand) 35%,var(--ol-line));background:var(--ol-surface);color:var(--ol-text)}.ol-mo-letter.ol-mo-mine header{background:color-mix(in srgb,var(--ol-brand) 8%,var(--ol-surface))}
.ol-mo-letter-body{padding:1rem 1.1rem;line-height:1.7;word-break:break-word}
.ol-mo-letter-reply{border-block-start:1px dashed var(--ol-line-2);padding-block-start:1rem}
.ol-mo-sysmsg{align-self:center;text-align:center;font-size:.78rem;color:var(--ol-muted);background:var(--ol-surface-2);border:1px solid var(--ol-line);border-radius:99px;padding:.15rem .9rem;margin:.3rem 0}
/* chat window extras */
.ol-mo-chat-closed{margin:0;padding:.7rem;text-align:center;color:var(--ol-muted);border-block-start:1px solid var(--ol-line);font-size:.86rem}
.ol-mo-chat-cust b{display:flex;align-items:center;gap:.4rem}.ol-mo-chat-cust{border-inline-start:3px solid var(--ol-brand)}
.ol-mo-bubble b{display:block;font-size:.74rem;opacity:.8;margin-block-end:.1rem}
.ol-mo-letter.ol-mo-internal{border-style:dashed;background:color-mix(in srgb,var(--ol-warn) 9%,var(--ol-surface))}.ol-mo-letters-tight{margin-block-end:1rem}

/* ================= 0.6.0 : polish (forms, modals, cards, tables) ================= */
/* placeholder-only fields: the placeholder floats up as a small label once there is a value */
.ol-mo-fld .ol-mo-flt{position:absolute;inset-inline-start:1rem;inset-block-start:.46rem;font-size:.7rem;line-height:1;font-weight:600;color:var(--ol-brand);letter-spacing:.01em;opacity:0;transform:translateY(3px);transition:opacity .42s var(--ol-ease),transform .42s var(--ol-ease);pointer-events:none;white-space:nowrap;max-width:calc(100% - 2rem);overflow:hidden;text-overflow:ellipsis}
.ol-mo-fld .ol-mo-in:not(:placeholder-shown){padding-block:1.18rem .38rem}
.ol-mo-fld .ol-mo-in:not(:placeholder-shown)~.ol-mo-flt{opacity:1;transform:none}
.ol-mo-fld-ico .ol-mo-flt{inset-inline-start:2.7rem}
.ol-mo-fld textarea.ol-mo-in{line-height:1.55;resize:vertical;min-height:6.2rem}
/* modal */
.ol-mo-mhead{padding:1rem 1.3rem;background:var(--ol-surface)}.ol-mo-mhead>.ol-mo-i{box-sizing:content-box;width:1.15rem;height:1.15rem;padding:.5rem;border-radius:11px;background:var(--ol-brand-soft);color:var(--ol-brand)}
.ol-mo-mhead h2{font-size:1.08rem;letter-spacing:.005em}
.ol-mo-mbody{padding:1.3rem}
.ol-mo-cancel{display:none}.ol-mo-modal .ol-mo-cancel{display:inline-flex;background:transparent}
.ol-mo-modal .ol-mo-form-actions{margin-inline:-1.3rem;margin-block-end:-1.3rem;padding:.9rem 1.3rem;border-block-start:1px solid var(--ol-line);background:var(--ol-surface-2);position:sticky;inset-block-end:-1.3rem}
.ol-mo-modal.ol-mo-lg{width:min(860px,100%)}
/* cards and cards of written data */
.ol-mo-info header h3>.ol-mo-i{box-sizing:content-box;width:1rem;height:1rem;padding:.4rem;border-radius:9px;background:var(--ol-brand-soft);color:var(--ol-brand)}
.ol-mo-info header h3{display:flex;align-items:center;gap:.6rem}
.ol-mo-inforow dd .ol-mo-linkbtn{padding:0;text-align:start}
.ol-mo-pagehead{margin-block-end:1.2rem}.ol-mo-pagehead h1{letter-spacing:-.01em}
/* tables */
.ol-mo-table thead th{position:sticky;inset-block-start:0;background:var(--ol-surface-2);font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ol-muted)}
.ol-mo-table tbody tr{transition:background .42s}.ol-mo-table tbody tr:hover{background:var(--ol-brand-soft)}
/* letters and chips */
.ol-mo-letters .ol-mo-letter.ol-mo-mine,.ol-mo-letter.ol-mo-mine{align-self:stretch;max-width:none;color:var(--ol-text);background:var(--ol-surface)}
.ol-mo-letter.ol-mo-mine .ol-mo-letter-body{color:var(--ol-text)}.ol-mo-letter.ol-mo-mine header time{color:var(--ol-muted)}
.ol-mo-mailpeople .ol-mo-chip{background:var(--ol-surface-2);cursor:default}.ol-mo-mailpeople .ol-mo-chip:hover{border-color:var(--ol-line);color:inherit}

/* =============================================================================
   v0.7.0 - communication layer: header messages drop-down, Conversations page, chat window (name only)
   ============================================================================= */
.ol-mo-chat{inset-inline-end:22px;inset-block-end:18px;width:min(372px,calc(100vw - 28px));height:min(560px,82vh);border-radius:20px;border:1px solid var(--ol-line);overflow:hidden;box-shadow:var(--ol-shadow-lg),0 0 0 1px color-mix(in srgb,var(--ol-brand) 8%,transparent);z-index:150;transform-origin:bottom right}
.ol-mo-chat header{background:var(--ol-surface);color:var(--ol-text);border-radius:0;border-block-end:1px solid var(--ol-line);padding:.7rem .8rem;gap:.65rem;justify-content:flex-start}
.ol-mo-chat header .ol-mo-iconbtn{color:var(--ol-muted);width:34px;height:34px;border-radius:10px}.ol-mo-chat header .ol-mo-iconbtn:hover{background:var(--ol-brand-soft);color:var(--ol-brand)}
.ol-mo-chat header b{font-size:1rem;font-weight:650;letter-spacing:-.005em}
.ol-mo-chat-av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--ol-brand-soft);color:var(--ol-brand);border:1px solid color-mix(in srgb,var(--ol-brand) 22%,transparent)}
.ol-mo-chat.ol-mo-chat-cust .ol-mo-chat-av{background:color-mix(in srgb,var(--ol-c6) 16%,transparent);color:var(--ol-c6);border-color:color-mix(in srgb,var(--ol-c6) 30%,transparent)}
.ol-mo-chat.ol-mo-min{height:auto;border-radius:16px}.ol-mo-chat.ol-mo-min header{border-block-end:0}
.ol-mo-chat-body{background:var(--ol-bg)}
.ol-mo-thread{padding:1rem .9rem;gap:.35rem;scroll-behavior:smooth}
.ol-mo-bubble{max-width:80%;border-radius:18px 18px 18px 6px;padding:.5rem .8rem .35rem;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.ol-mo-bubble.ol-mo-mine{border-radius:18px 18px 6px 18px;background:var(--ol-brand);border-color:transparent;color:var(--ol-brand-ink)}
:root[dir=rtl] .ol-mo-bubble{border-radius:18px 18px 6px 18px}:root[dir=rtl] .ol-mo-bubble.ol-mo-mine{border-radius:18px 18px 18px 6px}
.ol-mo-bubble time{display:block;text-align:end;margin-top:.1rem}
.ol-mo-mine time{color:color-mix(in srgb,var(--ol-brand-ink) 70%,transparent)}
.ol-mo-daysep{align-self:center;font-size:.72rem;color:var(--ol-muted);background:var(--ol-surface);border:1px solid var(--ol-line);border-radius:99px;padding:.1rem .7rem;margin:.4rem 0}
.ol-mo-composer{background:var(--ol-surface);padding:.65rem;gap:.5rem;align-items:center}
.ol-mo-composer input{border-radius:99px;padding:.65rem 1rem;background:var(--ol-surface-2);border-color:var(--ol-line)}
.ol-mo-composer input:focus{background:var(--ol-surface);box-shadow:0 0 0 3px var(--ol-ring)}
.ol-mo-composer .ol-mo-btn{border-radius:50%;width:42px;height:42px;padding:0;display:grid;place-items:center;flex:none}
.ol-mo-chat-closed{background:var(--ol-surface)}

.ol-mo-pophead{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.35rem .5rem .6rem;border-block-end:1px solid var(--ol-line);margin-bottom:.35rem}.ol-mo-pophead b{font-size:.98rem}
.ol-mo-mailpeek{display:flex;gap:.7rem;align-items:flex-start;width:100%;text-align:start;background:none;border:0;padding:.65rem .55rem;border-radius:12px;transition:background .42s var(--ol-ease)}
.ol-mo-mailpeek:hover{background:var(--ol-brand-soft)}.ol-mo-mailpeek.ol-mo-unread{background:var(--ol-surface-2);box-shadow:inset 3px 0 0 var(--ol-brand)}:root[dir=rtl] .ol-mo-mailpeek.ol-mo-unread{box-shadow:inset -3px 0 0 var(--ol-brand)}
.ol-mo-mailpeek .ol-mo-pill{margin-inline-start:auto;align-self:center}.ol-mo-mailpeek time{margin-inline-start:auto;font-size:.74rem;color:var(--ol-muted);font-weight:400}
.ol-mo-skel{height:54px;border-radius:12px;margin:.3rem 0;background:linear-gradient(90deg,var(--ol-surface-2),var(--ol-line),var(--ol-surface-2));background-size:200% 100%;animation:ol-shimmer 1.2s linear infinite}
@keyframes ol-shimmer{to{background-position:-200% 0}}

.ol-mo-convcard{padding:0;overflow:hidden}
.ol-mo-convcard .ol-mo-tabs{padding:0 1rem;margin:0;background:var(--ol-surface-2)}
.ol-mo-convbar{display:flex;gap:.75rem;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:1rem 1.1rem}
.ol-mo-convbar .ol-mo-searchbox{flex:1;min-width:200px;max-width:420px}
.ol-mo-convlist{display:flex;flex-direction:column;padding:0 .5rem .6rem}
.ol-mo-convrow{display:flex;align-items:center;gap:.85rem;width:100%;text-align:start;background:none;border:0;border-radius:14px;padding:.75rem .7rem;transition:background .42s var(--ol-ease),transform .42s var(--ol-ease)}
.ol-mo-convrow:hover{background:var(--ol-brand-soft)}.ol-mo-convrow:active{transform:scale(.995)}
.ol-mo-conv-main{display:flex;flex-direction:column;min-width:0;flex:1;gap:.1rem}.ol-mo-conv-main b{font-weight:600}.ol-mo-conv-main span{color:var(--ol-muted);font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-mo-conv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;font-size:.76rem;color:var(--ol-muted)}
.ol-mo-av-cust{background:color-mix(in srgb,var(--ol-c6) 16%,transparent);color:var(--ol-c6)}
.ol-mo-convhint{padding:0 1.1rem 1rem;margin:0}
.ol-mo-convpick{max-height:min(52vh,420px);overflow:auto;padding:.5rem 0 0}

/* =============================================================================
   v0.7.0 - data tables 2.0: toolbar, status chips with counts, pager, CSV export, empty states
   ============================================================================= */
.ol-mo-card>.ol-mo-tools{margin:-.2rem 0 1rem;gap:.7rem}
.ol-mo-tools .ol-mo-searchbox{max-width:380px}.ol-mo-tools .ol-mo-count{margin-inline-start:auto;font-variant-numeric:tabular-nums}.ol-mo-export{flex:none}
.ol-mo-fchips{display:flex;gap:.45rem;flex-wrap:wrap;margin:0 0 .9rem}
.ol-mo-chip{display:inline-flex;align-items:center;gap:.45rem;background:var(--ol-surface-2);border:1px solid var(--ol-line);color:var(--ol-text);padding:.32rem .8rem;border-radius:99px;font-size:.84rem;font-weight:550;transition:background .42s var(--ol-ease),border-color .42s,color .42s,transform .42s var(--ol-ease)}
.ol-mo-chip i{font-style:normal;font-size:.74rem;min-width:1.35rem;text-align:center;padding:0 .35rem;border-radius:99px;background:var(--ol-line);color:var(--ol-muted);font-variant-numeric:tabular-nums}
.ol-mo-chip:hover{border-color:var(--ol-brand);color:var(--ol-brand);transform:translateY(-1px)}
.ol-mo-chip.ol-mo-on{background:var(--ol-brand);border-color:var(--ol-brand);color:var(--ol-brand-ink)}.ol-mo-chip.ol-mo-on i{background:rgba(255,255,255,.22);color:inherit}
.ol-mo-tablewrap{border-radius:14px;border-color:var(--ol-line)}
.ol-mo-table{font-size:.92rem}
.ol-mo-table thead th{padding:.85rem 1rem;font-size:.72rem;letter-spacing:.07em;user-select:none;transition:color .42s}
.ol-mo-table th.ol-mo-nosort{cursor:default}.ol-mo-table th.ol-mo-nosort:hover{color:var(--ol-muted)}
.ol-mo-table th[data-ol-sort]:hover{color:var(--ol-brand)}
.ol-mo-table th.ol-mo-asc,.ol-mo-table th.ol-mo-desc{color:var(--ol-brand)}
.ol-mo-table td{padding:.78rem 1rem}.ol-mo-table tbody td:first-child{font-weight:560}
.ol-mo-table tbody tr:hover td{background:var(--ol-brand-soft)}
.ol-mo-table td .ol-mo-btn-sm{white-space:nowrap}.ol-mo-table td:last-child:has(.ol-mo-btn){text-align:end;white-space:nowrap}
.ol-mo-table .ol-mo-empty td,.ol-mo-table .ol-mo-nores td{padding:0}
.ol-mo-emptystate.ol-mo-sm{padding:2rem 1rem}.ol-mo-emptystate.ol-mo-sm .ol-mo-i{width:2rem;height:2rem}
.ol-mo-pager{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between;padding:.85rem .2rem 0;font-size:.86rem;color:var(--ol-muted)}.ol-mo-pager[hidden]{display:none}
.ol-mo-pinfo{font-variant-numeric:tabular-nums}
.ol-mo-psize{display:inline-flex;align-items:center;gap:.5rem}.ol-mo-psize select{background:var(--ol-surface);border:1px solid var(--ol-line-2);border-radius:8px;padding:.25rem .5rem;color:var(--ol-text)}
.ol-mo-pbtns{display:inline-flex;align-items:center;gap:.5rem;color:var(--ol-text)}.ol-mo-pbtns b{font-variant-numeric:tabular-nums;font-weight:600;min-width:3.4rem;text-align:center}.ol-mo-pbtns button[disabled]{opacity:.35;cursor:default}

/* =============================================================================
   v0.7.0 - menus: the user menu is a real panel (identity, sections, current values)
   ============================================================================= */
.ol-mo-menu{width:312px;padding:.5rem;border-radius:18px;box-shadow:var(--ol-shadow-lg),0 0 0 1px color-mix(in srgb,var(--ol-brand) 6%,transparent)}
.ol-mo-menuhead{margin:.1rem .1rem .35rem;padding:.85rem;border-radius:14px;background:linear-gradient(135deg,var(--ol-brand-soft),transparent 80%),var(--ol-surface-2);border:1px solid var(--ol-line);gap:.85rem}
.ol-mo-menuhead .ol-mo-avatar-lg{width:52px;height:52px;box-shadow:0 0 0 3px var(--ol-surface),0 0 0 4px color-mix(in srgb,var(--ol-brand) 35%,transparent)}
.ol-mo-menuwho{display:flex;flex-direction:column;gap:.12rem;min-width:0}.ol-mo-menuwho b{font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ol-mo-menuwho small{font-size:.82rem}.ol-mo-menuwho .ol-mo-badge{align-self:flex-start;margin-top:.3rem}
.ol-mo-menusec{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ol-muted);padding:.75rem .75rem .25rem}
.ol-mo-menuitem{padding:.62rem .75rem;border-radius:11px;gap:.75rem;position:relative}
.ol-mo-menuitem>.ol-mo-i:first-child{color:var(--ol-muted);transition:color .42s}.ol-mo-menuitem:hover>.ol-mo-i:first-child{color:var(--ol-brand)}
.ol-mo-menuval{margin-inline-start:auto;font-size:.78rem;font-weight:500;color:var(--ol-muted);white-space:nowrap;max-width:9.5rem;overflow:hidden;text-overflow:ellipsis}
.ol-mo-menuitem .ol-mo-chev{margin-inline-start:.1rem}.ol-mo-subbtn .ol-mo-menuval+.ol-mo-chev{margin-inline-start:.3rem}
.ol-mo-menuitem.ol-mo-danger{color:var(--ol-bad);margin-top:.1rem}.ol-mo-menuitem.ol-mo-danger>.ol-mo-i:first-child{color:inherit}
.ol-mo-menuitem.ol-mo-danger:hover{background:color-mix(in srgb,var(--ol-bad) 12%,transparent)!important;color:var(--ol-bad)!important}
.ol-mo-b-info{background:var(--ol-brand-soft);color:var(--ol-brand)}
.ol-mo-userbtn{border-radius:99px}

/* =============================================================================
   v0.7.0 - components: switches, form sections, alerts, confirmation, motion system, tooltips
   ============================================================================= */
/* --- switches (enable / disable) --- */
.ol-mo-switch{display:inline-flex;align-items:center;gap:.65rem;background:none;border:0;padding:.15rem 0;cursor:pointer;color:var(--ol-text);font-weight:550;text-align:start}
.ol-mo-switch input{position:absolute;opacity:0;pointer-events:none}
.ol-mo-sw-track{flex:none;position:relative;width:42px;height:24px;border-radius:99px;background:var(--ol-line-2);transition:background .42s var(--ol-ease),box-shadow .42s}
.ol-mo-sw-track i{position:absolute;inset-block-start:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:inset-inline-start .42s var(--ol-ease-out),width .42s}
.ol-mo-switch:hover .ol-mo-sw-track{box-shadow:0 0 0 4px var(--ol-brand-soft)}.ol-mo-switch:active .ol-mo-sw-track i{width:22px}
.ol-mo-switch.ol-mo-on .ol-mo-sw-track,.ol-mo-switch input:checked+.ol-mo-sw-track{background:var(--ol-ok)}
.ol-mo-switch.ol-mo-on .ol-mo-sw-track i,.ol-mo-switch input:checked+.ol-mo-sw-track i{inset-inline-start:21px}.ol-mo-switch.ol-mo-on:active .ol-mo-sw-track i,.ol-mo-switch input:checked:active+.ol-mo-sw-track i{inset-inline-start:17px}
.ol-mo-switch input:focus-visible+.ol-mo-sw-track,.ol-mo-switch:focus-visible .ol-mo-sw-track{outline:2px solid var(--ol-brand);outline-offset:2px}
.ol-mo-sw-text{display:flex;flex-direction:column;font-size:.9rem}.ol-mo-sw-text small{font-weight:400;color:var(--ol-muted);font-size:.8rem}
.ol-mo-switch.ol-mo-busy{opacity:.55;pointer-events:none}
.ol-mo-switch-field{padding:.6rem .8rem;border:1px solid var(--ol-line);border-radius:var(--ol-r-sm);background:var(--ol-surface-2);width:100%}
/* --- form sections --- */
.ol-mo-form>.ol-mo-fsec{grid-column:1/-1}
.ol-mo-fsec{border:0;border-block-start:1px solid var(--ol-line);margin:.2rem 0 0;padding:1.1rem 0 .2rem;min-width:0}
.ol-mo-fsec:first-child{border-block-start:0;padding-block-start:0}
.ol-mo-fsec legend{display:flex;align-items:center;gap:.6rem;padding:0;float:inline-start;width:100%;margin-bottom:.9rem}
.ol-mo-fsec legend .ol-mo-i{width:2rem;height:2rem;padding:.45rem;border-radius:10px;background:var(--ol-brand-soft);color:var(--ol-brand);flex:none}
.ol-mo-fsec legend b{font-size:.98rem}.ol-mo-fsec legend small{color:var(--ol-muted);font-size:.82rem;margin-inline-start:.2rem}
.ol-mo-fsec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem 1.1rem;clear:both;align-items:start}
.ol-mo-fsec-grid>.ol-mo-alert,.ol-mo-fsec-grid>.ol-mo-fld-wide,.ol-mo-fsec-grid>.ol-mo-hint{grid-column:1/-1}
.ol-mo-form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:.6rem;padding-top:1.1rem;margin-top:.5rem;border-block-start:1px solid var(--ol-line)}
.ol-mo-mbody .ol-mo-form-actions{position:sticky;inset-block-end:-1px;background:var(--ol-surface);padding-bottom:.2rem;z-index:2}
/* --- alerts --- */
.ol-mo-alert{display:flex;gap:.75rem;align-items:flex-start;padding:.8rem 1rem;border-radius:var(--ol-r-sm);border:1px solid;font-size:.9rem}
.ol-mo-alert>.ol-mo-i{flex:none;margin-top:.1rem;width:1.3em;height:1.3em}.ol-mo-alert p{margin:0}.ol-mo-alert b{display:block;margin-bottom:.1rem}
.ol-mo-a-info{background:color-mix(in srgb,var(--ol-info) 9%,transparent);border-color:color-mix(in srgb,var(--ol-info) 28%,transparent)}.ol-mo-a-info>.ol-mo-i{color:var(--ol-info)}
.ol-mo-a-ok{background:color-mix(in srgb,var(--ol-ok) 9%,transparent);border-color:color-mix(in srgb,var(--ol-ok) 28%,transparent)}.ol-mo-a-ok>.ol-mo-i{color:var(--ol-ok)}
.ol-mo-a-warn{background:color-mix(in srgb,var(--ol-warn) 11%,transparent);border-color:color-mix(in srgb,var(--ol-warn) 32%,transparent)}.ol-mo-a-warn>.ol-mo-i{color:var(--ol-warn)}
.ol-mo-a-bad{background:color-mix(in srgb,var(--ol-bad) 9%,transparent);border-color:color-mix(in srgb,var(--ol-bad) 30%,transparent)}.ol-mo-a-bad>.ol-mo-i{color:var(--ol-bad)}
.ol-mo-confirm-ico{background:color-mix(in srgb,var(--ol-bad) 13%,transparent);color:var(--ol-bad)}.ol-mo-confirm.ol-mo-ask .ol-mo-confirm-ico{background:var(--ol-brand-soft);color:var(--ol-brand)}
.ol-mo-confirm p{margin:.2rem 0 0;font-size:1rem;line-height:1.5}
.ol-mo-mfoot{display:flex;justify-content:flex-end;gap:.6rem}
/* --- motion system: one set of curves/durations; everything respects prefers-reduced-motion --- */
@keyframes ol-rise2{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ol-zoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.ol-mo-main>.ol-mo-pagehead{animation:ol-fade .45s var(--ol-ease) both}
.ol-mo-main .ol-mo-stats>*,.ol-mo-main .ol-mo-grid2>*,.ol-mo-main .ol-mo-kpis>*{animation:ol-rise2 .68s var(--ol-ease-out) both}
.ol-mo-main .ol-mo-stats>*:nth-child(2),.ol-mo-main .ol-mo-grid2>*:nth-child(2),.ol-mo-main .ol-mo-kpis>*:nth-child(2){animation-delay:.08s}
.ol-mo-main .ol-mo-stats>*:nth-child(3),.ol-mo-main .ol-mo-kpis>*:nth-child(3){animation-delay:.15s}.ol-mo-main .ol-mo-stats>*:nth-child(4),.ol-mo-main .ol-mo-kpis>*:nth-child(4){animation-delay:.22s}
.ol-mo-main .ol-mo-stats>*:nth-child(5),.ol-mo-main .ol-mo-kpis>*:nth-child(5){animation-delay:.3s}
.ol-mo-table tbody tr{animation:ol-fade .52s var(--ol-ease) both}
.ol-mo-btn{transition:transform .42s var(--ol-ease),box-shadow .42s,background .42s,border-color .42s,color .42s,filter .42s}.ol-mo-btn:hover{transform:translateY(-1px)}.ol-mo-btn:active{transform:translateY(0) scale(.98)}
.ol-mo-card{transition:box-shadow .38s var(--ol-ease),transform .38s var(--ol-ease),border-color .38s}
.ol-mo-stat:hover,.ol-mo-kpi:hover{transform:translateY(-2px);box-shadow:var(--ol-shadow-lg)}
.ol-mo-iconbtn{transition:background .42s,color .42s,transform .42s var(--ol-ease)}.ol-mo-iconbtn:active{transform:scale(.92)}
.ol-mo-menu,.ol-mo-pop{transform-origin:top right}:root[dir=rtl] .ol-mo-menu,:root[dir=rtl] .ol-mo-pop{transform-origin:top left}
.ol-mo-subbody{animation:ol-drop .48s var(--ol-ease)}
.ol-mo-nsub{animation:ol-drop .48s var(--ol-ease)}
.ol-mo-modal{animation:ol-pop .39s var(--ol-ease-out)}
.ol-mo-toast{animation:ol-slide .45s var(--ol-ease-out)}
.ol-mo-fly{animation:ol-zoom .48s var(--ol-ease)}
/* --- tooltips: always above every layer, clamped to the viewport by the script, with a pointer --- */
.ol-mo-tip{z-index:2000;background:var(--ol-text);color:var(--ol-bg);font-weight:500;border-radius:9px;padding:.4rem .7rem;box-shadow:0 10px 28px rgba(0,0,0,.28)}
:root[data-theme=dark] .ol-mo-tip{background:#e8ecf4;color:#0a0e1a}
.ol-mo-tip.ol-mo-show{opacity:1;transform:none}
@media (hover:none){.ol-mo-tip{display:none}}

/* =============================================================================
   v0.7.0 - categories drill-down: breadcrumb, node header, cards, global find
   ============================================================================= */
.ol-mo-crumbs{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap;margin:0 0 1rem}
.ol-mo-crumb{display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;padding:.35rem .65rem;border-radius:99px;color:var(--ol-muted);font-weight:550;font-size:.9rem;transition:background .42s,color .42s}
.ol-mo-crumb:hover{background:var(--ol-brand-soft);color:var(--ol-brand)}.ol-mo-crumb.ol-mo-on{color:var(--ol-text);background:var(--ol-surface);box-shadow:inset 0 0 0 1px var(--ol-line)}
.ol-mo-crumb-sep{width:1em;height:1em;color:var(--ol-line-2)}:root[dir=rtl] .ol-mo-crumb-sep{transform:scaleX(-1)}
.ol-mo-nodehead{display:grid;grid-template-columns:1fr auto;gap:.7rem 1.5rem;align-items:center}
.ol-mo-nodemain{display:flex;gap:1rem;align-items:center}.ol-mo-nodemain h2{margin:0;font-size:1.25rem}.ol-mo-nodemain p{margin:.1rem 0 0}
.ol-mo-nodeico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--ol-brand-soft),transparent),var(--ol-surface-2);border:1px solid var(--ol-line);color:var(--ol-brand)}
.ol-mo-nodeico .ol-mo-i{width:1.55rem;height:1.55rem}.ol-mo-nodeico.ol-mo-sm{width:42px;height:42px;border-radius:13px}.ol-mo-nodeico.ol-mo-sm .ol-mo-i{width:1.2rem;height:1.2rem}
.ol-mo-nodebadges{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.ol-mo-nodehead>.ol-mo-actions{grid-column:1/-1;display:flex;gap:.5rem;flex-wrap:wrap;padding-top:.8rem;border-block-start:1px solid var(--ol-line)}
.ol-mo-catbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.ol-mo-catbar h3{margin:0;font-size:1.05rem;flex:none}
.ol-mo-findwrap{position:relative;flex:1;min-width:240px;max-width:460px}.ol-mo-findwrap .ol-mo-searchbox{max-width:none}
.ol-mo-findbox{position:absolute;inset-inline:0;inset-block-start:calc(100% + 6px);z-index:30;background:var(--ol-surface);border:1px solid var(--ol-line);border-radius:14px;box-shadow:var(--ol-shadow-lg);padding:.35rem;max-height:340px;overflow:auto;animation:ol-drop .48s var(--ol-ease)}
.ol-mo-findrow{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:start;background:none;border:0;padding:.55rem .7rem;border-radius:10px;gap:.05rem}.ol-mo-findrow:hover{background:var(--ol-brand-soft)}.ol-mo-findrow small{color:var(--ol-muted);font-size:.78rem}
.ol-mo-findnone{padding:.7rem;margin:0}
.ol-mo-here{max-width:260px;flex:none;margin-inline-start:auto}
.ol-mo-catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:.9rem}
.ol-mo-catcard{display:flex;flex-direction:column;gap:.7rem;background:var(--ol-surface);border:1px solid var(--ol-line);border-radius:16px;padding:.9rem;transition:border-color .42s,box-shadow .38s var(--ol-ease),transform .38s var(--ol-ease);animation:ol-rise2 .6s var(--ol-ease-out) both}
.ol-mo-catcard:hover{border-color:color-mix(in srgb,var(--ol-brand) 45%,var(--ol-line));box-shadow:var(--ol-shadow);transform:translateY(-2px)}
.ol-mo-catopen{display:flex;align-items:center;gap:.8rem;background:none;border:0;padding:0;text-align:start;width:100%}
.ol-mo-catname{display:flex;flex-direction:column;min-width:0;flex:1}.ol-mo-catname b{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ol-mo-catname small{color:var(--ol-muted)}
.ol-mo-catgo{color:var(--ol-muted);transition:transform .42s var(--ol-ease),color .42s}.ol-mo-catcard:hover .ol-mo-catgo{color:var(--ol-brand);transform:translateX(3px)}:root[dir=rtl] .ol-mo-catgo{transform:scaleX(-1)}:root[dir=rtl] .ol-mo-catcard:hover .ol-mo-catgo{transform:scaleX(-1) translateX(3px)}
.ol-mo-catmeta{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}.ol-mo-catcount{color:var(--ol-muted);font-size:.82rem;margin-inline-start:auto}
.ol-mo-catact{display:flex;gap:.4rem;padding-top:.7rem;border-block-start:1px dashed var(--ol-line)}
@media (max-width:640px){.ol-mo-nodehead{grid-template-columns:1fr}.ol-mo-catgrid{grid-template-columns:1fr}}

/* =============================================================================
   v0.7.0 - charts: zoom in / out / reset, pan by dragging, enlarge in a window
   ============================================================================= */
.ol-mo-chtools{position:absolute;inset-block-start:-2px;inset-inline-end:0;display:flex;align-items:center;gap:.15rem;padding:.2rem;background:color-mix(in srgb,var(--ol-surface) 88%,transparent);backdrop-filter:blur(6px);border:1px solid var(--ol-line);border-radius:11px;opacity:0;transform:translateY(-3px);transition:opacity .42s,transform .42s var(--ol-ease);z-index:5}
.ol-mo-ch:hover .ol-mo-chtools,.ol-mo-chtools:focus-within{opacity:1;transform:none}
@media (hover:none){.ol-mo-chtools{opacity:1;transform:none}}
.ol-mo-chtb{display:grid;place-items:center;width:28px;height:28px;border:0;background:none;color:var(--ol-muted);border-radius:8px;transition:background .42s,color .42s}
.ol-mo-chtb:hover:not([disabled]){background:var(--ol-brand-soft);color:var(--ol-brand)}.ol-mo-chtb[disabled]{opacity:.35;cursor:default}.ol-mo-chtb .ol-mo-i{width:1.05rem;height:1.05rem}
.ol-mo-zinfo{font-size:.74rem;color:var(--ol-muted);padding:0 .45rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.ol-mo-hot.ol-mo-pan{cursor:grab}.ol-mo-hot.ol-mo-pan:active{cursor:grabbing}
.ol-mo-ch-big{min-height:440px}.ol-mo-mbody .ol-mo-ch-big{padding-top:.4rem}

/* v0.7.0 - quick go-to (Ctrl+K) */
.ol-mo-quickbtn{display:inline-flex;align-items:center;gap:.55rem;background:var(--ol-surface-2);border:1px solid var(--ol-line);color:var(--ol-muted);border-radius:99px;padding:.42rem .55rem .42rem .8rem;font-size:.86rem;min-width:220px;transition:border-color .42s,color .42s,box-shadow .42s}
.ol-mo-quickbtn:hover{border-color:var(--ol-brand);color:var(--ol-text);box-shadow:0 0 0 3px var(--ol-brand-soft)}.ol-mo-quickbtn span{flex:1;text-align:start}
.ol-mo-quickbtn kbd{font:inherit;font-size:.7rem;padding:.1rem .45rem;border-radius:6px;border:1px solid var(--ol-line-2);background:var(--ol-surface)}
.ol-mo-top-tools{gap:.5rem}
@media (max-width:1100px){.ol-mo-quickbtn{min-width:0;padding:.5rem}.ol-mo-quickbtn span,.ol-mo-quickbtn kbd{display:none}}
.ol-mo-quick .ol-mo-searchbox{max-width:none}.ol-mo-quicklist{display:flex;flex-direction:column;margin-top:.7rem;max-height:340px;overflow:auto}
.ol-mo-quickrow{display:flex;align-items:center;gap:.75rem;background:none;border:0;padding:.65rem .75rem;border-radius:11px;text-align:start;transition:background .42s}
.ol-mo-quickrow small{margin-inline-start:auto;color:var(--ol-muted)}.ol-mo-quickrow .ol-mo-i{color:var(--ol-muted)}
.ol-mo-quickrow:hover,.ol-mo-quickrow.ol-mo-on{background:var(--ol-brand-soft)}.ol-mo-quickrow.ol-mo-on .ol-mo-i{color:var(--ol-brand)}
.ol-mo-form>.ol-mo-alert{grid-column:1/-1}
.ol-mo-fsec-grid:has(>:nth-child(5):last-child){grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}

/* ===== 0.8.0 workspaces (ERP / Website) ===== */
.ol-mo-app .ol-mo-navgroup[data-ol-ws]:not([data-ol-ws="all"]){display:none}
.ol-mo-app[data-ol-ws="erp"] .ol-mo-navgroup[data-ol-ws="erp"],.ol-mo-app[data-ol-ws="site"] .ol-mo-navgroup[data-ol-ws="site"],.ol-mo-app[data-ol-ws="group"] .ol-mo-navgroup[data-ol-ws="group"],
.ol-mo-app[data-ol-ws="gen"] .ol-mo-navgroup[data-ol-ws="gen"],.ol-mo-app[data-ol-ws="mkt"] .ol-mo-navgroup[data-ol-ws="mkt"],.ol-mo-app[data-ol-ws="mweb"] .ol-mo-navgroup[data-ol-ws="mweb"]{display:block}
.ol-mo-app[data-ol-ws="erp"] [data-ol-ws-only="site"],.ol-mo-app[data-ol-ws="site"] [data-ol-ws-only="erp"]{display:none}
.ol-mo-wsw{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin:6px 12px 10px;padding:4px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
.ol-mo-wsbtn{min-width:0;overflow:hidden;white-space:nowrap;display:flex;align-items:center;justify-content:flex-start;gap:9px;border:0;border-radius:9px;padding:8px 12px;background:transparent;color:var(--ol-side-text,#c9cdf0);font:600 .78rem/1 inherit;cursor:pointer;transition:background .42s var(--ol-ease-out),color .42s,transform .42s}
.ol-mo-wsbtn .ol-mo-i{width:16px;height:16px;flex:none}
.ol-mo-wsbtn:hover{background:rgba(255,255,255,.1);color:#fff}
.ol-mo-wsbtn.ol-mo-on{background:#fff;color:var(--ol-brand);box-shadow:0 2px 8px rgba(0,0,0,.18)}
:root[data-ol-collapsed="1"] .ol-mo-wsw{grid-template-columns:1fr;margin:6px 8px}
:root[data-ol-collapsed="1"] .ol-mo-wsbtn span{display:none}

/* ===== 0.8.0 content management: page cards, section cards, menus ===== */
.ol-mo-cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.ol-mo-cgrid-2{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
.ol-mo-pcard{display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--ol-line);border-radius:16px;background:var(--ol-surface);box-shadow:var(--ol-shadow);transition:transform .42s var(--ol-ease-out),box-shadow .42s,border-color .42s}
.ol-mo-pcard:hover{transform:translateY(-3px);border-color:var(--ol-p200);box-shadow:var(--ol-shadow-lg)}
.ol-mo-pcard.ol-mo-off{opacity:.72}
.ol-mo-pcard header{display:flex;align-items:center;gap:12px}
.ol-mo-pcard header>div{flex:1;min-width:0}
.ol-mo-pcard h3{margin:0;font-size:1.02rem}
.ol-mo-pcard code{color:var(--ol-muted);font-size:.8rem}
.ol-mo-pcard>p{margin:0;color:var(--ol-muted);font-size:.88rem;line-height:1.5;min-height:2.6em}
.ol-mo-pico,.ol-mo-secico{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px;background:var(--ol-brand-soft);color:var(--ol-brand)}
.ol-mo-pico .ol-mo-i,.ol-mo-secico .ol-mo-i{width:20px;height:20px}
.ol-mo-pstats{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--ol-muted);font-size:.8rem}
.ol-mo-pstats span{display:inline-flex;align-items:center;gap:5px}.ol-mo-pstats .ol-mo-i{width:14px;height:14px}
.ol-mo-pcard footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--ol-line)}
.ol-mo-pmeta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--ol-line)}
.ol-mo-pmeta h3{margin:2px 0 4px;font-size:1.2rem}.ol-mo-pmeta p{margin:0;color:var(--ol-muted);font-size:.9rem}
.ol-mo-pmeta-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ol-mo-secbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 10px}
.ol-mo-secbar h4{margin:0;font-size:1rem}.ol-mo-secbar small{color:var(--ol-muted);font-weight:500;margin-inline-start:6px}
.ol-mo-seclist{display:flex;flex-direction:column;gap:8px}
.ol-mo-seccard,.ol-mo-itemcard,.ol-mo-linkrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--ol-line);border-radius:12px;background:var(--ol-surface);transition:border-color .42s,box-shadow .42s,background .42s}
.ol-mo-seccard:hover,.ol-mo-itemcard:hover,.ol-mo-linkrow:hover{border-color:var(--ol-p200);box-shadow:var(--ol-shadow)}
.ol-mo-seccard.ol-mo-off,.ol-mo-linkrow.ol-mo-off{opacity:.6;background:var(--ol-surface-2)}
.ol-mo-secno{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:var(--ol-surface-2);border:1px solid var(--ol-line);font-size:.75rem;color:var(--ol-muted);font-weight:600}
.ol-mo-secmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ol-mo-secmain b{font-size:.92rem}.ol-mo-secmain span{color:var(--ol-muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ol-mo-secmain em{font-style:normal;color:var(--ol-brand);font-size:.76rem}
.ol-mo-secact{display:flex;align-items:center;gap:4px;flex:none}
.ol-mo-typegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ol-mo-typecard{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;text-align:start;border:1px solid var(--ol-line);border-radius:14px;background:var(--ol-surface);cursor:pointer;font:inherit;color:inherit;transition:transform .42s var(--ol-ease-out),border-color .42s,box-shadow .42s}
.ol-mo-typecard:hover{transform:translateY(-2px);border-color:var(--ol-brand);box-shadow:var(--ol-shadow)}
.ol-mo-typecard small{color:var(--ol-muted);line-height:1.4}
.ol-mo-menucard header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.ol-mo-menucard header h3{display:flex;align-items:center;gap:8px;margin:0;font-size:1rem}.ol-mo-menucard header>div{display:flex;gap:6px;align-items:center}
.ol-mo-linklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ol-mo-shortgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:18px 0}
.ol-mo-shortcut{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;text-align:start;border:1px solid var(--ol-line);border-radius:16px;background:var(--ol-surface);color:inherit;font:inherit;cursor:pointer;transition:transform .42s var(--ol-ease-out),box-shadow .42s,border-color .42s}
.ol-mo-shortcut:hover{transform:translateY(-3px);border-color:var(--ol-brand);box-shadow:var(--ol-shadow-lg)}
.ol-mo-shortcut small{color:var(--ol-muted)}
.ol-mo-recent{list-style:none;margin:0;padding:0}.ol-mo-recent li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--ol-line)}.ol-mo-recent li:last-child{border:0}.ol-mo-recent b{flex:1}.ol-mo-recent span{color:var(--ol-muted);font-size:.84rem}
.ol-mo-danger.ol-mo-btn{color:var(--ol-bad);border-color:currentColor}
@media (max-width:560px){.ol-mo-cgrid-2{grid-template-columns:1fr}.ol-mo-seccard{flex-wrap:wrap}.ol-mo-secact{width:100%;justify-content:flex-end}}
.ol-mo-modal .ol-mo-fsec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ol-mo-modal .ol-mo-fsec-grid .ol-mo-fld:has(textarea),.ol-mo-modal .ol-mo-fsec-grid .ol-mo-sw-row{grid-column:auto}
.ol-mo-modal .ol-mo-form+.ol-mo-secbar{margin-top:30px;padding-top:18px;border-top:1px solid var(--ol-line)}
@media (max-width:640px){.ol-mo-modal .ol-mo-fsec-grid{grid-template-columns:1fr}}
.ol-mo-cannedlist{display:flex;flex-direction:column;gap:8px}
.ol-mo-cannedrow{display:flex;flex-direction:column;gap:3px;text-align:start;padding:11px 13px;border:1px solid var(--ol-line);border-radius:12px;background:var(--ol-surface);font:inherit;color:inherit;cursor:pointer;transition:border-color .42s,background .42s,transform .42s}
.ol-mo-cannedrow:hover{border-color:var(--ol-brand);background:var(--ol-brand-soft);transform:translateX(2px)}
[dir=rtl] .ol-mo-cannedrow:hover{transform:translateX(-2px)}
.ol-mo-cannedrow span{color:var(--ol-muted);font-size:.84rem}
.ol-mo-attn li{flex-wrap:wrap}.ol-mo-attn b{min-width:160px}
.ol-mo-stars{color:#e0a000;letter-spacing:2px}
.ol-mo-pill-s{font-size:.7rem;padding:1px 7px;margin-inline-start:6px}
.ol-mo-tabs-scroll{overflow-x:auto;white-space:nowrap}
.ol-mo-stat.ol-mo-bad b{color:var(--ol-bad)}.ol-mo-stat.ol-mo-warn b{color:var(--ol-warn)}

/* business (0.8.0): compact definition grid used on tier cards */
.ol-mo-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 14px 0; }
.ol-mo-mini > div { display: flex; flex-direction: column; gap: 2px; }
.ol-mo-mini dt { font-size: 12px; color: var(--ol-muted); margin: 0; }
.ol-mo-mini dd { margin: 0; font-weight: 600; font-size: 15px; }
.ol-mo-dept-l1 { padding-inline-start: 18px; } .ol-mo-dept-l2 { padding-inline-start: 36px; } .ol-mo-dept-l3 { padding-inline-start: 54px; }
.ol-mo-nw { white-space: nowrap; font-weight: 600; }
.ol-mo-acts { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; }

/* =============================================================================
   0.8.1 COMPACT DENSITY: smaller type, fields, buttons, cards, tables and modals.
   The sidebar keeps its look; only its sizes shrink a little. Everything else follows rem, so html font-size does most of the work.
   ============================================================================= */
html{font-size:calc(14px * var(--ol-fs,1))}
body{font-size:.964rem;line-height:1.5}
:root{--ol-r:12px;--ol-r-sm:8px;--ol-r-xs:6px;--ol-top-h:52px;--ol-side-w:248px}
h1{font-size:1.2rem}h2{font-size:.98rem;margin-bottom:.7rem}h3{font-size:.9rem}
.ol-mo-top{padding:0 1rem}.ol-mo-top-title{font-size:.95rem}
.ol-mo-main{padding:1rem 1.1rem .8rem}
.ol-mo-pagehead{margin-block-end:.8rem}
/* buttons */
.ol-mo-btn{padding:.36rem .8rem;font-size:.88rem;gap:.4rem;border-radius:8px}
.ol-mo-btn.ol-mo-btn-sm,.ol-mo-btn-sm{padding:.22rem .6rem;font-size:.8rem}
.ol-mo-iconbtn{width:32px;height:32px;border-radius:8px}.ol-mo-iconbtn.ol-mo-sm{width:28px;height:28px}
.ol-mo-btn .ol-mo-i,.ol-mo-iconbtn .ol-mo-i{width:1em;height:1em}
/* fields */
.ol-mo-in,.ol-mo-search{padding:.55rem .75rem;font-size:.9rem;border-radius:8px}
.ol-mo-fld .ol-mo-in:not(:placeholder-shown){padding-block:.92rem .2rem}
.ol-mo-fld .ol-mo-flt,.ol-mo-fld>.ol-mo-flt{font-size:.64rem;inset-block-start:.3rem;inset-inline-start:.75rem}
textarea.ol-mo-in{min-height:72px}
.ol-mo-selbtn{padding:.3rem .75rem;border-radius:8px;min-height:2.35rem}.ol-mo-selbtn .ol-mo-ph{font-size:.64rem}
.ol-mo-selbtn .ol-mo-val{font-size:.9rem}
.ol-mo-numbtns button{width:24px}.ol-mo-numwrap .ol-mo-in{padding-inline-end:3.6rem}
.ol-mo-list{border-radius:8px;padding:.25rem}.ol-mo-opt{padding:.38rem .6rem;font-size:.88rem}
.ol-mo-searchbox .ol-mo-search{padding-block:.45rem}
/* cards, info cards, stats */
.ol-mo-card{padding:.9rem 1.05rem;margin-block-end:.8rem;border-radius:12px}
.ol-mo-info{padding:.8rem .95rem;border-radius:12px}
.ol-mo-info>header{margin-block-end:.4rem}.ol-mo-info h3{font-size:.88rem}
.ol-mo-inforow{padding:.3rem 0;font-size:.86rem}
.ol-mo-infogrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:.8rem}
.ol-mo-stat{padding:.7rem .85rem;gap:.7rem;border-radius:12px}.ol-mo-stat b,.ol-mo-stat .ol-mo-num{font-size:1.3rem}
.ol-mo-pcard,.ol-mo-seccard,.ol-mo-menucard{padding:.8rem .95rem}
/* tables */
.ol-mo-table{font-size:.85rem}
.ol-mo-table thead th{padding:.55rem .8rem;font-size:.66rem}
.ol-mo-table td{padding:.5rem .8rem}
.ol-mo-tablewrap{border-radius:10px}
.ol-mo-table .ol-mo-btn-sm{padding:.18rem .5rem}
/* modals */
.ol-mo-modal{width:min(640px,100%);border-radius:14px}
.ol-mo-modal.ol-mo-sm{width:min(400px,100%)}.ol-mo-modal.ol-mo-md{width:min(640px,100%)}.ol-mo-modal.ol-mo-lg{width:min(800px,100%)}
.ol-mo-mhead{padding:.65rem .9rem}.ol-mo-mhead h2{font-size:.95rem;margin:0}
.ol-mo-mbody{padding:.9rem 1.05rem}
.ol-mo-mfoot{padding:.6rem .9rem}
.ol-mo-form{gap:.6rem .8rem}
.ol-mo-fsec{padding-block-start:.8rem}
.ol-mo-fsec-t,.ol-mo-fsec>legend{font-size:.85rem}
.ol-mo-tabs .ol-mo-tab{padding:.4rem .8rem;font-size:.86rem}
/* sidebar: same look, slightly smaller */
.ol-mo-navitem{padding:.5rem .7rem;gap:.65rem;font-size:.9rem;border-radius:10px}
.ol-mo-brand{padding-block:.8rem}
/* copyright editor */
.ol-mo-abedit{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center;margin-block-end:.55rem}
.ol-mo-abedit.ol-mo-abro{padding:.4rem .6rem;border:1px solid var(--ol-line);border-radius:8px;background:var(--ol-surface-2)}
.ol-mo-abedit.ol-mo-abro{grid-template-columns:9rem 1fr auto}
.ol-mo-abedit .ol-mo-abk{display:flex;align-items:center;gap:.4rem;font-size:.82rem}.ol-mo-abedit .ol-mo-abv{font-size:.82rem;color:var(--ol-muted);overflow-wrap:anywhere}
.ol-mo-abhead{display:flex;justify-content:space-between;font-size:.76rem;color:var(--ol-muted);margin-block-end:.5rem}
.ol-mo-abshow{margin:0}
.ol-mo-note{font-size:.82rem;margin:0 0 .5rem}
.ol-mo-modal .ol-mo-mbody .ol-mo-form-actions{margin-inline:-1.05rem;margin-block:.4rem -.9rem;padding:.6rem 1.05rem;border-block-start:1px solid var(--ol-line);background:var(--ol-surface-2);position:sticky;inset-block-end:-.9rem}
.ol-mo-alert{margin-block-end:.8rem}.ol-mo-stats{margin-block-end:.8rem}

/* ===== 0.8.2 : icon logo, wide modals + permission grid, back to top, site header buttons, branch page spacing ===== */
.ol-mo-logo,.ol-mo-s-mark{background:none!important;box-shadow:none!important;color:var(--ol-brand);width:auto;height:auto;border-radius:0}
.ol-mo-logo .ol-mo-i,.ol-mo-s-mark .ol-mo-i{width:1.7rem;height:1.7rem}
.ol-mo-logo{width:auto;height:auto}.ol-mo-logo:not(.ol-mo-logo-sm) .ol-mo-i{width:3rem;height:3rem}
.ol-mo-side .ol-mo-logo,.ol-mo-login-art .ol-mo-logo{color:#fff}
.ol-mo-modal.ol-mo-xl{width:min(1180px,100%)}
.ol-mo-modal.ol-mo-lg{width:min(860px,100%)}
.ol-mo-permgrid{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:.75rem;align-items:start}
.ol-mo-permcard{border:1px solid var(--ol-line);border-radius:12px;background:var(--ol-surface);overflow:hidden;min-width:0}
.ol-mo-permhead{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem;background:var(--ol-surface-2);border-block-end:1px solid var(--ol-line)}
.ol-mo-permhead h3{margin:0;font-size:.82rem;text-transform:capitalize;color:var(--ol-brand);font-weight:700}
.ol-mo-permall{border:0;background:none;color:var(--ol-muted);font:inherit;font-size:.74rem;cursor:pointer;padding:.1rem .35rem;border-radius:6px}.ol-mo-permall:hover{background:var(--ol-brand-soft);color:var(--ol-brand)}
.ol-mo-permlist{display:flex;flex-direction:column;padding:.3rem .45rem .45rem}
.ol-mo-permlist .ol-mo-check{font-size:.84rem;padding:.28rem .3rem;align-items:flex-start;line-height:1.35}
.ol-mo-permlist .ol-mo-check input{margin-block-start:.15rem;flex:none}
.ol-mo-totop{position:fixed;inset-block-end:5rem;inset-inline-end:1.3rem;z-index:60;width:40px;height:40px;border-radius:50%;border:1px solid var(--ol-line);background:var(--ol-surface);color:var(--ol-brand);box-shadow:var(--ol-shadow-lg);display:grid;place-items:center;cursor:pointer;transition:.42s}
.ol-mo-totop[hidden]{display:none}.ol-mo-totop:hover{background:var(--ol-brand);color:#fff;transform:translateY(-2px)}
.ol-mo-totop .ol-mo-i{width:1.2rem;height:1.2rem}
.ol-mo-codebox{text-align:center}.ol-mo-bigcode{font:700 2rem var(--ol-mono,monospace);letter-spacing:.25em;padding:.8rem;border:1px dashed var(--ol-line);border-radius:12px;background:var(--ol-surface-2);margin-block-start:.6rem;user-select:all}
.ol-mo-s-tools{gap:.4rem}.ol-mo-s-signin,.ol-mo-s-signup{white-space:nowrap}.ol-mo-s-forgot{margin:0;text-align:end;font-size:.85rem}
@media (max-width:520px){.ol-mo-s-signin{display:none}}
.ol-mo-infogrid{margin-block-end:1rem}.ol-mo-infogrid+.ol-mo-card,.ol-mo-stats+.ol-mo-infogrid{margin-block-start:.2rem}
.ol-mo-alert+.ol-mo-stats{margin-block-start:.2rem}
.ol-mo-permgrid{display:block;columns:4 250px;column-gap:.75rem}.ol-mo-permcard{break-inside:avoid;margin-block-end:.75rem}
.ol-mo-ownlock{color:var(--ol-warn,#b45309);display:inline-flex;vertical-align:middle;margin-inline-start:.25rem}.ol-mo-ownlock .ol-mo-i{width:.9rem;height:.9rem}
/* ===== quick-view modals (summary data): clean key/value table, header block, action row ===== */
.ol-mo-dl{display:grid;grid-template-columns:minmax(7rem,34%) 1fr;gap:0;margin:0;border:1px solid var(--ol-line);border-radius:12px;overflow:hidden;background:var(--ol-surface)}
.ol-mo-dl dt,.ol-mo-dl dd{padding:.55rem .85rem;margin:0;border-block-end:1px solid var(--ol-line);display:flex;align-items:center;min-height:2.3rem;font-size:.88rem}
.ol-mo-dl dt{background:var(--ol-surface-2);color:var(--ol-muted);font-size:.8rem;font-weight:500}
.ol-mo-dl dd{font-weight:500;overflow-wrap:anywhere}
.ol-mo-dl dt:nth-last-of-type(1),.ol-mo-dl dd:last-of-type{border-block-end:0}
.ol-mo-profilehead{display:flex;align-items:center;gap:.8rem;padding:.2rem .1rem .9rem;margin-block-end:.9rem;border-block-end:1px solid var(--ol-line)}
.ol-mo-profilehead b{font-size:1.02rem}.ol-mo-profilehead .ol-mo-avatar-lg{width:48px;height:48px;flex:none}
.ol-mo-mbody>.ol-mo-actions,.ol-mo-mbody .ol-mo-profilehead~.ol-mo-actions{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap;margin-block-start:1rem;padding-block-start:.85rem;border-block-start:1px solid var(--ol-line)}
.ol-mo-mini{border:1px solid var(--ol-line);border-radius:12px;padding:.7rem .9rem;background:var(--ol-surface-2);margin:.6rem 0}
.ol-mo-mini dt{text-transform:uppercase;letter-spacing:.04em;font-size:.68rem}.ol-mo-mini dd{font-size:.95rem}
@media (max-width:520px){.ol-mo-dl{grid-template-columns:1fr}.ol-mo-dl dt{border-block-end:0;padding-block-end:.1rem;min-height:0}}
/* ===== journal / purchase order line grids ===== */
.ol-mo-jgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem .9rem;margin-block-end:.9rem}
.ol-mo-jlines{border:1px solid var(--ol-line);border-radius:12px;padding:.6rem;background:var(--ol-surface-2);display:grid;gap:.55rem}
.ol-mo-jhead,.ol-mo-jline{display:grid;grid-template-columns:minmax(220px,2.4fr) minmax(110px,1fr) minmax(110px,1fr) minmax(160px,2fr);gap:.6rem;align-items:start}
.ol-mo-pol .ol-mo-jhead,.ol-mo-pol .ol-mo-jline{grid-template-columns:minmax(260px,3fr) minmax(100px,1fr) minmax(120px,1fr)}
.ol-mo-jhead{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ol-muted);padding-inline:.3rem}
.ol-mo-jline .ol-mo-fld,.ol-mo-jline .ol-mo-selwrap{margin:0}
.ol-mo-scopeline{margin:.2rem 0 .7rem;font-size:.85rem}
@media (max-width:820px){.ol-mo-jhead{display:none}.ol-mo-jline,.ol-mo-pol .ol-mo-jline{grid-template-columns:1fr 1fr;padding-block-end:.5rem;border-block-end:1px dashed var(--ol-line)}.ol-mo-jline>:first-child{grid-column:1/-1}}
.ol-mo-form>.ol-mo-jgrid,.ol-mo-form>.ol-mo-jlines,.ol-mo-form>.ol-mo-fsw,.ol-mo-form>.ol-mo-switch{grid-column:1/-1}

/* 0.10.0: group workspace + project tabs */
.ol-mo-cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
@media (max-width:900px){.ol-mo-cols2{grid-template-columns:1fr}}
.ol-mo-btnrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ol-mo-btn-ok{background:var(--ol-ok-bg,#dcfce7);color:var(--ol-ok,#166534);border-color:transparent}
.ol-mo-tabs-pj{margin-bottom:6px}

.ol-mo-wsbtn span{overflow:hidden;text-overflow:ellipsis}
.ol-mo-btnrow-top{margin:0 0 14px}
/* the interface text cannot be selected or copied (inputs stay editable); nothing is blurred or filtered, rendering is untouched */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"],.ol-mo-selectable{-webkit-user-select:text;user-select:text}

/* ===== chrome v2: header workspace tabs, sub-nav (path + back/forward), theme-following sidebar ===== */
.ol-mo-shell{grid-template-rows:var(--ol-top-h) auto 1fr auto;grid-template-areas:"side top" "side sub" "side main" "side foot"}
.ol-mo-subnav{grid-area:sub;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.35rem 1.4rem;background:var(--ol-surface);border-block-end:1px solid var(--ol-line);min-height:2.5rem}
.ol-mo-subnav .ol-mo-crumbs{margin:0;flex-wrap:nowrap;overflow:hidden;gap:.35rem;min-width:0;color:var(--ol-muted);font-size:.88rem}
.ol-mo-crumbp{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .42s var(--ol-ease)}.ol-mo-crumbp.ol-mo-on{color:var(--ol-text);font-weight:650}
.ol-mo-subnav .ol-mo-crumb-sep{flex:none;width:.9em;height:.9em}
.ol-mo-hist{display:flex;gap:.25rem;flex:none}.ol-mo-hist .ol-mo-iconbtn{border:1px solid var(--ol-line);background:var(--ol-surface-2)}.ol-mo-hist .ol-mo-iconbtn:disabled{opacity:.4;cursor:default}
[dir=rtl] .ol-mo-hist .ol-mo-i{transform:scaleX(-1)}
.ol-mo-top-grow{flex:1}
.ol-mo-top .ol-mo-wsw{display:flex;gap:.3rem;margin:0;padding:.25rem;border-radius:14px;background:var(--ol-surface-2);border:1px solid var(--ol-line)}
.ol-mo-top .ol-mo-wsbtn{display:inline-flex;gap:.45rem;padding:.4rem .8rem;border-radius:10px;color:var(--ol-muted);font-weight:600;font-size:.88rem;transition:background .42s var(--ol-ease),color .42s var(--ol-ease),box-shadow .42s var(--ol-ease)}
.ol-mo-top .ol-mo-wsbtn:hover{background:var(--ol-brand-soft);color:var(--ol-brand)}
.ol-mo-top .ol-mo-wsbtn.ol-mo-on{background:var(--ol-brand);color:var(--ol-brand-ink);box-shadow:0 2px 8px color-mix(in srgb,var(--ol-brand) 35%,transparent)}
@media (max-width:1180px){.ol-mo-top .ol-mo-wsbtn span{display:none}.ol-mo-top .ol-mo-wsbtn{padding:.45rem .6rem}}
@media (max-width:860px){.ol-mo-shell{grid-template-areas:"top" "sub" "main" "foot";grid-template-rows:var(--ol-top-h) auto 1fr auto}.ol-mo-subnav{padding:.3rem .8rem}}
/* light theme => light sidebar */
:root[data-theme=light] .ol-mo-side{--ol-side:var(--ol-surface);--ol-side-2:var(--ol-surface-2);--ol-side-text:var(--ol-text);--ol-side-line:var(--ol-line);background:var(--ol-surface);box-shadow:inset -1px 0 0 var(--ol-line)}
:root[data-theme=light] .ol-mo-side .ol-mo-logo{color:var(--ol-brand)}
:root[data-theme=light] .ol-mo-side .ol-mo-brand{color:var(--ol-text)}
:root[data-theme=light] .ol-mo-side .ol-mo-navitem:hover{background:var(--ol-brand-soft);color:var(--ol-text)}
:root[data-theme=light] .ol-mo-side .ol-mo-navitem.ol-mo-on{background:var(--ol-brand-soft);color:var(--ol-brand);box-shadow:none}
:root[data-theme=light] .ol-mo-side .ol-mo-navitem.ol-mo-on .ol-mo-i{color:var(--ol-brand)}
:root[data-theme=light] .ol-mo-side .ol-mo-collapse{background:var(--ol-surface-2)}.ol-mo-side .ol-mo-collapse:hover{background:var(--ol-brand-soft);color:var(--ol-brand)}
:root[data-theme=light] .ol-mo-side .ol-mo-nsub{border-inline-start-color:var(--ol-line)}
:root[data-theme=light] .ol-mo-side .ol-mo-parent.ol-mo-has-on{color:var(--ol-brand)}
:root[data-theme=light] .ol-mo-side .ol-mo-navtitle{opacity:.7}
@media (prefers-color-scheme:light){
:root:not([data-theme=dark]):not([data-theme=light]) .ol-mo-side{--ol-side:var(--ol-surface);--ol-side-2:var(--ol-surface-2);--ol-side-text:var(--ol-text);--ol-side-line:var(--ol-line);background:var(--ol-surface);box-shadow:inset -1px 0 0 var(--ol-line)}
:root:not([data-theme=dark]):not([data-theme=light]) .ol-mo-side .ol-mo-logo{color:var(--ol-brand)}
:root:not([data-theme=dark]):not([data-theme=light]) .ol-mo-side .ol-mo-brand{color:var(--ol-text)}
:root:not([data-theme=dark]):not([data-theme=light]) .ol-mo-side .ol-mo-navitem:hover{background:var(--ol-brand-soft);color:var(--ol-text)}
:root:not([data-theme=dark]):not([data-theme=light]) .ol-mo-side .ol-mo-navitem.ol-mo-on{background:var(--ol-brand-soft);color:var(--ol-brand);box-shadow:none}
:root:not([data-theme=dark]):not([data-theme=light]) .ol-mo-side .ol-mo-navitem.ol-mo-on .ol-mo-i{color:var(--ol-brand)}
:root:not([data-theme=dark]):not([data-theme=light]) .ol-mo-side .ol-mo-collapse{background:var(--ol-surface-2)}.ol-mo-side .ol-mo-collapse:hover{background:var(--ol-brand-soft);color:var(--ol-brand)}
:root:not([data-theme=dark]):not([data-theme=light]) .ol-mo-side .ol-mo-nsub{border-inline-start-color:var(--ol-line)}
:root:not([data-theme=dark]):not([data-theme=light]) .ol-mo-side .ol-mo-parent.ol-mo-has-on{color:var(--ol-brand)}
:root:not([data-theme=dark]):not([data-theme=light]) .ol-mo-side .ol-mo-navtitle{opacity:.7}
}

:root[data-ol-collapsed="1"] .ol-mo-top .ol-mo-wsbtn span{display:inline}@media (max-width:1180px){:root[data-ol-collapsed="1"] .ol-mo-top .ol-mo-wsbtn span{display:none}}

.ol-mo-popfoot{display:flex;justify-content:center;padding:.6rem .5rem .3rem;border-block-start:1px solid var(--ol-line);margin-block-start:.35rem}
.ol-mo-h1ic{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:10px;background:var(--ol-brand-soft);color:var(--ol-brand);flex:none}.ol-mo-h1ic .ol-mo-i{width:1.05rem;height:1.05rem}
.ol-mo-pagehead h1{display:flex;align-items:center;gap:.65rem}
.ol-mo-pagehead{padding-block-end:.9rem;margin-block-end:1.3rem;border-block-end:1px solid var(--ol-line)}
.ol-mo-notifpage{padding:.4rem}.ol-mo-notifpage .ol-mo-notif{border-radius:10px}
.ol-mo-pright{display:inline-flex;align-items:center;gap:1rem;flex-wrap:wrap}.ol-mo-psize .ol-mo-selwrap{min-width:4.6rem}.ol-mo-psize .ol-mo-fld{margin:0}
/* read-only <-> edit permission editors */
.ol-mo-permbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-block-end:1rem;padding:.6rem .8rem;border:1px solid var(--ol-line);border-radius:12px;background:var(--ol-surface-2);grid-column:1/-1}
.ol-mo-permbar .ol-mo-muted{margin-inline-start:auto;font-size:.85rem}
.ol-mo-permmark{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;flex:none;margin-inline-start:auto;order:3}
.ol-mo-permmark .ol-mo-i{width:.8rem;height:.8rem}
.ol-mo-permrow:has(input:checked) .ol-mo-permmark{background:color-mix(in srgb,var(--ol-ok) 16%,transparent);color:var(--ol-ok)}.ol-mo-permrow:has(input:checked) .ol-mo-permmark .ol-mo-i:nth-child(2){display:none}
.ol-mo-permrow:not(:has(input:checked)) .ol-mo-permmark{background:var(--ol-surface-2);color:var(--ol-muted)}.ol-mo-permrow:not(:has(input:checked)) .ol-mo-permmark .ol-mo-i:nth-child(1){display:none}
.ol-mo-permform[data-ol-mode=view] .ol-mo-permrow input{display:none}.ol-mo-permform[data-ol-mode=edit] .ol-mo-permmark{display:none}
.ol-mo-permform[data-ol-mode=view] [data-ol-permall]{display:none}
.ol-mo-permform[data-ol-mode=view] .ol-mo-permacts{display:none}
.ol-mo-permrow{transition:background .42s var(--ol-ease)}
.ol-mo-permform[data-ol-mode=edit] .ol-mo-permbar .ol-mo-muted{display:none}
/* tooltip v2: fits its text (one line when short, neat wrap when long), soft fade + slight rise */
.ol-mo-tip{width:max-content;max-width:min(320px,calc(100vw - 16px));box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;text-align:start;font-size:.78rem;line-height:1.4;padding:.35rem .6rem;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.2);transform:translateY(3px);transition:opacity .42s var(--ol-ease),transform .42s var(--ol-ease)}
.ol-mo-tip.ol-mo-show{transform:none}
.ol-mo-totop-in{position:fixed;inset-block-end:auto;inset-inline-end:auto;width:36px;height:36px;z-index:1500;opacity:.92}
.ol-mo-totop{transition:opacity .42s var(--ol-ease),transform .42s var(--ol-ease),background .42s var(--ol-ease),color .42s var(--ol-ease)}
/* breathing room between card titles / info blocks / nested cards and the table or block that follows */
.ol-mo-card>h2+*,.ol-mo-card>h3+*,.ol-mo-card>h4+*,.ol-mo-card>header+.ol-mo-tablewrap,.ol-mo-card>.ol-mo-tools+.ol-mo-tablewrap{margin-block-start:.85rem}
.ol-mo-card .ol-mo-card+.ol-mo-card,.ol-mo-info+.ol-mo-card,.ol-mo-card>.ol-mo-info+*{margin-block-start:1rem}
.ol-mo-card>.ol-mo-tools{margin-block-end:.85rem}
.ol-mo-langcode{display:inline-block;min-width:1.7rem;font-weight:700;color:var(--ol-brand)}
.ol-mo-copybtn{margin-inline-start:.5rem;vertical-align:middle;border:1px solid var(--ol-line);background:var(--ol-surface-2);transition:background .42s var(--ol-ease),color .42s var(--ol-ease),border-color .42s var(--ol-ease)}
.ol-mo-copybtn:hover{background:var(--ol-brand-soft);color:var(--ol-brand);border-color:var(--ol-brand)}.ol-mo-copybtn.ol-mo-copied{background:color-mix(in srgb,var(--ol-ok) 18%,transparent);color:var(--ol-ok);border-color:var(--ol-ok)}
.ol-mo-copytmp{position:fixed;inset-block-start:0;inset-inline-start:0;opacity:0;pointer-events:none}

/* ===== 0.12.0 : scrollbar (follows the language side + the interface colour, with options), sticky copyright, header fit, calmer motion ===== */
html{--ol-sb-w:10px;--ol-sb-c:color-mix(in srgb,var(--ol-brand) 52%,transparent);--ol-sb-c-h:var(--ol-brand)}
html[data-ol-sbc=neutral]{--ol-sb-c:var(--ol-line-2);--ol-sb-c-h:var(--ol-muted)}
html[data-ol-sb=thin]{--ol-sb-w:6px}html[data-ol-sb=wide]{--ol-sb-w:15px}
*:not(html){scrollbar-width:thin;scrollbar-color:var(--ol-sb-c) transparent}
html[data-ol-sb=wide] *:not(html){scrollbar-width:auto}
::-webkit-scrollbar{width:var(--ol-sb-w);height:var(--ol-sb-w)}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--ol-sb-c);border-radius:999px;border:2px solid transparent;background-clip:content-box;transition:background .3s}
::-webkit-scrollbar-thumb:hover{background:var(--ol-sb-c-h);background-clip:content-box}
/* PAGE scrollbar: drawn by us (ol-mo-app.js) so it sits on the language side (English right, Arabic left) in every browser and takes the interface colour */
html.ol-mo-csb{scrollbar-width:none}html.ol-mo-csb::-webkit-scrollbar{display:none;width:0;height:0}
.ol-mo-sbar{position:fixed;inset-block:0;inset-inline-end:0;width:calc(var(--ol-sb-w) + 8px);z-index:900;opacity:0;pointer-events:none;transition:opacity .52s var(--ol-ease)}
html[data-ol-sbside=left] .ol-mo-sbar{inset-inline-end:auto;left:0;right:auto}html[data-ol-sbside=right] .ol-mo-sbar{inset-inline-end:auto;right:0;left:auto}
.ol-mo-sbar.ol-mo-sbon{opacity:1;pointer-events:auto}
.ol-mo-sbthumb{position:absolute;inset-inline:4px;border-radius:999px;background:var(--ol-sb-c);min-height:36px;cursor:grab;transition:background .38s var(--ol-ease),inset-inline .38s var(--ol-ease)}
.ol-mo-sbar:hover .ol-mo-sbthumb,.ol-mo-sbar.ol-mo-sbdrag .ol-mo-sbthumb{background:var(--ol-sb-c-h);inset-inline:2px}
.ol-mo-sbar.ol-mo-sbdrag .ol-mo-sbthumb{cursor:grabbing;transition:none}
html.ol-mo-sbdragging{user-select:none}
@media (pointer:coarse){.ol-mo-sbar{display:none}html.ol-mo-csb{scrollbar-width:auto}html.ol-mo-csb::-webkit-scrollbar{display:revert}}
/* copyright line always visible */
.ol-mo-foot{position:sticky;inset-block-end:0;z-index:30;box-shadow:0 -6px 16px rgba(0,0,0,.05)}
/* header: workspace tabs never push the tools out of the bar */
.ol-mo-top{min-width:0}.ol-mo-top .ol-mo-wsw{min-width:0;flex:0 1 auto}.ol-mo-top .ol-mo-wsbtn{white-space:nowrap;flex:0 1 auto;min-width:0}
@media (max-width:1560px){.ol-mo-top .ol-mo-wsbtn span{display:none}.ol-mo-top .ol-mo-wsbtn{padding:.45rem .62rem}.ol-mo-top .ol-mo-wsbtn.ol-mo-on span{display:inline}}
@media (max-width:1280px){.ol-mo-top .ol-mo-wsbtn.ol-mo-on span{display:none}}
/* calmer, quicker motion */
.ol-mo-table tbody tr{animation-duration:.3s}
.ol-mo-table tbody tr,.ol-mo-convrow,.ol-mo-mailrow,.ol-mo-navitem,.ol-mo-menuitem,.ol-mo-subitem{transition:background-color .24s var(--ol-ease),color .24s var(--ol-ease),box-shadow .24s var(--ol-ease),transform .24s var(--ol-ease)}
.ol-mo-menu,.ol-mo-pop,.ol-mo-dd{animation:ol-zoom .22s var(--ol-ease-out) both}
.ol-mo-mwrap{animation:ol-fade .27s var(--ol-ease) both}.ol-mo-mwrap.ol-mo-closing{animation:ol-fadeout .24s var(--ol-ease) both}
@keyframes ol-fadeout{from{opacity:1}to{opacity:0}}
.ol-mo-modal{animation:ol-pop .33s var(--ol-ease-out) both}.ol-mo-mwrap.ol-mo-closing .ol-mo-modal{animation:ol-zoomout .24s var(--ol-ease) both}
@keyframes ol-zoomout{from{opacity:1;transform:none}to{opacity:0;transform:scale(.97) translateY(4px)}}
.ol-mo-tip{transition:opacity .24s var(--ol-ease),transform .24s var(--ol-ease)}
.ol-mo-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.2rem 1rem .8rem}
.ol-mo-kindtabs{margin-inline-end:.8rem;padding-inline-end:.8rem;border-inline-end:1px solid var(--ol-line)}
.ol-mo-apprgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}
.ol-mo-apprgrid .ol-mo-chipbtn{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem .8rem;border:1px solid var(--ol-line);border-radius:12px;background:var(--ol-surface);color:var(--ol-text);cursor:pointer;transition:all .24s var(--ol-ease)}
.ol-mo-apprgrid .ol-mo-chipbtn:hover{border-color:var(--ol-brand);background:var(--ol-brand-soft);color:var(--ol-brand)}
.ol-mo-apprgrid .ol-mo-chipbtn.ol-mo-on{background:var(--ol-brand);border-color:var(--ol-brand);color:var(--ol-brand-ink)}
.ol-mo-pal-dot{width:14px;height:14px;border-radius:50%;display:inline-block;background:var(--c,var(--ol-brand))}
.ol-mo-subhead{margin:1.1rem 0 .5rem;font-size:.92rem;color:var(--ol-muted);font-weight:700}.ol-mo-lookcard{padding:1.2rem 1.4rem;margin-block-end:1rem}

/* ===== 0.12.1 : MOTION SYSTEM - soft, unhurried, consistent (all three projects) =====
   Every interactive element eases colour/shadow/transform over ~.28s; surfaces (menus, panels, modals, tooltips) fade AND glide in and out;
   pages fade out, then the new page rises in with a light stagger. Nothing appears or disappears abruptly. Reduced-motion users get none of it. */
:root{--ol-dur:.42s;--ol-dur-slow:.7s;--ol-ease:cubic-bezier(.4,.0,.2,1);--ol-ease-out:cubic-bezier(.22,.8,.3,1);--ol-soft:cubic-bezier(.33,.9,.4,1)}
:where(a,button,input,select,textarea,summary,label,[role=button],.ol-mo-chip,.ol-mo-tab,.ol-mo-pcard,.ol-mo-stat,.ol-mo-card,tr,li){transition:background-color .42s var(--ol-ease),color .42s var(--ol-ease),border-color .42s var(--ol-ease),box-shadow .48s var(--ol-ease),transform .48s var(--ol-soft),opacity .42s var(--ol-ease)}
.ol-mo-btn:hover,.ol-mo-pcard:hover,.ol-mo-stat:hover{transform:translateY(-2px)}.ol-mo-btn:active{transform:translateY(0) scale(.985);transition-duration:.15s}
/* pages */
.ol-mo-main{transition:opacity .29s var(--ol-ease),transform .29s var(--ol-ease)}
.ol-mo-main.ol-mo-leave{opacity:0;transform:translateY(-6px)}
.ol-mo-main>*{animation:ol-rise .7s var(--ol-soft) both}
.ol-mo-main>*:nth-child(2){animation-delay:.11s}.ol-mo-main>*:nth-child(3){animation-delay:.21s}.ol-mo-main>*:nth-child(4){animation-delay:.32s}.ol-mo-main>*:nth-child(n+5){animation-delay:.42s}
.ol-mo-table tbody tr{animation:ol-rise .7s var(--ol-soft) both}
.ol-mo-table tbody tr:nth-child(2){animation-delay:.04s}.ol-mo-table tbody tr:nth-child(3){animation-delay:.09s}.ol-mo-table tbody tr:nth-child(4){animation-delay:.14s}.ol-mo-table tbody tr:nth-child(5){animation-delay:.18s}.ol-mo-table tbody tr:nth-child(n+6){animation-delay:.22s}
@keyframes ol-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* workspace switch: the sidebar groups of the new workspace fade in */
.ol-mo-navgroup{animation:ol-fade .7s var(--ol-ease) both}
@keyframes ol-fade{from{opacity:0}to{opacity:1}}
/* modals: backdrop fades, dialog glides + scales; closing mirrors it */
.ol-mo-mwrap{animation:ol-fade .45s var(--ol-ease) both}
.ol-mo-modal{animation:ol-pop .63s var(--ol-soft) both}
@keyframes ol-pop{from{opacity:0;transform:translateY(22px) scale(.95)}to{opacity:1;transform:none}}
.ol-mo-mwrap.ol-mo-closing{animation:ol-fadeout .45s var(--ol-ease) both}
.ol-mo-mwrap.ol-mo-closing .ol-mo-modal{animation:ol-zoomout .45s var(--ol-ease) both}
@keyframes ol-zoomout{from{opacity:1;transform:none}to{opacity:0;transform:translateY(14px) scale(.97)}}
/* menus / panels (opened with the hidden attribute): animate both ways using discrete display transitions */
#ol-mo-usermenu,#ol-mo-notifpanel,#ol-mo-mailpanel{animation:none;transition:opacity .39s var(--ol-ease),transform .45s var(--ol-soft),display .45s allow-discrete,overlay .45s allow-discrete;opacity:1;transform:none;transform-origin:top}
#ol-mo-usermenu[hidden],#ol-mo-notifpanel[hidden],#ol-mo-mailpanel[hidden]{display:none;opacity:0;transform:translateY(-8px) scale(.97)}
@starting-style{#ol-mo-usermenu,#ol-mo-notifpanel,#ol-mo-mailpanel{opacity:0;transform:translateY(-8px) scale(.97)}}
.ol-mo-list,.ol-mo-cal,.ol-mo-fly,.ol-mo-menu,.ol-mo-pop{animation:ol-drop .45s var(--ol-soft) both}
@keyframes ol-drop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
.ol-mo-subbody{transition:opacity .45s var(--ol-ease)}
/* tooltips: fade + tiny glide */
.ol-mo-tip{transition:opacity .36s var(--ol-ease),transform .42s var(--ol-soft);transform:translateY(5px)}.ol-mo-tip.ol-mo-show{transform:none}
/* toasts */
.ol-mo-toast{transition:opacity .52s var(--ol-ease),transform .6s var(--ol-soft)}
/* page-level: sites change page with a real navigation, so cross-fade the documents (supported browsers) and fade the first paint otherwise */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.33s var(--ol-ease) both ol-fadeout}::view-transition-new(root){animation:.68s var(--ol-ease) both ol-fade}
html[data-ol-lock] body{animation:ol-fade .7s var(--ol-ease) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}.ol-mo-sbar{transition:none}}

/* 0.12.1 SPACING: page-level action / filter rows never touch the card or table that follows them */
.ol-mo-pagehead+.ol-mo-actions,.ol-mo-pagehead~.ol-mo-actions{margin-block:.2rem 1rem}
.ol-mo-actions+.ol-mo-card,.ol-mo-actions+section,.ol-mo-actions+.ol-mo-tablewrap,.ol-mo-actions+.ol-mo-stats{margin-block-start:1rem}
.ol-mo-pagehead+.ol-mo-card,.ol-mo-pagehead+.ol-mo-tablewrap{margin-block-start:.4rem}
.ol-mo-tabs.ol-mo-tabs-top+.ol-mo-tablewrap,.ol-mo-chips+.ol-mo-tablewrap{margin-block-start:.9rem}

/* 0.12.1 General "both websites" page: one setting = its field(s) + its own "apply to both" switch, kept together on one row */
.ol-mo-bothset{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.7rem 1rem;align-items:start;padding-block-end:.9rem;border-block-end:1px dashed var(--ol-line)}
.ol-mo-bothset:last-child{border-block-end:0}
.ol-mo-bothset>.ol-mo-fld:last-child,.ol-mo-bothset>.ol-mo-switchrow:last-child{align-self:center}
.ol-mo-rowact{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}

/* 0.12.2 timing x1.5 applied to every transition/animation duration under .6s (softer, unhurried). Do not re-run. */

/* ===== 0.12.2 : SOFT MOTION v3 ===== */
/* sidebar: the width glides (0.65s), labels fade out/in instead of vanishing, groups and sub-menus slide open/shut */
.ol-mo-shell{transition:grid-template-columns .65s var(--ol-soft)}
.ol-mo-side{transition:width .65s var(--ol-soft),transform .5s var(--ol-soft)}
.ol-mo-navlbl,.ol-mo-brandname{transition:opacity .45s var(--ol-ease),display .45s allow-discrete}
:root[data-ol-collapsed="1"] .ol-mo-navlbl,:root[data-ol-collapsed="1"] .ol-mo-brandname,.ol-mo-collapsed .ol-mo-navlbl,.ol-mo-collapsed .ol-mo-brandname{opacity:0}
@starting-style{.ol-mo-navlbl,.ol-mo-brandname{opacity:0}}
.ol-mo-gbody,.ol-mo-nsub{transition:height .55s var(--ol-soft),opacity .5s var(--ol-ease) .05s,visibility 0s}
.ol-mo-gshut .ol-mo-gbody,.ol-mo-nsub{transition:height .55s var(--ol-soft),opacity .35s var(--ol-ease),visibility 0s .55s}
.ol-mo-npar.ol-mo-popen .ol-mo-nsub{transition:height .55s var(--ol-soft),opacity .5s var(--ol-ease) .08s,visibility 0s}
.ol-mo-gchev,.ol-mo-pchev,.ol-mo-chev{transition:transform .55s var(--ol-soft)}
/* arrows turn the way the language reads: LTR chevron points right and swings down clockwise; RTL chevron points left and swings down counter-clockwise (outer edge -> down in both) */
[dir=rtl] .ol-mo-open>.ol-mo-selbtn .ol-mo-chev,[dir=rtl] .ol-mo-open>.ol-mo-userbtn .ol-mo-chev,[dir=rtl] .ol-mo-open>.ol-mo-subbtn .ol-mo-chev,[dir=rtl] .ol-mo-userbtn[aria-expanded=true] .ol-mo-chev,[dir=rtl] .ol-mo-subbtn[aria-expanded=true] .ol-mo-chev,[dir=rtl] .ol-mo-navgroup:not(.ol-mo-gshut) .ol-mo-gchev,[dir=rtl] .ol-mo-npar.ol-mo-popen>.ol-mo-parent .ol-mo-pchev{transform:scaleX(-1) rotate(90deg)}
/* menus and panels from icons / avatar / selects: slower, gentler glide */
#ol-mo-usermenu,#ol-mo-notifpanel,#ol-mo-mailpanel{transition:opacity .45s var(--ol-ease),transform .55s var(--ol-soft),display .55s allow-discrete,overlay .55s allow-discrete}
#ol-mo-usermenu[hidden],#ol-mo-notifpanel[hidden],#ol-mo-mailpanel[hidden]{transform:translateY(-6px) scale(.985)}
@starting-style{#ol-mo-usermenu,#ol-mo-notifpanel,#ol-mo-mailpanel{transform:translateY(-6px) scale(.985)}}
.ol-mo-list,.ol-mo-cal,.ol-mo-fly,.ol-mo-menu,.ol-mo-pop{animation:ol-drop .5s var(--ol-soft) both}
.ol-mo-list.ol-mo-out,.ol-mo-cal.ol-mo-out{animation:ol-dropout .38s var(--ol-ease) both;pointer-events:none}
@keyframes ol-drop{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ol-dropout{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px) scale(.985)}}
/* switches / toggles */
.ol-mo-sw-track{transition:background .5s var(--ol-ease),box-shadow .5s var(--ol-ease)}
.ol-mo-sw-track i{transition:inset-inline-start .5s var(--ol-soft),width .4s var(--ol-soft)}
/* scrollbar: no smoothing while the thumb is dragged (smooth scroll made the mouse feel heavy) */
html.ol-mo-sbdragging{scroll-behavior:auto!important}
.ol-mo-sbar.ol-mo-sbdrag .ol-mo-sbthumb{transition:none!important}
/* 0.12.2 About window: the company logo sits above the tabs and never changes with them */
.ol-mo-ablogo{display:flex;justify-content:center;padding:.4rem 0 1rem}
.ol-mo-ablogo img{max-height:92px;max-width:min(260px,70%);object-fit:contain}
.ol-mo-ablogoedit{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;padding:.7rem .8rem;margin-block-end:1rem;border:1px solid var(--ol-line);border-radius:var(--ol-r-sm);background:var(--ol-surface-2)}
.ol-mo-ablogopic{width:72px;height:72px;border-radius:12px;border:1px dashed var(--ol-line);display:grid;place-items:center;overflow:hidden;background:var(--ol-surface);color:var(--ol-muted)}
.ol-mo-ablogopic img{width:100%;height:100%;object-fit:contain}
.ol-mo-ablogoedit p{margin:.15rem 0 .5rem;font-size:.8rem}

/* ===== 0.12.2 carousel arrows (replace horizontal scroll) + framed back-to-top ===== */
.ol-mo-car{position:relative}
.ol-mo-car-track{display:flex;gap:1rem;overflow-x:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-block:.3rem}
.ol-mo-car-track>*{flex:0 0 auto;scroll-snap-align:start}
.ol-mo-car-arr{position:absolute;inset-block-start:50%;margin-block-start:-21px;z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid var(--ol-line);background:var(--ol-surface);color:var(--ol-brand);display:grid;place-items:center;cursor:pointer;box-shadow:var(--ol-shadow-lg);transition:background .42s var(--ol-ease),color .42s var(--ol-ease),opacity .42s var(--ol-ease)}
.ol-mo-car-arr:hover{background:var(--ol-brand);color:#fff}.ol-mo-car-arr[disabled]{opacity:0;pointer-events:none}
.ol-mo-car-prev{inset-inline-start:-14px}.ol-mo-car-next{inset-inline-end:-14px}
.ol-mo-totop{border:2px solid var(--ol-brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--ol-brand) 18%,transparent),var(--ol-shadow-lg);width:44px;height:44px}
.ol-mo-totop-in{border-width:1px;box-shadow:var(--ol-shadow);width:36px;height:36px}

/* 0.13.0 About / copyright modal: wide, fields laid out as a grid of tiles */
.ol-mo-tabpane{display:none}
.ol-mo-tabpane.ol-mo-on:has(.ol-mo-abrow){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;padding-block:.4rem}
.ol-mo-tabpane .ol-mo-abrow{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i k" "i v";column-gap:.75rem;row-gap:.1rem;align-items:center;padding:.75rem .9rem;border:1px solid var(--ol-line);border-radius:12px;background:var(--ol-surface-2);min-width:0}
.ol-mo-tabpane .ol-mo-abrow:last-child{border:1px solid var(--ol-line)}
.ol-mo-tabpane .ol-mo-abk{display:contents}
.ol-mo-tabpane .ol-mo-abk .ol-mo-i{grid-area:i;width:2.1rem;height:2.1rem;padding:.5rem;border-radius:10px;background:var(--ol-surface);color:var(--ol-brand);box-sizing:border-box}
.ol-mo-tabpane .ol-mo-abk b{grid-area:k;font-size:.74rem;font-weight:600;color:var(--ol-muted)}
.ol-mo-tabpane .ol-mo-abv{grid-area:v;display:flex;align-items:center;justify-content:space-between;gap:.4rem;font-size:.92rem;font-weight:600;min-width:0;overflow-wrap:anywhere}
@media (max-width:1100px){.ol-mo-tabpane.ol-mo-on:has(.ol-mo-abrow){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ol-mo-tabpane.ol-mo-on:has(.ol-mo-abrow){grid-template-columns:1fr}.ol-mo-tabpane .ol-mo-abrow{display:grid}}

/* 0.14.0 smart forms: conditional blocks stay layout-neutral inside the form grid */
.ol-mo-showif{display:contents}.ol-mo-showif[hidden]{display:none!important}

/* 0.14.0: the copyright footer wears the colour of the active interface (the same dark block as the sidebar) */
.ol-mo-foot{background:var(--ol-side);color:rgba(255,255,255,.78);border-block-start:1px solid var(--ol-side-line)}
.ol-mo-foot .ol-mo-iconbtn,.ol-mo-foot .ol-mo-ver{color:#fff}

/* 0.14.0: horizontal scrollbars are thinner and sit a little above the edge */
::-webkit-scrollbar:horizontal{height:14px}
::-webkit-scrollbar-thumb:horizontal{border-block-start:5px solid transparent;border-block-end:6px solid transparent;border-inline:2px solid transparent;background-clip:content-box}
/* About modal: fixed company header above the tabs */
.ol-mo-abco{display:flex;align-items:center;gap:.85rem;padding:.2rem .1rem .9rem;margin-block-end:.9rem;border-block-end:1px solid var(--ol-line)}
.ol-mo-abco img{width:52px;height:52px;object-fit:contain;border-radius:12px;flex:none}
.ol-mo-abmark{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--ol-brand);color:var(--ol-brand-ink);font:800 1.4rem var(--ol-font)}
.ol-mo-abco b{display:block;font-size:1.05rem;line-height:1.3}
.ol-mo-abco a{display:inline-flex;align-items:center;gap:.35rem;color:var(--ol-muted);font-size:.86rem;text-decoration:none;margin-block-start:.1rem}
.ol-mo-abco a:hover{color:var(--ol-brand)}.ol-mo-abco a .ol-mo-i{width:.95rem;height:.95rem}
.ol-mo-modal .ol-mo-abco>div{flex:0 1 auto;min-width:0;text-align:start}