/* =========================================================================
   THESHIFTHUB UI — design tokens + modern component layer
   Loaded AFTER bootstrap.css, theme.css, skins and custom.css so it can
   override them without !important.

   Section 1 (tokens) is safe anywhere. Section 2 refines stock Bootstrap 4
   components, scoped under html.tsh-modern - set on every page except the
   embedded public widgets ($no_headers).
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
    /* Brand — overridden per profile below to match each skin */
    --tsh-brand: #ff904e;
    --tsh-brand-hover: color-mix(in srgb, var(--tsh-brand) 88%, #000);
    --tsh-brand-active: color-mix(in srgb, var(--tsh-brand) 78%, #000);
    --tsh-brand-soft: color-mix(in srgb, var(--tsh-brand) 22%, transparent);
    --tsh-brand-tint: color-mix(in srgb, var(--tsh-brand) 10%, transparent);

    --tsh-ink: #1d2433;          /* body text, field values */
    --tsh-heading: #121826;      /* titles, labels */
    --tsh-muted: #667085;
    --tsh-placeholder: #98a2b3;
    --tsh-line: #d5dae2;         /* form controls */
    --tsh-line-hover: #b4bcc8;
    --tsh-divider: #e7eaef;      /* structural lines */
    --tsh-canvas: #f3f5f8;
    --tsh-surface: #fff;
    --tsh-disabled-bg: #eceff3;  /* disabled fields */
    --tsh-danger: #d92d20;
    --tsh-danger-soft: rgba(217, 45, 32, .16);

    /* Radius scale: sm = chips, checkboxes; base = inputs, buttons, alerts;
       lg = cards, modals. Deliberately rounder than stock Bootstrap. */
    --tsh-radius-sm: 6px;
    --tsh-radius: 12px;
    --tsh-radius-lg: 20px;

    /* Layered shadows: a tight contact shadow + a soft ambient one */
    --tsh-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --tsh-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px -2px rgba(16, 24, 40, .08);
    --tsh-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -8px rgba(16, 24, 40, .14);
    --tsh-shadow-lg: 0 2px 4px rgba(16, 24, 40, .04), 0 24px 56px -12px rgba(16, 24, 40, .20);
    --tsh-ring: 0 0 0 4px var(--tsh-brand-soft);
    --tsh-ring-neutral: 0 0 0 4px rgba(16, 24, 40, .06);

    --tsh-control-h: 48px;
    --tsh-font-body: "Plus Jakarta Sans", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --tsh-font-display: var(--tsh-font-body);
    --tsh-title-tracking: -.02em;
}

/* Per-profile brand colours (mirrors css/skins/<prefix>-default.css) */
html[data-profile="dochas"]   { --tsh-brand: #89428d; }
html[data-profile="jordan"]   { --tsh-brand: #741f1d; }
html[data-profile="medcrowd"] { --tsh-brand: #387dc2; }
html[data-profile="procare"]  { --tsh-brand: #388073; }
html[data-profile="strand"]   { --tsh-brand: #129ac4; }
html[data-profile="vanda"]    { --tsh-brand: #4a39a2; }
html[data-profile="vencorp"]  { --tsh-brand: #800d12; }

html.dark {
    --tsh-brand-hover: color-mix(in srgb, var(--tsh-brand) 85%, #fff);
    --tsh-brand-soft: color-mix(in srgb, var(--tsh-brand) 32%, transparent);
    --tsh-ink: #e6e8ec;
    --tsh-heading: #f2f4f7;
    --tsh-muted: #a3aab6;
    --tsh-placeholder: #6f7785;
    --tsh-line: #3a404b;
    --tsh-line-hover: #535a67;
    --tsh-divider: #2e333c;
    --tsh-canvas: #171a20;
    --tsh-surface: #20242c;
    --tsh-disabled-bg: #1a1d24;
    --tsh-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -8px rgba(0, 0, 0, .5);
}

/* ---------- 2. Bootstrap 4 refinements (scoped to html.tsh-modern) ---------- */
html.tsh-modern body {
    font-family: var(--tsh-font-body);
    color: var(--tsh-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Labels */
html.tsh-modern label {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tsh-heading);
}

/* Inputs */
html.tsh-modern .form-control {
    height: var(--tsh-control-h);
    padding: 0 16px;
    font-size: 16px;
    color: var(--tsh-ink);
    background: var(--tsh-surface);
    border: 1px solid var(--tsh-line);
    border-radius: var(--tsh-radius);
    box-shadow: var(--tsh-shadow-xs);
    transition: border-color .15s ease, box-shadow .15s ease;
}

html.tsh-modern textarea.form-control {
    height: auto;
    padding: 12px 16px;
}

html.tsh-modern .form-control::placeholder {
    color: var(--tsh-placeholder);
}

html.tsh-modern .form-control:hover {
    border-color: var(--tsh-line-hover);
}

/* !important only to beat the !important focus/size rules in custom.css */
html.tsh-modern .form-control:focus {
    border-color: var(--tsh-brand) !important;
    box-shadow: var(--tsh-ring) !important;
}

/* Disabled fields: a light grey fill and muted text so they read as
   unavailable next to the white surface of enabled ones */
html.tsh-modern .form-control:disabled,
html.tsh-modern fieldset:disabled .form-control,
html.tsh-modern .custom-select:disabled {
    color: var(--tsh-muted);
    background-color: var(--tsh-disabled-bg);
    border-color: var(--tsh-line);
    box-shadow: none;
    cursor: not-allowed !important; /* beats .click-cursor */
    opacity: 1;
}

html.tsh-modern input.form-control-lg {
    font-size: 16px !important;
}

/* Chrome autofill: keep the field colour instead of pale yellow/blue */
html.tsh-modern .form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px var(--tsh-surface) inset, var(--tsh-shadow-xs);
    -webkit-text-fill-color: var(--tsh-ink);
}

/* Legacy input-group + <icon-box> markup (reset / verify pages) */
html.tsh-modern .input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

html.tsh-modern .input-group-append .input-group-text,
html.tsh-modern .input-group-append .btn {
    height: var(--tsh-control-h);
    border-radius: 0 var(--tsh-radius) var(--tsh-radius) 0;
}

html.tsh-modern .input-group-text {
    background: var(--tsh-canvas);
    border-color: var(--tsh-line);
    color: var(--tsh-muted);
}

/* Leading-icon field:
   <div class="tsh-field"><i class="tsh-field__icon ..."></i><input class="form-control"></div> */
.tsh-field {
    position: relative;
}

.tsh-field__icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--tsh-placeholder);
    pointer-events: none;
    transition: color .15s ease;
}

html.tsh-modern .tsh-field .form-control {
    padding-left: 44px;
}

.tsh-field:focus-within .tsh-field__icon {
    color: var(--tsh-brand);
}

/* Trailing icon button inside a field (e.g. password show/hide, see js/tsh-ui.js) */
html.tsh-modern .tsh-field--action .form-control {
    padding-right: 52px;
}

.tsh-field__action {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 16px;
    color: var(--tsh-placeholder);
    background: transparent;
    border: 0;
    border-radius: calc(var(--tsh-radius) - 4px);
    transform: translateY(-50%);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.tsh-field__action:hover {
    color: var(--tsh-ink);
    background: var(--tsh-canvas);
}

.tsh-field__action:focus {
    outline: 0;
}

.tsh-field__action:focus-visible {
    color: var(--tsh-ink);
    box-shadow: var(--tsh-ring);
}

/* Hide Edge's built-in reveal button so there aren't two eyes */
.tsh-field--action input::-ms-reveal {
    display: none;
}

/* Checkbox (Bootstrap custom-control) */
html.tsh-modern .custom-control-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--tsh-muted);
    cursor: pointer;
}

html.tsh-modern .custom-control-label::before {
    border-radius: var(--tsh-radius-sm);
    border-color: var(--tsh-line-hover);
    background-color: var(--tsh-surface);
}

html.tsh-modern .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--tsh-brand);
    background-color: var(--tsh-brand);
}

/* The general label margin made each custom radio/checkbox 6px taller than its
   content, so in a centred row (Yes/No boxes) it rode 3px high */
html.tsh-modern .custom-control-label {
    margin-bottom: 0;
}

/* Radios stay round (the rule above squared them off) */
html.tsh-modern .custom-radio .custom-control-label::before {
    border-radius: 50%;
}

html.tsh-modern .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--tsh-brand);
    background-color: var(--tsh-brand);
}

html.tsh-modern .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: var(--tsh-ring);
}

/* Buttons */
html.tsh-modern .btn {
    font-weight: 600;
    border-radius: var(--tsh-radius);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

html.tsh-modern .btn:active {
    transform: translateY(1px);
}

/* Fixed height with no vertical padding: flex-centre the label, otherwise it
   sits at the top of the button (e.g. Compliance "Terminate" / "Update") */
html.tsh-modern .btn-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--tsh-control-h);
    padding: 0 24px;
    font-size: 16px;
}

