/* FMST theme switcher — light mode via smart inversion. Applied per body-child (not ) so position:fixed navbars/modals keep working. */ #fmstTheme{ position:fixed;bottom:24px;left:24px;z-index:99999; width:46px;height:46px;border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(18,21,30,.92);color:#F97316; display:flex;align-items:center;justify-content:center; cursor:pointer;backdrop-filter:blur(10px); box-shadow:0 8px 28px rgba(0,0,0,.45); transition:transform .2s ease, background .25s; filter:none !important; } #fmstTheme:hover{transform:scale(1.1)} #fmstTheme svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #fmstTheme .sun{display:none} html.light #fmstTheme{background:rgba(255,255,255,.95);border-color:rgba(0,0,0,.15);color:#C2570A;box-shadow:0 8px 28px rgba(0,0,0,.18)} html.light #fmstTheme .moon{display:none} html.light #fmstTheme .sun{display:block} /* light mode: invert everything except the toggle... */ html.light{background:#E9ECF1} html.light body>*:not(#fmstTheme){filter:invert(1) hue-rotate(180deg)} /* ...then re-invert real imagery so photos, renders and logos stay true-colour */ html.light body>* :is(img,video,picture,iframe,canvas), html.light body>* [style*="background-image"]{filter:invert(1) hue-rotate(180deg)} /* guard: media inside an already re-inverted background element */ html.light body>* [style*="background-image"] :is(img,video){filter:none} @media(max-width:768px){ #fmstTheme{bottom:18px;left:16px;width:42px;height:42px} } @media print{#fmstTheme{display:none}}