/*
 * TGI UI — "Console" design system.
 *
 * The portal styled as a piece of fibre test equipment: a grey chassis,
 * paper modules with hairline borders, IBM Plex Mono readouts, square LED
 * status lights, pads that flash inverted when pressed, sequencer-style
 * step bars and an LCD readout.
 *
 * Every class is prefixed ui- so it can never collide with the classes
 * older pages already use (btn, card, chip…).
 *
 * Page setup (head):
 *   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
 *   <link rel="stylesheet" href="nav_shared.css">
 *   <link rel="stylesheet" href="tgi_ui.css">     ← after nav_shared.css
 *   <script src="tgi_ui.js"></script>             ← sets day/night before paint
 *
 * Shell (body): <header class="ui-mast">…</header> <nav class="ui-rail" data-ui-rail></nav>
 *               <main class="ui-main">…</main>. tgi_ui.js fills the rail,
 *               the phone tab bar and the Ctrl+K search from the shared menu,
 *               so they only ever show pages the person may open.
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */
:root {
    --ui-chassis: #ECEEF0;
    --ui-paper:   #F6F7F8;
    --ui-well:    #E2E5E9;
    --ui-ink:     #1C1D20;
    --ui-ink-2:   #55585F;
    --ui-faint:   #8F939B;
    --ui-hair:    rgba(28, 29, 32, .20);
    --ui-hair-2:  rgba(28, 29, 32, .10);
    --ui-lcd:     #DDE2D3;
    --ui-lcd-ink: #26301C;
    --ui-sig:     #1747E0;
    --ui-on-sig:  #FFFFFF;
    --ui-up:      #13A05A;
    --ui-warn:    #D99500;
    --ui-down:    #E0352A;
    --ui-iso:     #7B4DFF;
    --ui-wa:      #1FAF5A;
    --ui-glow:    0;
    --ui-shadow:  0 24px 60px rgba(28, 29, 32, .16);
    --ui-scrim:   rgba(236, 238, 240, .62);
    --ui-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --ui-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ui-mast-h: 58px;
    --ui-rail-w: 232px;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ui-chassis: #16171A; --ui-paper: #1D1F23; --ui-well: #26292E;
        --ui-ink: #E8EAED; --ui-ink-2: #A2A6AE; --ui-faint: #6A6F78;
        --ui-hair: rgba(232, 234, 237, .16); --ui-hair-2: rgba(232, 234, 237, .08);
        --ui-lcd: #0F1A12; --ui-lcd-ink: #8DF0A6;
        --ui-sig: #5C8DFF; --ui-on-sig: #0B1020;
        --ui-up: #3BD47F; --ui-warn: #FFC23D; --ui-down: #FF5A4E; --ui-iso: #A387FF; --ui-wa: #2BC96B;
        --ui-glow: 1; --ui-shadow: 0 24px 60px rgba(0, 0, 0, .55); --ui-scrim: rgba(10, 11, 13, .62);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --ui-chassis: #16171A; --ui-paper: #1D1F23; --ui-well: #26292E;
    --ui-ink: #E8EAED; --ui-ink-2: #A2A6AE; --ui-faint: #6A6F78;
    --ui-hair: rgba(232, 234, 237, .16); --ui-hair-2: rgba(232, 234, 237, .08);
    --ui-lcd: #0F1A12; --ui-lcd-ink: #8DF0A6;
    --ui-sig: #5C8DFF; --ui-on-sig: #0B1020;
    --ui-up: #3BD47F; --ui-warn: #FFC23D; --ui-down: #FF5A4E; --ui-iso: #A387FF; --ui-wa: #2BC96B;
    --ui-glow: 1; --ui-shadow: 0 24px 60px rgba(0, 0, 0, .55); --ui-scrim: rgba(10, 11, 13, .62);
    color-scheme: dark;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
body.ui-shell {
    margin: 0;
    background: var(--ui-chassis);
    color: var(--ui-ink);
    font: 400 14px/1.45 var(--ui-sans);
    -webkit-font-smoothing: antialiased;
}
body.ui-shell :focus-visible { outline: 2px solid var(--ui-sig); outline-offset: 2px; }
.ui-cap { font-family: var(--ui-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ui-mono { font-family: var(--ui-mono); }
.ui-faint { color: var(--ui-faint); }
svg.ui-i { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }

body.ui-shell * { scrollbar-width: thin; scrollbar-color: var(--ui-hair) transparent; }
body.ui-shell *::-webkit-scrollbar { width: 10px; height: 10px; }
body.ui-shell *::-webkit-scrollbar-thumb { background: var(--ui-hair); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }

/* LED — a square light */
.ui-led { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; background: transparent; border: 1.5px solid var(--ui-faint); }
.ui-led.on { background: var(--c, var(--ui-ink)); border-color: var(--c, var(--ui-ink)); box-shadow: 0 0 calc(var(--ui-glow) * 9px) var(--c, transparent); }
.ui-led.up { --c: var(--ui-up); } .ui-led.warn { --c: var(--ui-warn); } .ui-led.down { --c: var(--ui-down); }
.ui-led.iso { --c: var(--ui-iso); } .ui-led.sig { --c: var(--ui-sig); }
.ui-led.blink { animation: uiBlink 1.1s steps(1) infinite; }
@keyframes uiBlink { 50% { opacity: .15; } }

/* ------------------------------------------------------------------ */
/* Controls                                                            */
/* ------------------------------------------------------------------ */
.ui-chip {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px;
    font: 600 10.5px var(--ui-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
    border: 1px solid var(--ui-hair); border-radius: 7px; background: var(--ui-chassis); color: var(--ui-ink);
    cursor: pointer; white-space: nowrap; transition: background-color .12s, color .12s, border-color .12s;
}
a.ui-chip:hover, button.ui-chip:hover { border-color: var(--ui-ink); }
a.ui-chip:active, button.ui-chip:active, .ui-chip.on { background: var(--ui-ink); color: var(--ui-chassis); border-color: var(--ui-ink); }
span.ui-chip { cursor: default; }

.ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 16px; border: 1px solid var(--ui-ink); border-radius: 8px;
    background: var(--ui-ink); color: var(--ui-chassis);
    font: 600 11px var(--ui-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
    cursor: pointer; white-space: nowrap; transition: background-color .12s, color .12s, border-color .12s;
}
.ui-btn:hover { background: var(--ui-sig); border-color: var(--ui-sig); color: var(--ui-on-sig); }
.ui-btn:active { animation: uiInvert .2s steps(1); }
.ui-btn.ghost { background: var(--ui-chassis); color: var(--ui-ink); border-color: var(--ui-hair); }
.ui-btn.ghost:hover { border-color: var(--ui-ink); background: var(--ui-chassis); color: var(--ui-ink); }
@keyframes uiInvert { 0% { background: var(--ui-chassis); color: var(--ui-ink); } }

.ui-field {
    height: 40px; padding: 0 12px; border: 1px solid var(--ui-hair); border-radius: 8px;
    background: var(--ui-chassis); color: var(--ui-ink); font: 400 14px var(--ui-sans); box-sizing: border-box;
}
textarea.ui-field { height: auto; min-height: 44px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.ui-field::placeholder { color: var(--ui-faint); }
.ui-field:focus { outline: none; border-color: var(--ui-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-sig) 22%, transparent); }

.ui-kbd { font: 600 10.5px var(--ui-mono); padding: 2px 6px; border: 1px solid var(--ui-hair); border-radius: 5px; color: var(--ui-ink-2); background: var(--ui-chassis); }

/* ------------------------------------------------------------------ */
/* Modules                                                             */
/* ------------------------------------------------------------------ */
.ui-module { background: var(--ui-paper); border: 1px solid var(--ui-hair); border-radius: 12px; min-width: 0; }
.ui-mod-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ui-hair); min-height: 42px; box-sizing: border-box; }
.ui-mod-head .ui-cap { color: var(--ui-ink); }
.ui-mod-head .ui-sub { color: var(--ui-faint); }
.ui-mod-head .ui-lnk { margin-left: auto; }
.ui-mod-body { padding: 14px; }
.ui-lnk { font: 600 10.5px var(--ui-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ui-ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ui-lnk:hover { color: var(--ui-ink); }
.ui-empty { padding: 18px 0 8px; color: var(--ui-faint); font: 500 12px var(--ui-mono); text-align: center; }

/* LCD readout */
.ui-lcd {
    background: var(--ui-lcd); color: var(--ui-lcd-ink); border-radius: 8px; padding: 16px 18px 14px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), inset 0 10px 24px -14px rgba(0,0,0,.25);
    font-family: var(--ui-mono); position: relative; overflow: hidden;
}
.ui-lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px); }
.ui-cursor { display: inline-block; width: .6em; height: 1.05em; background: currentColor; vertical-align: -2px; margin-left: 2px; animation: uiBlink 1s steps(1) infinite; }

/* Pads */
.ui-pad { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--ui-paper); border: 1px solid var(--ui-hair); border-radius: 10px; overflow: hidden; transition: border-color .12s; min-width: 0; }
a.ui-pad:hover { border-color: var(--ui-ink); }
a.ui-pad:active { animation: uiPadInvert .22s steps(1); }
@keyframes uiPadInvert { 0% { background: var(--ui-ink); color: var(--ui-paper); } }
.ui-pad-board { padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 6px; min-height: 104px; }
.ui-pad-board .ui-i { color: var(--ui-ink-2); }
.ui-pad-n { font: 600 40px/1 var(--ui-mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: auto; }
.ui-pad-l { font-size: 13px; color: var(--ui-ink-2); }
.ui-pad-strip { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-top: 1px solid var(--ui-hair); background: var(--ui-chassis); min-height: 30px; box-sizing: border-box; }
.ui-pad-strip .code { font: 700 10.5px var(--ui-mono); letter-spacing: .08em; }
.ui-pad-strip .tag { margin-left: auto; font: 600 10.5px var(--ui-mono); letter-spacing: .04em; color: var(--ui-ink-2); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Flags */
.ui-flag { font: 700 10px var(--ui-mono); letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.ui-flag.down { color: var(--ui-down); background: color-mix(in srgb, var(--ui-down) 12%, transparent); }
.ui-flag.warn { color: var(--ui-warn); background: color-mix(in srgb, var(--ui-warn) 14%, transparent); }
.ui-flag.up   { color: var(--ui-up);   background: color-mix(in srgb, var(--ui-up) 12%, transparent); }
.ui-flag.iso  { color: var(--ui-iso);  background: color-mix(in srgb, var(--ui-iso) 12%, transparent); }
.ui-flag.muted { color: var(--ui-ink-2); background: var(--ui-chassis); border: 1px solid var(--ui-hair); }

/* ------------------------------------------------------------------ */
/* Shell: mast, rail, main, phone tab bar                              */
/* ------------------------------------------------------------------ */
.ui-mast {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; gap: 16px; height: var(--ui-mast-h); padding: 0 16px 0 18px; box-sizing: border-box;
    background: color-mix(in srgb, var(--ui-chassis) 86%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ui-hair);
}
.ui-mast-id { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; text-decoration: none; color: var(--ui-ink); min-width: 0; }
.ui-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--ui-ink); align-self: center; flex-shrink: 0; }
.ui-mast-name { font: 700 15px var(--ui-mono); letter-spacing: .06em; }
.ui-mast-sub { color: var(--ui-ink-2); }
.ui-mast-tag { color: var(--ui-faint); }
.ui-cmd {
    flex: 1; min-width: 0; max-width: 520px; margin-left: auto; display: flex; align-items: center; gap: 10px;
    height: 38px; padding: 0 10px 0 12px; border: 1px solid var(--ui-hair); border-radius: 8px;
    background: var(--ui-paper); color: var(--ui-ink-2); cursor: text; text-align: left; font: inherit;
}
.ui-cmd:hover { border-color: var(--ui-ink); }
.ui-cmd-t { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-clock { font: 500 13px var(--ui-mono); font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; align-items: center; gap: 8px; }

.ui-rail {
    position: fixed; z-index: 40; top: var(--ui-mast-h); bottom: 0; left: 0; width: var(--ui-rail-w); box-sizing: border-box;
    overflow-y: auto; padding: 14px 10px 24px; border-right: 1px solid var(--ui-hair); background: var(--ui-chassis);
}
.ui-rail-sec { padding: 14px 10px 6px; color: var(--ui-faint); }
.ui-ch { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid transparent; border-radius: 7px; text-decoration: none; color: var(--ui-ink-2); font-size: 13.5px; line-height: 1.3; }
.ui-ch:hover { color: var(--ui-ink); background: var(--ui-paper); border-color: var(--ui-hair-2); }
.ui-ch.cur { color: var(--ui-ink); background: var(--ui-paper); border-color: var(--ui-hair); font-weight: 600; }
.ui-ch.cur .ui-led { background: var(--ui-sig); border-color: var(--ui-sig); box-shadow: 0 0 calc(var(--ui-glow) * 9px) var(--ui-sig); }
.ui-main { margin-left: var(--ui-rail-w); padding: 22px 26px 60px; min-width: 0; box-sizing: border-box; }
.ui-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ui-head h1 { margin: 0; font: 600 30px/1 var(--ui-mono); letter-spacing: -.01em; }
.ui-head .ui-sub { color: var(--ui-ink-2); font: 500 13px var(--ui-mono); margin-top: 8px; }
.ui-head .ui-right { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.ui-tabs { display: none; }

/* The shared user menu, re-skinned as a console control */
.ui-mast #tgiNavMount { flex-shrink: 0; }
.ui-mast .tgi-nav {
    --tgi-primary: var(--ui-ink); --tgi-primary-soft: var(--ui-chassis); --tgi-card-bg: var(--ui-paper); --tgi-bg: var(--ui-chassis);
    --tgi-border: var(--ui-hair); --tgi-text: var(--ui-ink); --tgi-text-muted: var(--ui-faint);
    --tgi-danger: var(--ui-down); --tgi-danger-light: color-mix(in srgb, var(--ui-down) 12%, transparent);
    --tgi-font-body: var(--ui-sans); --tgi-font-mono: var(--ui-mono);
}
.ui-mast .tgi-nav .user-menu-trigger { height: 38px; padding: 0 12px 0 4px; border-radius: 8px; gap: 9px; background: var(--ui-paper); font: 500 14px var(--ui-sans); }
.ui-mast .tgi-nav .user-menu-trigger > span:first-child { width: 28px; height: 28px; border-radius: 5px; background: var(--ui-ink); color: var(--ui-chassis); display: grid; place-items: center; font: 700 11px var(--ui-mono); }
.ui-mast .tgi-nav .user-menu-trigger:hover { border-color: var(--ui-ink); }
.ui-mast .tgi-nav .user-menu-dropdown { border-radius: 12px; box-shadow: var(--ui-shadow); top: calc(100% + 10px); background: var(--ui-paper); }
.ui-mast .tgi-nav .user-menu-section { font: 600 10.5px var(--ui-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ui-faint); }
.ui-mast .tgi-nav .user-menu-item { font: 500 13.5px var(--ui-sans); border-radius: 7px; border: 1px solid transparent; }
.ui-mast .tgi-nav .user-menu-item:hover { background: var(--ui-chassis); border-color: var(--ui-hair-2); }
.ui-mast .tgi-nav .user-menu-item-current { background: var(--ui-chassis); border-color: var(--ui-hair); color: var(--ui-ink); font-weight: 600; }
.ui-mast .tgi-nav .user-menu-foot .user-menu-item { font: 600 10.5px var(--ui-mono); letter-spacing: .08em; text-transform: uppercase; border-radius: 7px; background: var(--ui-chassis); }
.ui-mast .tgi-nav .user-menu-foot .user-menu-item:hover { border-color: var(--ui-ink); background: var(--ui-chassis); }
.ui-mast .tgi-nav .user-menu-emoji { display: inline-flex; color: var(--ui-ink-2); }
.ui-mast .tgi-nav .user-menu-item-current .user-menu-emoji { color: var(--ui-sig); }

/* Theme switch inside the menu footer (added by tgi_ui.js) */
.ui-theme-switch { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; padding: 2px 2px 4px; }
.ui-theme-switch .ui-cap { color: var(--ui-faint); }
.ui-seg { margin-left: auto; display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--ui-hair); border-radius: 8px; background: var(--ui-chassis); }
.ui-seg button { font: 600 10.5px var(--ui-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ui-ink-2); background: none; border: 0; border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.ui-seg button[aria-pressed="true"] { background: var(--ui-ink); color: var(--ui-chassis); }

/* Command palette */
.ui-scrim { position: fixed; inset: 0; z-index: 2000; background: var(--ui-scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.ui-palette { width: min(620px, 100%); background: var(--ui-paper); border: 1px solid var(--ui-hair); border-radius: 14px; box-shadow: var(--ui-shadow); overflow: hidden; animation: uiPop .16s ease-out; font-family: var(--ui-sans); color: var(--ui-ink); }
@keyframes uiPop { from { opacity: 0; transform: translateY(-6px) scale(.99); } }
.ui-pal-in { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--ui-hair); }
.ui-pal-in input { flex: 1; min-width: 0; height: 54px; border: 0; background: none; color: var(--ui-ink); font: 500 16px var(--ui-sans); outline: none; box-shadow: none; }
.ui-pal-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.ui-pal-sec { padding: 10px 10px 4px; color: var(--ui-faint); }
.ui-pal-it { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; cursor: pointer; text-decoration: none; color: var(--ui-ink); }
.ui-pal-it .s { color: var(--ui-ink-2); font: 500 12px var(--ui-mono); margin-left: auto; }
.ui-pal-it.act { background: var(--ui-ink); color: var(--ui-chassis); }
.ui-pal-it.act .s { color: var(--ui-chassis); }
.ui-pal-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--ui-hair); color: var(--ui-faint); }

.ui-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2100; background: var(--ui-ink); color: var(--ui-chassis); padding: 9px 14px; border-radius: 8px; font: 600 11px var(--ui-mono); letter-spacing: .08em; text-transform: uppercase; }

/* ------------------------------------------------------------------ */
/* Phone                                                               */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
    .ui-rail { display: none; }
    .ui-main { margin-left: 0; padding: 16px 14px calc(92px + env(safe-area-inset-bottom)); }
    .ui-mast { gap: 8px; padding: 0 12px; }
    .ui-mast-sub, .ui-mast-tag, .ui-clock, .ui-cmd .ui-kbd { display: none; }
    .ui-cmd { max-width: none; }
    .ui-mast .tgi-nav-mount { flex: 0 0 auto; width: auto; }
    .ui-mast .tgi-nav { width: auto; position: static; }
    .ui-mast .tgi-nav .user-menu-trigger { width: auto; padding: 0 5px; }
    .ui-mast .tgi-nav .user-menu-name, .ui-mast .tgi-nav .user-menu-caret { display: none; }
    .ui-mast .tgi-nav .user-menu-dropdown, .ui-mast .tgi-nav .user-menu-dropdown.user-menu-slim { position: fixed; left: 10px; right: 10px; top: calc(var(--ui-mast-h) + 6px); width: auto; max-height: calc(100vh - var(--ui-mast-h) - 110px); }
    .ui-tabs {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--ui-chassis) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--ui-hair);
    }
    .ui-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 0 5px; border: 0; background: none; border-radius: 8px; color: var(--ui-ink-2); font: 600 9.5px var(--ui-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
    .ui-tab svg.ui-i { width: 20px; height: 20px; }
    .ui-tab.cur { color: var(--ui-ink); background: var(--ui-paper); box-shadow: inset 0 0 0 1px var(--ui-hair); }
}
@media (max-width: 620px) {
    .ui-mast #uiThemeBtn span { display: none; }
    .ui-mast #uiThemeBtn { padding: 0 9px; }
    .ui-head h1 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    body.ui-shell *, body.ui-shell *::before, body.ui-shell *::after { animation: none !important; transition: none !important; }
}