html.tsh-modern .btn-lg.btn-block {
    display: flex;
}

html.tsh-modern .btn-primary {
    color: #fff;
    background: var(--tsh-brand);
    border-color: var(--tsh-brand);
    box-shadow: var(--tsh-shadow-sm);
}

html.tsh-modern .btn-primary:hover,
html.tsh-modern .btn-primary:focus {
    color: #fff;
    background: var(--tsh-brand-hover);
    border-color: var(--tsh-brand-hover);
}

html.tsh-modern .btn-primary:focus {
    box-shadow: var(--tsh-ring);
}

html.tsh-modern .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--tsh-brand-active);
    border-color: var(--tsh-brand-active);
}

/* Alerts & cards */
html.tsh-modern .alert {
    border-radius: var(--tsh-radius);
}

html.tsh-modern .card {
    border: 1px solid var(--tsh-divider);
    border-radius: var(--tsh-radius-lg);
    box-shadow: var(--tsh-shadow-sm);
}

/* Load mask (jquery.mloading) — blurred backdrop + floating card with a spinner.
   The plugin's gif <img> is hidden; the spinner is drawn on .mloading-bar::before.
   The plugin centres the bar itself with inline negative margins.
   Text arrives as "Logging<br/><strong>In</strong>..." and is shown on one line. */
html.tsh-modern .mloading.mloading-mask {
    background: color-mix(in srgb, var(--tsh-canvas) 55%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: tsh-fade-in .25s ease both;
}

html.tsh-modern .mloading-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 220px;
    min-height: 0;
    padding: 32px 40px 28px;
    font-family: var(--tsh-font-body);
    text-align: center;
    word-break: normal;
    background: var(--tsh-surface);
    border: 1px solid var(--tsh-divider);
    border-radius: var(--tsh-radius-lg);
    box-shadow: var(--tsh-shadow-lg);
    animation: tsh-pop .45s cubic-bezier(.16, 1, .3, 1) both;
}

html.tsh-modern .mloading-bar::before {
    content: "";
    width: 36px;
    height: 36px;
    border: 3px solid var(--tsh-brand-soft);
    border-top-color: var(--tsh-brand);
    border-radius: 50%;
    animation: tsh-spin .75s linear infinite;
}

html.tsh-modern .mloading-icon {
    display: none;
}

html.tsh-modern .mloading-text {
    float: none;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    color: var(--tsh-muted);
}

html.tsh-modern .mloading-text br {
    display: none;
}

/* !important to beat the brand colour forced in custom-<prefix>.css */
html.tsh-modern .mloading-text strong {
    margin-left: .25em;
    font-weight: 700;
    color: var(--tsh-heading) !important;
}

/* Small containers: spinner only */
html.tsh-modern .mloading-bar-sm {
    min-width: 0;
    padding: 16px;
}

@keyframes tsh-spin {
    to { transform: rotate(360deg); }
}

@keyframes tsh-fade-in {
    from { opacity: 0; }
}

@keyframes tsh-pop {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
}

/* SweetAlert (bootstrap-sweetalert) — same card, backdrop and motion as the
   load mask. The plugin centres the modal with margins (and sets margin-top
   from JS), so the width and margin-left change together. */
html.tsh-modern .sweet-overlay {
    background: color-mix(in srgb, var(--tsh-canvas) 55%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

html.tsh-modern .sweet-alert {
    box-sizing: border-box;
    width: 420px;
    margin-left: -210px;
    padding: 32px 32px 28px;
    font-family: var(--tsh-font-body);
    background: var(--tsh-surface);
    border: 1px solid var(--tsh-divider);
    border-radius: var(--tsh-radius-lg) !important; /* beats custom.css */
    box-shadow: var(--tsh-shadow-lg);
}

html.tsh-modern .sweet-alert.showSweetAlert:not([data-animation^="slide"]) {
    animation: tsh-pop .45s cubic-bezier(.16, 1, .3, 1);
}

/* Icons: keep the plugin's animated drawings, slightly smaller, in a modern palette */
html.tsh-modern .sweet-alert .sa-icon {
    zoom: .85;
    margin: 0 auto 24px;
}

html.tsh-modern .sweet-alert .sa-icon.sa-error { border-color: #f04438; }
html.tsh-modern .sweet-alert .sa-icon.sa-error .sa-line { background-color: #f04438; }
html.tsh-modern .sweet-alert .sa-icon.sa-warning { border-color: #f79009; }
html.tsh-modern .sweet-alert .sa-icon.sa-warning .sa-body,
html.tsh-modern .sweet-alert .sa-icon.sa-warning .sa-dot { background-color: #f79009; }
html.tsh-modern .sweet-alert .sa-icon.sa-info { border-color: #2e90fa; }
html.tsh-modern .sweet-alert .sa-icon.sa-info::before,
html.tsh-modern .sweet-alert .sa-icon.sa-info::after { background-color: #2e90fa; }
html.tsh-modern .sweet-alert .sa-icon.sa-success { border-color: #12b76a; }
html.tsh-modern .sweet-alert .sa-icon.sa-success .sa-line { background-color: #12b76a; }
html.tsh-modern .sweet-alert .sa-icon.sa-success .sa-placeholder { border-color: rgba(18, 183, 106, .2); }

/* The success tick is revealed by masks painted in the modal colour */
html.tsh-modern .sweet-alert .sa-icon.sa-success::before,
html.tsh-modern .sweet-alert .sa-icon.sa-success::after,
html.tsh-modern .sweet-alert .sa-icon.sa-success .sa-fix {
    background: var(--tsh-surface);
}

/* !important to beat custom.css */
html.tsh-modern .sweet-alert > h3 {
    margin: 0 0 8px !important;
    font-family: var(--tsh-font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: var(--tsh-title-tracking);
    color: var(--tsh-heading);
}

html.tsh-modern .sweet-alert .lead {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--tsh-muted) !important; /* beats Bootstrap's .text-muted */
}

html.tsh-modern .sweet-alert .form-group {
    margin: 20px 0 0;
}

html.tsh-modern .sweet-alert .sa-button-container {
    margin-top: 28px;
}

html.tsh-modern .sweet-alert .sa-confirm-button-container {
    display: inline-flex;
    flex-direction: row-reverse; /* cancel left, confirm right */
    gap: 8px;
}

html.tsh-modern .sweet-alert button.btn {
    min-width: 120px;
    height: 44px;
    margin: 0;
    padding: 0 22px;
    font-size: 15px;
}

/* Confirm is the brand primary whatever class the call passed (most pass
   btn-default / btn-tertiary), except destructive btn-danger confirms */
html.tsh-modern .sweet-alert button.confirm:not(.btn-danger) {
    color: #fff;
    background: var(--tsh-brand);
    border-color: var(--tsh-brand);
    box-shadow: var(--tsh-shadow-sm);
}

html.tsh-modern .sweet-alert button.confirm:not(.btn-danger):hover,
html.tsh-modern .sweet-alert button.confirm:not(.btn-danger):focus {
    background: var(--tsh-brand-hover);
    border-color: var(--tsh-brand-hover);
}

html.tsh-modern .sweet-alert button.confirm.btn-danger {
    color: #fff;
    background: var(--tsh-danger);
    border-color: var(--tsh-danger);
}

html.tsh-modern .sweet-alert button.cancel {
    color: var(--tsh-ink);
    background: var(--tsh-surface);
    border: 1px solid var(--tsh-line);
    box-shadow: var(--tsh-shadow-xs);
}

html.tsh-modern .sweet-alert button.cancel:hover {
    background: var(--tsh-canvas);
    border-color: var(--tsh-line-hover);
}

html.tsh-modern .sweet-alert button:focus {
    outline: 0;
    box-shadow: var(--tsh-ring);
}

@media (max-width: 767px) {
    html.tsh-modern .sweet-alert {
        width: auto;
        margin-left: 0;
        left: 16px;
        right: 16px;
        padding: 28px 20px 20px;
    }
}

/* Bootstrap-select — toggle matches .form-control, menu matches cards.
   The plugin copies the <select>'s .form-control onto its wrapper div, so
   strip the field styling there and keep it on the toggle button only. */
html.tsh-modern .bootstrap-select.form-control {
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

html.tsh-modern .bootstrap-select .dropdown-toggle .filter-option {
    position: static;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    height: auto;
    min-width: 0;
}

html.tsh-modern .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.tsh-modern .bootstrap-select > .dropdown-toggle {
    display: flex;
    align-items: center;
    height: var(--tsh-control-h);
    padding: 0 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--tsh-ink);
    background: var(--tsh-surface);
    border: 1px solid var(--tsh-line);
    border-radius: var(--tsh-radius);
    box-shadow: var(--tsh-shadow-xs);
}

html.tsh-modern .bootstrap-select > .dropdown-toggle:hover {
    border-color: var(--tsh-line-hover);
}

/* Neutral focus/open state: a brand-coloured border is harsh on dark brands
   (e.g. Vencorp). !important to beat bootstrap-select's own focus outline. */
html.tsh-modern .bootstrap-select > .dropdown-toggle:focus,
html.tsh-modern .bootstrap-select.show > .dropdown-toggle {
    border-color: var(--tsh-line-hover);
    box-shadow: var(--tsh-ring-neutral);
    outline: 0 !important;
}

/* Disabled select: bootstrap-select puts .disabled on the toggle; drop
   Bootstrap's .btn opacity fade in favour of the disabled field fill */
html.tsh-modern .bootstrap-select > .dropdown-toggle:is(.disabled, :disabled),
html.tsh-modern .bootstrap-select.disabled > .dropdown-toggle {
    color: var(--tsh-muted);
    background-color: var(--tsh-disabled-bg);
    border-color: var(--tsh-line);
    box-shadow: none;
    cursor: not-allowed !important; /* beats .click-cursor */
    opacity: 1;
}

html.tsh-modern .bootstrap-select > .dropdown-toggle:is(.disabled, :disabled) .filter-option-inner-inner {
    color: var(--tsh-muted);
}

html.tsh-modern .bootstrap-select > .dropdown-toggle.bs-placeholder,
html.tsh-modern .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option-inner-inner {
    color: var(--tsh-placeholder);
}

/* The gap keeps the caret off the text when the toggle is only as wide as its
   label (e.g. "Filter Notes"), where margin-left:auto resolves to 0 */
html.tsh-modern .bootstrap-select > .dropdown-toggle {
    gap: 10px;
}

html.tsh-modern .bootstrap-select .dropdown-toggle::after {
    margin-left: auto;
    color: var(--tsh-muted);
}

html.tsh-modern .bootstrap-select .dropdown-menu {
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--tsh-divider);
    border-radius: var(--tsh-radius);
    box-shadow: var(--tsh-shadow);
}

html.tsh-modern .bootstrap-select .dropdown-menu.inner {
    padding: 0;
    margin: 0;
    border: 0;
    box-shadow: none;
}

html.tsh-modern .bootstrap-select .bs-searchbox {
    padding: 0 0 6px;
}

html.tsh-modern .bootstrap-select .bs-searchbox .form-control {
    height: 40px;
    font-size: 14px;
    border-radius: calc(var(--tsh-radius) - 4px);
    box-shadow: none;
}

/* Search sits inside an already-open menu: neutral border, no ring */
html.tsh-modern .bootstrap-select .bs-searchbox .form-control:focus {
    border-color: var(--tsh-line-hover) !important;
    box-shadow: none !important;
}

html.tsh-modern .bootstrap-select .dropdown-menu.inner {
    scrollbar-width: thin;
    scrollbar-color: var(--tsh-line) transparent;
}

html.tsh-modern .bootstrap-select .dropdown-header {
    padding: 10px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tsh-muted);
}

html.tsh-modern .bootstrap-select .dropdown-item {
    padding: 9px 12px;
    font-size: 15px;
    color: var(--tsh-ink);
    border-radius: var(--tsh-radius-sm);
}

html.tsh-modern .bootstrap-select .dropdown-item:hover,
html.tsh-modern .bootstrap-select .dropdown-item:focus,
html.tsh-modern .bootstrap-select .dropdown-item.active {
    color: var(--tsh-heading);
    background: var(--tsh-brand-tint);
}

html.tsh-modern .bootstrap-select .dropdown-item.disabled {
    opacity: .5;
}

html.tsh-modern .bootstrap-select .dropdown-item .text-muted {
    margin-left: 6px;
    font-size: 12px;
}

html.tsh-modern .bootstrap-select .dropdown-divider {
    margin: 6px 0;
    border-color: var(--tsh-divider);
}

/* Outline buttons */
html.tsh-modern .btn-outline-secondary,
html.tsh-modern .btn-light {
    color: var(--tsh-ink);
    background: var(--tsh-surface);
    border-color: var(--tsh-line);
    box-shadow: var(--tsh-shadow-xs);
}

html.tsh-modern .btn-outline-secondary:hover,
html.tsh-modern .btn-light:hover {
    color: var(--tsh-heading);
    background: var(--tsh-canvas);
    border-color: var(--tsh-line-hover);
}

@media (prefers-reduced-motion: reduce) {
    html.tsh-modern * { transition: none !important; }
    html.tsh-modern .mloading-bar::before { animation-duration: 1.5s; }
}