:root {
    --primary-background: black;
    --text-color: white;
    --primary-color: rgba(10, 10, 20, .97);
    --secondary-color: #E8C5E8;
    --AbsoluteComponentBGColor: #343043;
    --color-danger: #d64545;
    --color-success: #2e9e5b;
    --color-warning: #ffc107;
    --text-lightgrey: grey;
    --primary-hover: color-mix(in srgb, var(--text-color) 10%, transparent);
    --border-standard: color-mix(in srgb, var(--text-color) 12%, transparent);
    --component-border: color-mix(in srgb, var(--AbsoluteComponentBGColor), var(--text-color) 30%);
    /* Outline on the focused window (.app-window.window-active); follows the accent unless set */
    --app-window-active-border: var(--secondary-color);
    --app-window-active-border-width: 1px;
    /* Primary action button (.btn-Inject). Defaults match the other buttons; set your own colours here or in the theme editor */
    --btn-inject-bg: var(--AbsoluteComponentBGColor);
    --btn-inject-border: var(--component-border);
    --btn-inject-text: var(--text-color);
    /* Bootstrap bridge: plain Bootstrap borders/links/text follow the theme (and user overrides) */
    --bs-body-color: var(--text-color);
    --bs-emphasis-color: var(--text-color);
    --bs-secondary-color: var(--text-lightgrey);
    --bs-border-color: var(--border-standard);
    --bs-border-color-translucent: var(--border-standard);
    --bs-link-color: var(--link-color);
    --bs-link-hover-color: var(--link-color);
    --bs-secondary-bg: var(--AbsoluteComponentBGColor);
    --bs-tertiary-bg: var(--AbsoluteComponentBGColor);
    --bs-code-color: var(--text-color);
    --bs-focus-ring-color: color-mix(in srgb, var(--focus-color) 25%, transparent);
    --dome-light: var(--secondary-color);
    --dome-shade: var(--primary-background);
    --gradient-angle: 135deg;
    --gradient-base-1: #0a0a12;
    --gradient-base-2: #12101a;
    --gradient-base-3: #150a12;
    --gradient-glow-indigo: rgba(45, 35, 85, .40);
    --gradient-glow-magenta: rgba(85, 25, 65, .35);
    --gradient-glow-crimson: rgba(65, 15, 35, .40);
    --gradient-glow-violet: rgba(35, 30, 70, .35);
    --Purpleburstbackgrounddark: linear-gradient(var(--gradient-angle), var(--gradient-base-1) 0%, var(--gradient-base-2) 50%, var(--gradient-base-3) 100%), radial-gradient(circle at 20% 30%, var(--gradient-glow-indigo), transparent 50%), radial-gradient(circle at 75% 25%, var(--gradient-glow-magenta), transparent 55%), radial-gradient(circle at 30% 70%, var(--gradient-glow-crimson), transparent 50%), radial-gradient(circle at 80% 80%, var(--gradient-glow-violet), transparent 55%);
    --shadow-sm: 0 2px 4px color-mix(in srgb, var(--primary-background) 10%, transparent);
    --shadow-md: 0 4px 6px color-mix(in srgb, var(--primary-background) 10%, transparent);
    --shadow-lg: 0 6px 16px color-mix(in srgb, var(--primary-background) 30%, transparent);
    --ApplicationBodyDefaultTransparency: 88%;
    --toggle-dot-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,0.4)'/%3e%3c/svg%3e");
    --toggle-dot-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    --font-system: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Consolas", "Monaco", monospace;
    --bps-font: 'Inter', system-ui, -apple-system, sans-serif;
    --font-magnification: 1.0;
    --text-size-smaller: calc(.7rem * var(--font-magnification, 1));
    --text-size-small: calc(.85rem * var(--font-magnification, 1));
    --text-size-normal: calc(1rem * var(--font-magnification, 1));
    --text-size-large: calc(1.5rem * var(--font-magnification, 1));
    --padding-default: 1rem;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --bps-radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 24px;
    --control-font-size: var(--text-size-small);
    --control-pad-y: 6px;
    --control-pad-x: 10px;
    --control-height: 2.25rem;
    --vh: 1vh;
    --bottom-nav-height: max(50px, calc(var(--vh) * 4.5));
    --sidebar-icon-width: 60px;
    --menu-open-width: 300px;
    --it-panel-h: 24rem;
    --interface-filter: none;
    --media-filter: none;
    --components-magnification: 1.0;
    --mini-control-size: calc(26px * var(--components-magnification, 1));
    --mini-control-icon: calc(var(--text-size-smaller) * var(--components-magnification, 1));
    --mini-switch-width: calc(30px * var(--components-magnification, 1));
    --mini-switch-height: calc(16px * var(--components-magnification, 1));
    --fb-sidebar-width: 250px;
    --fb-sidebar-mobile-height: 12rem;
    --fb-menu-min-width: 180px;
    --fb-panel-width: 28rem;
    --fb-search-width: calc(18rem * var(--font-magnification, 1));
    --fb-icon-size: calc(var(--text-size-normal) * var(--components-magnification, 1));
    --fb-media-max-height: 70vh;
    --desktop-window-top: 3vh;
    --desktop-window-width: min(95%, 98%);
    --desktop-window-height: 80%;
    /* General */
    /* Dark map. Inverts the map tiles (markers keep their colours). 1 = on, 0 = off. On/off settings end in -on and show as a switch in Settings > Theme. */
    --map-dark-on: 0;
    /* Map */
    /* Extra CSS filter on the map tiles, e.g. grayscale(1). */
    --map-tile-filter: none;
    /* Older themes set --map-tile-filter to this. Kept so they still work; use Dark map instead. */
    --map-tile-filter-dark: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.85);
    /* Desktop icons */
    /* Size of the desktop icon pictures. 56px = default. The label and the grid cells grow and shrink with it. */
    --desktop-icon-size: 56px;
    /* Space between desktop icons in the grid, both across and down. 18px = default. */
    --desktop-icon-spacing: 18px;
    /* Shadow colour behind desktop icons. transparent = no shadow; pick a colour (or rgba for see-through) to add one. */
    --desktop-icon-shadow-color: transparent;
    /* Horizontal offset of the desktop icon shadow. Negative = to the left. */
    --desktop-icon-offset-x: 0px;
    /* Vertical offset of the desktop icon shadow. Negative = upwards. */
    --desktop-icon-offset-y: 2px;
    /* Blur of the desktop icon shadow. 0px = hard edge. */
    --desktop-icon-blur: 4px;
    /* Colour that fills the transparent parts behind desktop icons. transparent = no fill. */
    --desktop-icon-bg-color: transparent;
    /* Transparency of the colour behind desktop icons. 100% = invisible, 0% = solid. */
    --desktop-icon-bg-transparency: 100%;
    /* Colour of the border around desktop icons. transparent = no border. */
    --desktop-icon-border-color: transparent;
    /* Thickness of the border around desktop icons, in px. 0px = no border. Drawn outside the icon, so the icon keeps its size. */
    --desktop-icon-border-width: 0px;
    /* Transparency of the border around desktop icons. 100% = invisible, 0% = solid. */
    --desktop-icon-border-transparency: 100%;
    /* Outline colour around desktop icon names. transparent = no outline. */
    --desktop-label-outline-color: #000;
    /* Thickness of the outline around desktop icon names. 0px = no outline. */
    --desktop-label-outline-width: 1px;
    /* Soft shadow under desktop icon names. transparent = no shadow. */
    --desktop-label-shadow-color: rgba(0, 0, 0, .8);
    /* Vertical offset of the shadow under desktop icon names. */
    --desktop-label-offset-y: 2px;
    /* Blur of the shadow under desktop icon names. */
    --desktop-label-blur: 3px;
    /* Icon groups */
    /* Glass colour of an open icon group window. The group icons on the desktop use the same glass. */
    --desktop-group-color: #ffffff;
    /* Transparency of the icon group glass. 100% = invisible, 0% = solid. */
    --desktop-group-transparency: 78%;
    /* Blur behind an open icon group window (the group icons on the desktop get half of it). 0px = no blur. */
    --desktop-group-blur: 18px;
    /* Colour that dims the desktop behind an open icon group window. */
    --desktop-group-backdrop-color: #000000;
    /* Transparency of the colour behind an open icon group window. 100% = no dimming, 0% = solid. */
    --desktop-group-backdrop-transparency: 75%;
    /* System menu */
    /* Minimum width of the system menu (the gear button menu in the main layout). */
    --system-menu-min-width: 18rem;
    /* Minimum height of the system menu. 0px = as tall as its content. */
    --system-menu-min-height: 0px;
    /* Start button */
    /* Minimum width of the start button in the bottom bar. 0px = automatic (6vh, capped at the bar height). */
    --start-button-min-width: 0px;
    /* Minimum height of the start button in the bottom bar. 0px = automatic. A larger value can make it taller than the bar. */
    --start-button-min-height: 0px;
    /* Colour roles */
    /* Background of selected items: highlighted text, the selected control in the designer, the selected calendar day. Follows the accent unless set. */
    --selection-color: var(--secondary-color);
    /* Text on top of the selection colour. */
    --selection-text-color: var(--primary-background);
    /* Colour of links. Follows the accent unless set. */
    --link-color: var(--secondary-color);
    /* Border and glow on the input or button that has keyboard focus. Follows the accent unless set. */
    --focus-color: var(--secondary-color);
    /* Background inside text boxes. transparent = see-through to the window behind. */
    --input-background: transparent;
    /* Text colour inside text boxes. */
    --input-text-color: var(--text-color);
    /* Background of tooltips and hover cards. */
    --tooltip-background: var(--Purpleburstbackgrounddark);
    /* Text colour in tooltips and hover cards. */
    --tooltip-text-color: var(--text-color);
    /* Window titlebar */
    /* Titlebar colour of the focused window. A colour, another variable or a gradient, e.g. linear-gradient(90deg, #223, #446). */
    --titlebar-color: var(--Purpleburstbackgrounddark);
    /* Titlebar colour of windows that are not focused. Same as the titlebar unless set. */
    --titlebar-inactive-color: var(--titlebar-color);
    /* Text colour in window titlebars. */
    --titlebar-text-color: var(--text-color);
    /* How solid the titlebar colour is. 100% = solid, lower lets the blurred background show through. */
    --titlebar-opacity: 55%;
    /* Blur of what is behind the titlebar (frosted glass). 0px = no blur. */
    --titlebar-blur: 20px;
    /* Glossy light sheen over the titlebar. 1 = on, 0 = off. */
    --titlebar-gloss-on: 1;
    /* Taskbar */
    /* Taskbar background. A colour, another variable or a gradient, e.g. linear-gradient(90deg, #112, #224). */
    --taskbar-color: var(--primary-background);
    /* How solid the taskbar colour is. 100% = solid, lower lets the desktop show through. */
    --taskbar-opacity: 85%;
    /* Blur of what is behind the taskbar (frosted glass). 0px = no blur. */
    --taskbar-blur: 0px;
    /* Glossy light sheen over the taskbar, like the window titlebars. 1 = on, 0 = off. */
    --taskbar-gloss-on: 0;
}

/* Highlighted text follows the theme's selection colours. */
::selection {
    background-color: var(--selection-color);
    color: var(--selection-text-color)
}

@keyframes controlFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes prefSpinner {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes prefToastSlideIn {
    0% {
        transform: translateX(100%);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes jump {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

@keyframes error-blink {
    0%,to {
        background-color: color-mix(in srgb,var(--primary-background) 40%,transparent);
        box-shadow: 0 0 0 transparent
    }

    50% {
        background-color: var(--color-danger);
        box-shadow: 0 0 15px var(--color-danger)
    }
}

/* "Already open" blink: taskbar button + interface "Minimized" panel (windowDrag.js dcAttention.blink) */
@keyframes dc-attention-blink {
    0%,to {
        background-color: color-mix(in srgb,var(--primary-color) 10%,transparent);
        box-shadow: 0 0 0 transparent
    }

    50% {
        background-color: color-mix(in srgb,var(--secondary-color) 55%,transparent);
        box-shadow: 0 0 12px color-mix(in srgb,var(--secondary-color) 70%,transparent)
    }
}

.dc-attention {
    animation: dc-attention-blink .6s ease-in-out 3 !important
}

@keyframes bps-next-glow {
    0%,to {
        transform: scale(1);
        background-color: transparent;
        color: var(--text-color);
        text-shadow: 0 0 0 transparent
    }

    50% {
        transform: scale(1.2);
        background-color: color-mix(in srgb,var(--secondary-color) 40%,transparent);
        color: var(--text-color);
        box-shadow: 0 0 15px color-mix(in srgb,var(--secondary-color) 60%,transparent);
        text-shadow: 0 0 10px color-mix(in srgb,var(--secondary-color) 80%,transparent)
    }
}

@keyframes bps-filling-pulse {
    0%,to {
        transform: scale(1);
        color: var(--text-color)
    }

    40% {
        transform: scale(1.5);
        color: var(--text-color);
        text-shadow: 0 0 12px var(--secondary-color)
    }
}

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

@keyframes ts-toast-in {
    0% {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes windowFadeIn {
    0% {
        opacity: 0;
        transform: scale(.97)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes windowFadeOut {
    0% {
        opacity: 1;
        transform: scale(1)
    }

    to {
        opacity: 0;
        transform: scale(.96)
    }
}


html {
    background: var(--Purpleburstbackgrounddark);
    background-attachment: fixed;
    filter: var(--interface-filter)
}

.page, body, html {
    overflow: hidden;
    margin: 0;
    padding: 0
}

body, html {
    height: 100%;
    font-family: var(--font-system)
}

body {
    color: var(--text-color);
    font-size: var(--text-size-normal)
}

.page {
    display: flex;
    flex-direction: column;
    height: calc(var(--vh)*100);
    width: 100vw
}

.content, article.content, main {
    flex: 1;
    position: relative;
    width: 100%;
    overflow: hidden
}

.content, article.content {
    height: 100%;
    margin: 0;
    padding: 0;
    isolation: isolate
}

.container-fluid, main {
    height: 100%;
    display: flex;
    flex-direction: column
}

.bps-app-container {
    container-type: inline-size;
    container-name: bps-app;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden
}

.bps-editor-container {
    container-type: inline-size;
    container-name: bps-editor
}

* {
    scrollbar-width: thin !important
}

body, html {
    scrollbar-color: var(--secondary-color) var(--AbsoluteComponentBGColor) !important
}

::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    display: block !important
}

::-webkit-scrollbar-track {
    background: var(--AbsoluteComponentBGColor) !important
}

::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color) !important;
    border-radius: 10px !important;
    border: 2px solid var(--AbsoluteComponentBGColor) !important
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: color-mix(in srgb,var(--secondary-color),var(--text-color) 20%) !important
    }

.bps-scroll-hide::-webkit-scrollbar, .day-stack::-webkit-scrollbar, .task-bar-container::-webkit-scrollbar {
    display: none
}

.bps-scroll-hide {
    -ms-overflow-style: none;
    scrollbar-width: none
}

html[style*=invert] .exclude-invert, html[style*=invert] .startmenu-bee-icon, html[style*=invert] iframe, html[style*=invert] img, html[style*=invert] video {
    filter: var(--media-filter) !important
}

html[style*=invert] .floating-menu-log-container {
    filter: none !important
}

h1, h2, h3, h4, h5, h6, input, label, select {
    color: var(--text-color)
}

.form-select, input, select, textarea {
    background-color: var(--primary-background);
    font-size: var(--text-size-smaller)
}

input, select {
    border-color: var(--border-standard)
}

.form-text {
    color: var(--text-color)
}

.text {
    color: var(--text-color)
}

.text-muted {
    color: var(--text-lightgrey)
}

.fw, .text-truncate {
    color: var(--text-color)
}

.button, .modal-title, .title {
    color: var(--text-color)
}

.bps-monospace {
    font-family: var(--font-mono);
    font-size: var(--text-size-small);
    line-height: 1.4
}

.code-editor {
    font-family: monospace;
    font-size: var(--text-size-smaller)
}

.bps-icon-btn, .form-control {
    border: 1px solid var(--component-border)
}

.form-control {
    border-radius: var(--bps-radius);
    padding: 6px 10px;
    font-size: var(--control-font-size);
    transition: border-color .15s ease;
    background-color: var(--AbsoluteComponentBGColor)
}

    .form-control:focus {
        outline: 0;
        background-color: var(--primary-hover)
    }

.form-control-sm {
    border-radius: var(--bps-radius);
    border: 1px solid var(--text-lightgrey);
    padding: 6px 10px;
    font-size: var(--control-font-size);
    transition: border-color .15s ease;
    background: var(--Purpleburstbackgrounddark);
    color: var(--text-color)
}

    .form-control-sm:focus {
        border-color: var(--secondary-color);
        box-shadow: 0 0 0 .15rem color-mix(in srgb,var(--secondary-color) 12%,transparent);
        outline: 0;
        background-color: var(--primary-background);
        color: var(--text-color)
    }

.form-control.is-valid, .form-control.valid {
    background-color: var(--primary-background) !important;
    color: var(--text-color) !important
}

    .form-control.is-valid::placeholder, .form-control.valid::placeholder {
        color: var(--text-color) !important;
        opacity: .6
    }

input[type=date].form-control, input[type=datetime-local].form-control, input[type=month].form-control, input[type=time].form-control, input[type=week].form-control {
    background: var(--Purpleburstbackgrounddark);
    color: var(--text-color);
    border: 1px solid color-mix(in srgb,var(--text-lightgrey),var(--primary-background) 35%);
}

    input[type=date].form-control::-webkit-calendar-picker-indicator, input[type=datetime-local].form-control::-webkit-calendar-picker-indicator, input[type=month].form-control::-webkit-calendar-picker-indicator, input[type=time].form-control::-webkit-calendar-picker-indicator, input[type=week].form-control::-webkit-calendar-picker-indicator {
        filter: var(--picker-icon-filter, none);
        opacity: .75;
        cursor: pointer;
        transition: opacity .15s ease
    }

        input[type=date].form-control::-webkit-calendar-picker-indicator:hover, input[type=datetime-local].form-control::-webkit-calendar-picker-indicator:hover, input[type=month].form-control::-webkit-calendar-picker-indicator:hover, input[type=time].form-control::-webkit-calendar-picker-indicator:hover, input[type=week].form-control::-webkit-calendar-picker-indicator:hover {
            opacity: 1
        }

input[type=color]::-webkit-color-swatch-wrapper {
    padding: 0
}

input[type=color]::-webkit-color-swatch {
    border: 1px solid var(--component-border);
    border-radius: var(--radius-sm)
}

.badge, .btn-primary {
    background-color: var(--AbsoluteComponentBGColor);
    border-color: var(--component-border);
    color: var(--text-color)
}

    .badge:focus, .badge:hover, .btn-primary:focus, .btn-primary:hover {
        background-color: var(--primary-hover);
        border-color: var(--component-border);
        color: var(--text-color)
    }

.btn-outline-danger, .btn-secondary, sortingselect {
    border-color: var(--component-border)
}

.btn-outline-danger {
    color: var(--color-danger)
}

    .btn-outline-danger:hover {
        background: color-mix(in srgb,var(--color-danger) 40%,var(--primary-color));
        color: var(--text-color)
    }

.btn-secondary {
    background-color: var(--AbsoluteComponentBGColor);
    color: var(--text-color)
}

    .btn-secondary:focus, .btn-secondary:hover {
        background-color: var(--primary-hover);
        border-color: var(--component-border);
        color: var(--text-color)
    }

    .btn-primary.disabled, .btn-primary:disabled, .btn-secondary.disabled, .btn-secondary:disabled {
        background-color: color-mix(in srgb,var(--primary-color),var(--text-lightgrey) 12%);
        border-color: color-mix(in srgb,var(--primary-color),var(--text-lightgrey) 22%);
        color: var(--text-color);
        opacity: .7
    }

/* Native file pickers (InputFile): the browser's "Choose file" button follows .btn-secondary.
   Selectors mirror Bootstrap's .form-control ones so they win on specificity. */
input[type=file]::file-selector-button, .form-control::file-selector-button {
    background-color: var(--AbsoluteComponentBGColor);
    color: var(--text-color);
    border-color: var(--component-border)
}

    input[type=file]:hover::file-selector-button, .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
        background-color: var(--primary-hover)
    }

.btn-sm {
    background: color-mix(in srgb,var(--primary-background) 6%,transparent);
    border-color: var(--component-border);
    color: var(--text-color)
}

    .btn-sm:hover {
        background: color-mix(in srgb,var(--primary-background) 10%,transparent)
    }

    .btn-outline-light, .btn-outline-primary, .btn-sm.btn-outline-light {
        background-color: transparent;
        border: 1px solid color-mix(in srgb,var(--text-color) 50%,transparent);
        color: var(--text-lightgrey);
        padding: .25rem .5rem;
        margin-left: .5rem;
        border-radius: var(--radius-xs);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1rem;
        min-height: 1rem
    }

        .btn-outline-light:hover, .btn-outline-primary:hover {
            background-color: var(--primary-hover);
            border-color: color-mix(in srgb,var(--text-color) 80%,transparent);
            color: var(--text-color);
            transform: scale(.97)
        }

        .btn-outline-light .oi {
            font-size: var(--text-size-small)
        }

/* Pressed / focus / disabled states of the plain Bootstrap buttons. Their hover colours are
   set above, but Bootstrap's :active and :focus-visible rules read --bs-btn-* and flashed
   Bootstrap blue/grey on click. */
.btn-primary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-light, .btn-outline-danger {
    --bs-btn-active-color: var(--text-color);
    --bs-btn-active-bg: color-mix(in srgb,var(--AbsoluteComponentBGColor),var(--text-color) 18%);
    --bs-btn-active-border-color: var(--component-border);
    --bs-btn-disabled-color: var(--text-lightgrey);
    --bs-btn-disabled-border-color: var(--component-border);
    --bs-btn-focus-box-shadow: 0 0 0 .2rem color-mix(in srgb,var(--secondary-color) 25%,transparent)
}

.btn-outline-danger {
    --bs-btn-active-bg: color-mix(in srgb,var(--color-danger) 55%,var(--primary-color))
}

/* Primary action button. Its own class with its own colours (--btn-inject-* in :root,
   editable in the theme editor); by default it looks exactly like .btn-secondary. Hover,
   pressed and disabled are derived from those colours, so a custom colour gets matching
   states. Set via Bootstrap's --bs-btn-* variables and pinned per state so .btn-sm etc.
   can't override it. */
.btn.btn-Inject {
    --bs-btn-color: var(--btn-inject-text);
    --bs-btn-bg: var(--btn-inject-bg);
    --bs-btn-border-color: var(--btn-inject-border);
    --bs-btn-hover-color: var(--btn-inject-text);
    --bs-btn-hover-bg: color-mix(in srgb,var(--btn-inject-bg),var(--text-color) 10%);
    --bs-btn-hover-border-color: var(--btn-inject-border);
    --bs-btn-active-color: var(--btn-inject-text);
    --bs-btn-active-bg: color-mix(in srgb,var(--btn-inject-bg),var(--text-color) 18%);
    --bs-btn-active-border-color: var(--btn-inject-border);
    --bs-btn-disabled-color: var(--btn-inject-text);
    --bs-btn-disabled-bg: var(--btn-inject-bg);
    --bs-btn-disabled-border-color: var(--btn-inject-border);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color)
}

    .btn.btn-Inject:hover {
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
        color: var(--bs-btn-hover-color)
    }

    .btn.btn-Inject:active, .btn.btn-Inject.active {
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        color: var(--bs-btn-active-color)
    }

    .btn.btn-Inject:disabled, .btn.btn-Inject.disabled {
        background-color: var(--bs-btn-disabled-bg);
        border-color: var(--bs-btn-disabled-border-color);
        color: var(--bs-btn-disabled-color);
        opacity: .6
    }

    .btn.btn-Inject:focus-visible {
        box-shadow: 0 0 0 .2rem color-mix(in srgb,var(--btn-inject-border) 50%,transparent)
    }

/* Bootstrap's close "X" is a black SVG background. Use it as a mask filled with the
   theme text colour instead of inverting it, so it shows on light and dark themes alike
   (btn-close-white included). */
.btn-close {
    filter: none !important;
    background: var(--text-color) !important;
    -webkit-mask: var(--bs-btn-close-bg) center / 1em auto no-repeat;
    mask: var(--bs-btn-close-bg) center / 1em auto no-repeat
}

table.table, table.table tbody, table.table td, table.table th, table.table thead, table.table tr {
    background-color: var(--primary-background) !important;
    color: color-mix(in srgb,var(--text-color),var(--primary-background) 12%) !important;
    border-color: color-mix(in srgb,var(--AbsoluteComponentBGColor),var(--primary-background) 45%) !important
}

img.rounded-circle.shadow-sm.me-2 {
    border: 2px solid var(--border-standard)
}

.navbar {
    z-index: 1000;
    padding: .5rem 1rem
}

.navbar {
    position: relative
}

.modal-backdrop, .modal-dialog, .sidebar {
    z-index: 1000;
    position: relative
}

/* ===== Leaflet ===== */

.leaflet-container, .leaflet-map-pane, .leaflet-objects-pane, .leaflet-overlay-pane, .leaflet-pane, .leaflet-popup-pane, .leaflet-shadow-pane, .leaflet-tile-pane {
    z-index: 10
}

.leaflet-popup {
    z-index: 11
}

/* Only the tile pane: markers, popups and drawn shapes live in other panes
   and keep their real colours. --map-dark-on (0/1) switches the dark basemap
   on the tile layers; --map-tile-filter is an extra free filter on the pane. */
.leaflet-tile-pane {
    filter: var(--map-tile-filter, none);
}

    .leaflet-tile-pane > .leaflet-layer {
        filter: invert(var(--map-dark-on, 0)) hue-rotate(calc(var(--map-dark-on, 0) * 180deg)) brightness(calc(1 - var(--map-dark-on, 0) * .08)) contrast(calc(1 - var(--map-dark-on, 0) * .1)) saturate(calc(1 - var(--map-dark-on, 0) * .15));
    }

/* Leaflet's own default is #ddd, which flashes white while tiles load. */
.leaflet-container {
    background: var(--primary-background);
}

.leaflet-control-attribution {
    background: color-mix(in srgb, var(--primary-background) 70%, transparent) !important;
    color: var(--text-lightgrey) !important;
}

    .leaflet-control-attribution a {
        color: var(--text-color) !important;
    }

.leaflet-bar a,
.leaflet-control-custom {
    background: var(--AbsoluteComponentBGColor) !important;
    color: var(--text-color) !important;
    border-color: var(--component-border) !important;
}

    .leaflet-bar a:hover,
    .leaflet-control-custom:hover {
        background: var(--primary-hover) !important;
        color: var(--text-color) !important;
    }

    .leaflet-bar a.leaflet-disabled {
        background: color-mix(in srgb, var(--AbsoluteComponentBGColor) 60%, transparent) !important;
        color: var(--text-lightgrey) !important;
    }

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--primary-color) !important;
    color: var(--text-color) !important;
    box-shadow: var(--shadow-lg);
}

.leaflet-popup-content-wrapper {
    border: 1px solid var(--component-border);
    border-radius: var(--bps-radius);
}

.leaflet-popup-close-button {
    color: var(--text-lightgrey) !important;
}

    .leaflet-popup-close-button:hover {
        color: var(--text-color) !important;
    }

.leaflet-container a.leaflet-popup-close-button {
    background: transparent !important;
}

.menu-button {
    color: var(--text-color)
}



.logo {
    margin-left: 1rem;
    font-size: var(--text-size-normal);
    font-weight: 600;
    letter-spacing: .5px;
    text-shadow: 0 2px 4px color-mix(in srgb,var(--primary-background) 20%,transparent)
}

.nav-item, .nav-link {
    display: flex;
    align-items: center
}

.nav-item {
    padding: .25rem .9rem;
    margin: 0 .15rem
}

    .nav-item a, .nav-link {
        transition: all .2s ease
    }

    .nav-item a {
        margin: .2rem 0
    }

        .nav-item a:hover {
            transform: translateX(5px)
        }

.nav-link {
    color: var(--text-color);
    text-decoration: none;
    gap: .25rem;
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    font-weight: 400
}

    .nav-link.active, .nav-link:hover {
        background-color: var(--primary-color);
        color: var(--text-color)
    }

    .nav-link:hover {
        transform: translateY(-2px)
    }

    .nav-link.active {
        border: 0;
        padding: 12px 18px;
        border-radius: var(--radius-md);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        transition: background .3s,transform .2s
    }

.nav-item .btn-outline-light {
    position: relative;
    width: 20px;
    height: 18px;
    padding: 0;
    margin-left: 5px;
    border: 1px solid var(--border-standard);
    border-radius: var(--radius-xs);
    background-color: var(--primary-background);
    box-shadow: 0 1px 2px color-mix(in srgb,var(--primary-background) 10%,transparent)
}

    .nav-item .btn-outline-light::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background-color: var(--secondary-color);
        border-top-left-radius: 1px;
        border-top-right-radius: 1px
    }

    .nav-item .btn-outline-light .oi-external-link {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-40%);
        font-size: var(--text-size-smaller);
        color: var(--text-color)
    }

    .nav-item .btn-outline-light:hover {
        background-color: var(--primary-hover);
        border-color: var(--secondary-color)
    }

        .nav-item .btn-outline-light:hover::after {
            content: "Open in new window";
            position: absolute;
            bottom: -25px;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--primary-color);
            color: var(--text-lightgrey);
            padding: 3px 6px;
            border-radius: 3px;
            font-size: var(--text-size-smaller);
            white-space: nowrap;
            z-index: 100
        }

    .nav-item .btn-outline-light:active {
        background-color: var(--primary-hover);
        transform: translateY(1px)
    }

.slide-menu {
    position: fixed;
    top: 48px;
    left: 0;
    width: 250px;
    height: calc(100vh - 48px);
    background: linear-gradient(to bottom,var(--primary-color),var(--primary-color),color-mix(in srgb,var(--primary-color) 87%,transparent));
    z-index: 1000;
    box-shadow: 4px 0 8px color-mix(in srgb,var(--primary-background) 10%,transparent);
    color: var(--text-lightgrey);
    overflow: visible
}

    .slide-menu.show {
        display: block
    }

.submenu-list {
    display: flex;
    flex-direction: column;
    margin-top: .25rem
}

.submenu-item {
    padding: .4rem .5rem;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: var(--text-size-small);
    transition: background-color .2s,color .2s;
    gap: .75rem;
    font-weight: 500;
    position: relative
}

    .submenu-item:hover {
        background-color: var(--primary-hover);
        color: var(--text-color);
        transform: translateX(4px)
    }

    .submenu-item.disabled {
        color: color-mix(in srgb,var(--text-color) 50%,transparent)
    }

    .submenu-item .icon-small {
        margin-right: .5rem;
        transition: color .2s
    }

    .submenu-item, .submenu-item:hover .icon-small {
        color: var(--text-color)
    }

.rosell-menu-wrapper {
    position: relative;
    z-index: 0;
    transition: z-index .1s ease
}

    .rosell-menu-wrapper:hover {
        z-index: 9999
    }

.rosell-menu, .rosell-submenu {
    background: var(--primary-color);
    border-radius: var(--bps-radius);
    padding: 4px
}

.rosell-menu {
    list-style: none;
    margin: 0;
    font-size: var(--text-size-normal)
}

    .rosell-menu, .rosell-menu.menu-active {
        display: flex;
        flex-wrap: wrap;
        position: relative
    }

.rosell-submenu {
    left: 0;
    right: auto;
    position: absolute;
    top: 100%;
    min-width: 180px;
    border: 1px solid var(--border-standard);
    box-shadow: var(--shadow-lg);
    display: block
}

    .rosell-submenu > .rosell-menu {
        display: block
    }

    .rosell-submenu .rosell-submenu {
        top: 0;
        left: 100%
    }

.rosell-menu-item {
    position: relative
}

    .rosell-menu-item.open-left > .rosell-submenu {
        left: auto;
        right: 0
    }

        .rosell-menu-item.open-left > .rosell-submenu .rosell-submenu {
            left: auto;
            right: 100%
        }

.rosell-menu-label {
    padding: 10px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: color-mix(in srgb,var(--text-color),var(--primary-background) 13%);
    background-color: transparent;
    transition: background .2s ease
}

    .rosell-menu-label:focus, .rosell-menu-label:hover {
        color: var(--text-color);
        background-color: var(--primary-hover)
    }

.floating-menu-options {
    color: var(--text-color);
    display: flex;
    z-index: 2147483647
}

.floating-menu-options {
    position: absolute;
    background-color: color-mix(in srgb,var(--primary-color) 90%,transparent);
    border: 1px solid var(--border-standard);
    border-radius: var(--bps-radius);
    box-shadow: var(--shadow-lg);
    padding: .5rem 0;
    flex-direction: column;
    min-width: var(--system-menu-min-width, 18rem);
    min-height: var(--system-menu-min-height, 0px);
    font-family: var(--font-system);
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden
}

.floating-menu-options.start-menu {
    position: absolute;
    width: auto;
    min-width: min(var(--system-menu-min-width, 18rem), 92vw);
    min-height: min(var(--system-menu-min-height, 0px), 80vh);
    max-width: 92vw;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden
}

.floating-menu-options .starttop-header {
    margin: -.5rem 0 .5rem;
    border-top-left-radius: var(--bps-radius);
    border-top-right-radius: var(--bps-radius)
}

.floating-menu-divider {
    height: 1px;
    background-color: var(--border-standard);
    margin: .5rem 0
}

.floating-menu-item:hover, .floating-menu-options .floating-menu-divider {
    background-color: var(--primary-hover)
}

.floating-menu-item, .floating-menu-item button {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer
}

.floating-menu-item {
    padding: .5rem 1rem;
    justify-content: flex-start;
    border: 0;
    border-left: 4px solid transparent;
    background: 0 0;
    text-align: left;
    transition: background-color .2s ease,color .2s ease,border-left-color .2s ease;
    color: var(--text-color);
    font-size: var(--text-size-small);
    border-radius: .25rem;
    gap: .5rem
}

    .floating-menu-item:hover {
        color: var(--text-color);
        border-left-color: var(--secondary-color)
    }

    .floating-menu-item i {
        font-size: var(--text-size-normal);
        margin-right: .5rem
    }

    .floating-menu-item button {
        all: unset;
        color: inherit;
        font: inherit
    }

.position-text {
    font-size: var(--text-size-smaller);
    font-weight: 600;
    color: var(--text-color);
    padding: .5rem 1rem .25rem
}

.floating-menu-log-container {
    margin: .5rem 1rem;
    padding: 0;
    width: calc(100% - 2rem);
    height: 300px;
    min-height: 150px;
    background-color: color-mix(in srgb,var(--primary-background) 20%,transparent);
    border: 1px solid var(--primary-hover);
    border-radius: var(--radius-sm);
    overflow-y: auto;
    overflow-x: hidden;
    font-family: var(--font-mono);
    font-size: var(--text-size-smaller);
    resize: vertical
}

.floating-panel-dragging {
    opacity: .55;
    box-shadow: var(--shadow-md)
}

.log-entry {
    padding: 6px 10px;
    word-break: break-all;
    line-height: 1.4;
    border-bottom: 1px solid color-mix(in srgb,var(--text-color) 3%,transparent)
}

.log-even {
    background-color: color-mix(in srgb,var(--text-color) 5%,transparent)
}

.log-odd {
    background-color: transparent
}

.log-time {
    color: var(--text-color);
    margin-right: 4px;
    opacity: .8
}

.log-error, .log-error .log-time {
    color: var(--color-danger) !important
}

.log-error {
    font-weight: 700
}

    .log-error .log-time {
        opacity: 1
    }

    .log-error.log-even {
        background-color: color-mix(in srgb,var(--color-danger) 10%,transparent)
    }

.blink-error {
    animation: error-blink 1s infinite !important;
    border: 2px solid var(--text-color) !important
}

/* Gear button: new chat message / invitation / Home page guestbook entry or comment. Same pulse as blink-error, accent colour. */
.blink-notify {
    animation: notify-blink 1.4s infinite;
    border: 2px solid var(--text-color)
}

@keyframes notify-blink {
    0%,to {
        background-color: color-mix(in srgb,var(--primary-background) 40%,transparent);
        box-shadow: 0 0 0 transparent
    }

    50% {
        background-color: var(--secondary-color);
        box-shadow: 0 0 15px var(--secondary-color)
    }
}

.start-hint {
    position: fixed;
    bottom: 60px;
    left: .5rem;
    width: 200px;
    font-size: var(--text-size-normal);
    font-weight: 500;
    color: var(--text-color);
    background: color-mix(in srgb,var(--primary-background) 75%,transparent);
    padding: .5rem;
    border-radius: var(--bps-radius);
    pointer-events: none;
    z-index: 1500;
    animation: jump 1s infinite;
    opacity: 1;
    transition: opacity .5s ease
}

    .start-hint.hidden {
        opacity: 0
    }

.start-menu, .starttop-header {
    background-color: color-mix(in srgb,var(--primary-color) 90%,transparent)
}

.start-menu {
    position: fixed;
    bottom: 48px;
    left: 1rem;
    width: calc(450px - 1rem);
    max-width: calc(100% - 2rem);
    max-height: 70vh;
    color: var(--text-color);
    border: 1px solid var(--border-standard);
    border-radius: var(--bps-radius);
    box-shadow: var(--shadow-lg);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 2147483647;
    font-family: var(--font-system)
}

    .start-menu.show {
        display: flex
    }

.starttop-header {
    position: relative;
    display: flex;
    align-items: center;
    padding: .5rem 1rem;
    min-height: 56px;
    border-bottom: 1px solid var(--border-standard)
}

    .mobile-menu-header::before, .starttop-header::before {
        content: "";
        position: absolute;
        background: url(/images/2.jpg)center center/cover no-repeat;
        z-index: 0
    }

    .starttop-header::before {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .1
    }

    .starttop-header > * {
        position: relative;
        z-index: 1
    }

.tile-text, .username {
    font-weight: 500;
    font-size: var(--text-size-small);
    color: var(--text-color);
    white-space: nowrap
}

.username {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis
}

.icon-small, .section-title {
    color: var(--text-color);
    font-size: var(--text-size-normal)
}

.icon-small {
    margin-right: .5rem
}

.section-title {
    margin-bottom: .5rem;
    display: flex;
    align-items: center
}

.start-pinned {
    padding: .75rem 1rem;
    flex-grow: 1;
    overflow-y: auto
}

.start-footer {
    padding: .5rem 1rem;
    border-top: 1px solid var(--border-standard)
}

.interface-list {
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.settings-disabled {
    opacity: .6
}

    .settings-disabled .tile-icon.disabled {
        opacity: .4
    }

.tile, .tile-icon, .tile:hover .tile-icon, .tile:hover .tile-text {
    color: var(--text-color)
}

.tile {
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border-left: 4px solid transparent;
    background-color: transparent;
    transition: transform .15s ease,box-shadow .15s ease,background-color .15s ease;
    transform-origin: left center;
    position: relative;
    z-index: 1;
    margin-left: 10px
}

.tile-icon {
    font-size: var(--text-size-normal);
    margin-right: .75rem
}

.tile:hover, a.tile:hover, button.tile:hover {
    background-color: var(--primary-hover);
    color: var(--text-color);
    border-left-color: var(--secondary-color);
    transform: scale(1.1) translateX(2px);
    box-shadow: 0 4px 12px color-mix(in srgb,var(--primary-background) 35%,transparent);
    z-index: 2;
    margin-left: 30px
}

    .tile:hover .oi.tile-icon {
        transform: scale(1.1);
        display: inline-block;
        transition: transform .15s ease,margin-right .15s ease;
        margin-right: 10px
    }

.tile-icon-img {
    width: 1.1em;
    height: 1.1em;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb,var(--text-color) 40%,transparent);
    vertical-align: middle;
    transition: transform .15s ease,box-shadow .15s ease,margin-right .15s ease
}

.tile:hover .tile-icon-img {
    transform: scale(1.1);
    box-shadow: 0 2px 8px color-mix(in srgb,var(--primary-background) 50%,transparent)
}

.interface-list .tile:hover {
    transform: none;
    margin-left: 10px;
    background-color: var(--primary-hover);
    z-index: 2
}

.interface-list .tile .tile-label {
    transition: transform .15s ease;
    transform-origin: left center
}

.interface-list .tile:hover .tile-label {
    transform: scale(1.06) translateX(2px)
}

.menu-search-container, .menu-system-info {
    padding: 8px 12px;
    border-top: 1px solid
}

.menu-system-info {
    font-size: var(--text-size-smaller);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.menu-search-input {
    width: 100%;
    border: 1px solid;
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: var(--text-size-small);
    outline: 0
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb,var(--primary-background) 30%,transparent);
    backdrop-filter: blur(6px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center
}

.mobile-menu-container, .mobile-menu-header {
    background-color: var(--primary-color);
    display: flex
}

.mobile-menu-container {
    width: 90dvw;
    max-width: 600px;
    height: 80dvh;
    color: var(--text-color);
    border: 1px solid var(--border-standard);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    flex-direction: column;
    overflow: hidden;
    z-index: 1100;
    font-family: var(--font-system)
}

.mobile-menu-header {
    position: relative;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border-standard);
    font-weight: 600;
    font-size: var(--text-size-normal);
    align-items: center;
    min-height: 56px
}

    .mobile-menu-header::before {
        inset: 0;
        opacity: .08
    }

    .mobile-menu-header > * {
        position: relative;
        z-index: 1
    }

.mobile-menu-body {
    padding: 0;
    overflow-y: auto;
    flex-grow: 1
}

.mobile-menu-container .list-group {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    background: var(--Purpleburstbackgrounddark)
}

.mobile-menu-container .list-group-item {
    display: flex;
    align-items: center;
    padding: .65rem 1rem;
    font-size: var(--text-size-normal);
    color: var(--text-color);
    text-decoration: none;
    background: var(--Purpleburstbackgrounddark);
    border-left: 4px solid transparent;
    transition: background-color .2s,color .2s,border-color .2s;
    border-radius: 0;
    cursor: pointer
}

.mobile-menu-container .tile-icon {
    font-size: var(--text-size-normal);
    margin-right: .75rem;
    color: var(--text-color)
}

.mobile-menu-container .tile-text {
    font-weight: 300;
    font-size: var(--text-size-smaller);
    white-space: nowrap
}

.bottom-nav, .list-group-item, .list-group-item-action {
    color: var(--text-color)
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    background: 0 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    z-index: 1000
}

.task-bar-container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    overflow-y: auto;
    height: 100%;
    max-height: 60px;
    padding: 2px 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-color: color-mix(in srgb,var(--primary-background) 85%,transparent);
    border-radius: var(--radius-lg)
}

.bottom-nav .task-bar-container {
    justify-content: center;
    margin: 0 36px !important;
    flex-grow: 1;
    min-width: 0
}

.task-item {
    background: color-mix(in srgb,var(--primary-color) 10%,transparent);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    margin: 2px 4px;
    cursor: pointer;
    transition: all .2s;
    border-left: 3px solid transparent;
    display: inline-flex;
    align-items: center;
    width: 140px;
    height: 28px
}

    .task-item:hover {
        background: color-mix(in srgb,var(--text-color) 20%,transparent)
    }

    .task-item.active {
        background: color-mix(in srgb,var(--primary-color) 25%,transparent);
        border-left: 3px solid;
        box-shadow: 1px 1px 4px
    }

.task-text {
    color: var(--text-color);
    font-size: var(--text-size-small);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 6px;
    flex-grow: 1
}

.task-close {
    color: color-mix(in srgb,var(--text-color) 50%,transparent);
    border-radius: 50%;
    padding: 1px 3px;
    font-size: var(--text-size-smaller)
}

    .task-close:hover {
        color: var(--text-color);
        background: color-mix(in srgb,var(--color-danger) 50%,transparent)
    }

.task-icon-img {
    width: .9em;
    height: .9em;
    object-fit: cover;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb,var(--text-color) 35%,transparent)
}

.card {
    background-color: var(--primary-color);
    color: var(--text-color);
    max-height: 85vh;
    display: flex;
    flex-direction: column
}

.card-header {
    background-color: var(--primary-background);
    border-bottom: 1px solid var(--primary-hover);
    padding: .5rem .75rem
}

    .card-header h5 {
        color: var(--text-color);
        font-size: var(--text-size-small);
        margin-bottom: 0
    }

.card-body {
    padding: .5rem;
    overflow-y: auto
}

.list-group-item {
    background: var(--Purpleburstbackgrounddark);
    border: 1px solid var(--primary-hover);
    padding: .25rem .5rem;
    font-size: var(--text-size-small)
}

.control-fade-in {
    opacity: 0;
    animation: controlFadeIn .5s ease-in forwards;
    will-change: transform,opacity;
    backface-visibility: hidden;
    perspective: 1000px
}

/* Bootstrap modals (.modal > .modal-content) read their colours from --bs-modal-*, which
   default to Bootstrap's own dark palette (#212529). Pointed at the theme so every plain
   Bootstrap dialog looks like .ts-modal-content. Set on .modal-content too for the few
   dialogs that use it without a .modal wrapper. */
.modal, .modal-content {
    --bs-modal-bg: var(--primary-background);
    --bs-modal-color: var(--text-color);
    --bs-modal-border-color: color-mix(in srgb,var(--text-lightgrey) 25%,transparent);
    --bs-modal-border-radius: var(--radius-lg);
    --bs-modal-inner-border-radius: calc(var(--radius-lg) - 1px);
    --bs-modal-header-border-color: color-mix(in srgb,var(--text-lightgrey) 20%,transparent);
    --bs-modal-footer-border-color: color-mix(in srgb,var(--text-lightgrey) 20%,transparent)
}

.modal-content {
    box-shadow: 0 12px 32px color-mix(in srgb,var(--primary-background) 20%,transparent)
}

.modal-backdrop.show {
    background: color-mix(in srgb,var(--primary-color) 65%,transparent);
    opacity: 1
}

.dropdown-menu {
    --bs-dropdown-bg: var(--primary-color);
    --bs-dropdown-color: var(--text-color);
    --bs-dropdown-border-color: var(--component-border);
    --bs-dropdown-divider-bg: var(--border-standard);
    --bs-dropdown-header-color: var(--text-lightgrey);
    --bs-dropdown-link-color: var(--text-color);
    --bs-dropdown-link-hover-color: var(--text-color);
    --bs-dropdown-link-hover-bg: color-mix(in srgb,var(--secondary-color) 20%,transparent);
    --bs-dropdown-link-active-color: var(--text-color);
    --bs-dropdown-link-active-bg: color-mix(in srgb,var(--secondary-color) 35%,transparent);
    --bs-dropdown-link-disabled-color: var(--text-lightgrey);
    max-height: 300px;
    overflow-y: auto
}

.progress {
    --bs-progress-bg: var(--AbsoluteComponentBGColor);
    --bs-progress-bar-bg: var(--secondary-color);
    --bs-progress-bar-color: var(--primary-background)
}

.list-group {
    --bs-list-group-color: var(--text-color);
    --bs-list-group-border-color: var(--border-standard);
    --bs-list-group-action-color: var(--text-color);
    --bs-list-group-action-hover-color: var(--text-color);
    --bs-list-group-action-hover-bg: var(--primary-hover);
    --bs-list-group-action-active-color: var(--text-color);
    --bs-list-group-action-active-bg: color-mix(in srgb,var(--secondary-color) 20%,transparent);
    --bs-list-group-active-color: var(--text-color);
    --bs-list-group-active-bg: color-mix(in srgb,var(--secondary-color) 35%,var(--primary-color));
    --bs-list-group-active-border-color: var(--secondary-color)
}

    .dropdown-menu .dropdown-item {
        padding-top: .5rem;
        padding-bottom: .5rem
    }

.editor-toolbar {
    scrollbar-gutter: stable both-edges
}

    .editor-toolbar .toolbar-group {
        max-width: 100%
    }

.login-card {
    color: var(--text-color);
    border: 0 !important;
    border-radius: var(--radius-sm);
    box-shadow: none !important;
    animation: fadeIn .3s ease-out
}

    .login-card .card-header {
        background: 0 0 !important;
        color: var(--text-color);
        border-bottom: none !important;
        padding: .5rem
    }

    .login-card, .login-card .card-body {
        background-color: transparent !important
    }

        .login-card .card-body {
            padding: 1rem;
            color: var(--text-color)
        }

        .login-card .alert-danger {
            background-color: color-mix(in srgb,var(--color-danger) 40%,var(--primary-color));
            border: 0;
            color: var(--text-color)
        }

        .login-card input::placeholder {
            color: color-mix(in srgb,var(--text-color) 50%,transparent)
        }

.profile-picture-container {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--primary-background);
    border: 2px solid color-mix(in srgb,var(--primary-background) 10%,transparent);
    box-shadow: 0 0 4px color-mix(in srgb,var(--primary-background) 20%,transparent);
    flex-shrink: 0
}

.profile-picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.preferences-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem
}

    .preferences-container .preferences-header {
        margin-bottom: 2rem;
        text-align: left
    }

        .preferences-container .preferences-header h3 {
            font-size: var(--text-size-large);
            margin-bottom: .5rem;
            color: var(--text-color);
            font-weight: 500
        }

    .preferences-container .preferences-subtitle {
        color: var(--text-color);
        font-size: var(--text-size-normal);
        margin-top: 0
    }

    .preferences-container .loading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem
    }

    .preferences-container .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid color-mix(in srgb,var(--primary-background) 10%,transparent);
        border-radius: 50%;
        border-top-color: var(--primary-color);
        animation: prefSpinner 1s linear infinite;
        margin-bottom: 1rem
    }

    .preferences-container .empty-settings {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem;
        background-color: color-mix(in srgb,var(--color-danger) 40%,var(--primary-color));
        border-radius: var(--bps-radius);
        text-align: center
    }

        .preferences-container .empty-settings i {
            font-size: var(--text-size-large);
            color: var(--border-standard);
            margin-bottom: 1rem
        }

        .preferences-container .empty-settings p {
            color: var(--text-lightgrey);
            margin-bottom: 1.5rem
        }

    .preferences-container .settings-card {
        background-color: var(--primary-background);
        border-radius: var(--bps-radius);
        box-shadow: var(--shadow-sm);
        padding: 1.5rem
    }

    .preferences-container .settings-actions {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 1.5rem
    }

    .preferences-container .settings-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
        gap: 1.5rem
    }

    .preferences-container .setting-item {
        position: relative;
        background-color: color-mix(in srgb,var(--color-danger) 40%,var(--primary-color));
        border-radius: var(--radius-md);
        padding: 1.25rem;
        transition: box-shadow .2s
    }

        .preferences-container .setting-item:hover {
            box-shadow: var(--shadow-sm)
        }

    .preferences-container .setting-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        color: var(--text-color)
    }

    .preferences-container .setting-name {
        font-weight: 500;
        color: var(--text-color);
        font-size: var(--text-size-normal)
    }

    .preferences-container .setting-value {
        margin-top: .5rem
    }

    .preferences-container .toggle-switch {
        position: relative;
        display: inline-flex;
        align-items: center;
        cursor: pointer
    }

        .preferences-container .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0
        }

    .preferences-container .toggle-slider {
        position: relative;
        display: inline-block;
        width: 48px;
        height: 24px;
        background-color: color-mix(in srgb,var(--text-color),var(--primary-background) 20%);
        border-radius: var(--radius-xl);
        transition: .3s;
        margin-right: 10px
    }

        .preferences-container .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: var(--primary-background);
            border-radius: 50%;
            transition: .3s
        }

    .preferences-container input:checked + .toggle-slider {
        background-color: var(--primary-color)
    }

        .preferences-container input:checked + .toggle-slider:before {
            transform: translateX(24px)
        }

    .preferences-container .toggle-label {
        font-size: var(--text-size-small);
        color: var(--text-color)
    }

.preferences-form-control {
    width: 100%;
    padding: .5rem;
    border: 1px solid var(--border-standard);
    border-radius: var(--radius-sm);
    font-size: var(--text-size-small);
    transition: border-color .2s
}

    .preferences-form-control:focus {
        border-color: var(--primary-color);
        outline: 0
    }

.preferences-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1100
}

.preferences-toast-message {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    margin-bottom: 10px;
    animation: prefToastSlideIn .3s ease-out forwards
}

    .preferences-toast-message i {
        margin-right: 10px;
        font-size: var(--text-size-normal)
    }

    .preferences-toast-message.success {
        background-color: color-mix(in srgb,var(--color-success) 20%,transparent);
        color: var(--color-success);
        border-left: 4px solid var(--color-success)
    }

    .preferences-toast-message.error {
        background-color: color-mix(in srgb,var(--color-danger) 20%,transparent);
        color: var(--color-danger);
        border-left: 4px solid var(--color-danger)
    }

.dynamic-interface {
    /* The screen minus the taskbar, on whichever edge it sits (NavMenu sets --taskbar-inset-*; none = bottom). */
    position: relative;
    width: calc(100% - var(--taskbar-inset-left, 0px) - var(--taskbar-inset-right, 0px));
    height: calc(var(--vh)*100 - var(--taskbar-inset-top, 0px) - var(--taskbar-inset-bottom, var(--bottom-nav-height)));
    top: var(--taskbar-inset-top, 0px);
    left: var(--taskbar-inset-left, 0px);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    overflow: auto;
    padding-bottom: 0
}

    .dynamic-interface::before {
        content: "";
        position: absolute;
        inset: 1%;
        filter: blur(45px);
        z-index: -1;
        pointer-events: none
    }

    .dynamic-interface .control-wrapper {
        position: absolute;
        background-color: color-mix(in srgb,var(--color-danger) 40%,var(--primary-color));
        border: 1px solid var(--border-standard);
        border-radius: 1px;
        overflow: hidden;
        padding: 0;
        margin: 0;
        box-shadow: 0 4px 12px color-mix(in srgb,var(--AbsoluteComponentBGColor) 20%,transparent);
        transition: transform .3s ease-in-out,box-shadow .3s ease-in-out
    }

        .dynamic-interface .control-wrapper:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg)
        }

    .dynamic-interface .it-card {
        display: grid;
        grid-template-rows: auto auto 1fr;
        gap: .75rem;
        border: 1px solid var(--border-standard);
        border-radius: var(--radius-lg);
        background: color-mix(in srgb,var(--primary-background) 15%,transparent);
        backdrop-filter: blur(10px);
        box-shadow: var(--shadow-md);
        overflow: hidden;
        background-clip: padding-box;
        color: var(--text-color)
    }

    .dynamic-interface .it-tools {
        position: sticky;
        top: 0;
        z-index: 5;
        border-bottom: 1px solid var(--border-standard);
        background: color-mix(in srgb,var(--primary-background) 35%,transparent);
        backdrop-filter: blur(10px);
        color: var(--text-color)
    }

    .dynamic-interface .it-tools-row, .it-card {
        display: flex;
        gap: .75rem;
        color: var(--text-color)
    }

    .dynamic-interface .it-tools-row {
        align-items: center;
        justify-content: space-between;
        padding: .65rem .75rem
    }

    .dynamic-interface .it-body {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 1rem;
        padding: .5rem .75rem .75rem;
        color: var(--text-color)
    }

    .dynamic-interface .it-preview-scroll {
        border: 1px solid var(--border-standard);
        border-radius: 10px;
        background: color-mix(in srgb,var(--primary-background) 15%,transparent);
        backdrop-filter: blur(10px);
        max-height: var(--it-panel-h);
        overflow: auto;
        scrollbar-gutter: stable both-edges;
        color: var(--text-color)
    }

    .dynamic-interface .it-table {
        border-collapse: collapse;
        width: 100%;
        table-layout: auto;
        color: var(--text-color)
    }

        .dynamic-interface .it-table td, .dynamic-interface .it-table th {
            padding: .35rem .6rem;
            border: 1px solid var(--border-standard);
            white-space: nowrap;
            vertical-align: middle;
            font-size: var(--text-size-normal);
            color: var(--text-color)
        }

        .dynamic-interface .it-confirm-bottom, .dynamic-interface .it-table thead th {
            position: sticky;
            background: color-mix(in srgb,var(--primary-background) 35%,transparent);
            backdrop-filter: blur(10px);
            color: var(--text-color)
        }

        .dynamic-interface .it-table thead th {
            top: 0;
            z-index: 2
        }

    .dynamic-interface .it-confirm-bottom {
        display: flex;
        justify-content: flex-end;
        gap: .6rem;
        bottom: 0;
        z-index: 10;
        padding: .5rem .75rem
    }

        .dynamic-interface .it-confirm-bottom .it-importselected-btn {
            background: var(--Purpleburstbackgrounddark);
            color: var(--text-color);
            border: 1px solid var(--border-standard);
            border-radius: var(--bps-radius);
            padding: .45rem .9rem;
            font-weight: 800;
            font-size: var(--text-size-normal);
            box-shadow: 0 2px 6px color-mix(in srgb,var(--primary-background) 12%,transparent);
            transition: background .2s ease,transform .05s ease
        }

            .dynamic-interface .it-confirm-bottom .it-importselected-btn:hover {
                background: linear-gradient(135deg,color-mix(in srgb,var(--secondary-color),var(--text-color) 25%),var(--secondary-color))
            }

            .dynamic-interface .it-confirm-bottom .it-importselected-btn:active {
                transform: translateY(1px)
            }

.it-card {
    flex-direction: column;
    padding: 1rem;
    border-width: 1px;
    border-style: solid;
    border-radius: .5rem;
    max-width: 100%;
    box-sizing: border-box
}

.it-table td, .it-table th, .it-tools {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    color: var(--text-color)
}

.it-tools {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-bottom: .5rem;
    margin-bottom: .75rem;
    background: inherit
}

    .it-tools .it-select {
        max-width: 100%
    }

.it-tools-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem 1rem;
    color: var(--text-color)
}

.it-tools-left, .it-tools-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem
}

.it-label {
    color: var(--text-color);
    font-weight: 600;
    margin-right: .5rem
}

.it-btn-group .btn {
    border-radius: 999px
}

.it-body {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem
}

.it-map, .it-preview {
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    color: var(--text-color)
}

.it-preview {
    flex: 1 1 55%
}

.it-map {
    flex: 1 1 45%
}

.it-check, .it-preview-head {
    align-items: center;
    color: var(--text-color)
}

.it-preview-head {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    font-size: var(--text-size-small)
}

.it-check {
    display: inline-flex;
    gap: .35rem;
    cursor: pointer
}

.it-error, .it-note, .it-status {
    font-size: var(--text-size-small);
    color: var(--text-color)
}

.it-preview-scroll {
    border-width: 1px;
    border-style: solid;
    border-radius: .25rem;
    overflow: auto;
    max-height: var(--it-panel-h);
    color: var(--text-color)
}

.it-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--text-size-small);
    color: var(--text-color)
}

    .it-table td, .it-table th {
        padding: .35rem .5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .it-table thead th {
        font-weight: 600
    }

.it-select-col {
    width: 2.25rem;
    text-align: center;
    color: var(--text-color)
}

.it-row-selected {
    outline-width: 2px;
    outline-style: solid;
    outline-offset: -2px
}

.it-placeholder {
    padding: 1rem;
    font-size: var(--text-size-small);
    font-style: italic
}

.it-mapper {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem;
    border-width: 1px;
    border-style: solid;
    border-radius: .25rem;
    color: var(--text-color)
}

    .it-mapper .form-control, .it-mapper .form-select {
        max-width: 100%
    }

.it-mapper-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: var(--text-size-small)
}

.it-mapper-body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    max-height: 20rem;
    overflow: auto;
    padding-top: .25rem
}

.it-map-row {
    display: flex;
    align-items: flex-start;
    gap: .5rem
}

.it-manual, .it-source {
    font-size: var(--text-size-small)
}

.it-source {
    flex: 0 0 30%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.it-map-row > .d-flex {
    flex: 1 1 auto
}

.it-manual {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top-width: 1px;
    border-top-style: solid;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.it-manual-title {
    font-weight: 600
}

.it-mapper-foot, .it-upsert {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.it-mapper-foot {
    justify-content: space-between;
    gap: .75rem;
    margin-top: .5rem;
    font-size: var(--text-size-small)
}

.it-upsert {
    gap: .5rem
}

.it-confirm-bottom {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end
}

.it-importselected-btn {
    min-width: 10rem
}

.control-name {
    font-weight: 500;
    color: var(--text-color)
}

.control-id {
    color: var(--text-color);
    background: var(--Purpleburstbackgrounddark);
    border-radius: 3px
}

.control-id, .delete-btn {
    padding: 2px 6px;
    font-size: var(--text-size-small)
}

.control-wrapper, .design-surface {
    border: 1px solid var(--border-standard)
}

.design-surface {
    aspect-ratio: 16/9;
    width: 100%;
    background-color: var(--primary-background);
    height: auto;
    position: relative;
    min-height: 600px;
    background-image: linear-gradient(0deg,var(--AbsoluteComponentBGColor) 1px,transparent 1px),linear-gradient(90deg,var(--AbsoluteComponentBGColor) 1px,transparent 1px);
    background-size: 20px 20px
}

.control-wrapper {
    background: var(--text-color);
    box-sizing: border-box
}

    .control-wrapper.selected {
        border: 2px solid var(--selection-color);
        outline: 2px solid var(--selection-color);
        outline-offset: 1px;
        box-shadow: 0 0 0 4px color-mix(in srgb,var(--selection-color) 25%,transparent)
    }

        .control-wrapper.selected > .control-label-overlay {
            background-color: var(--selection-color);
            color: var(--selection-text-color)
        }

            .control-wrapper.selected > .control-label-overlay .control-id, .control-wrapper.selected > .control-label-overlay .control-name {
                color: var(--selection-text-color)
            }

    .control-wrapper.is-container {
        background: color-mix(in srgb,var(--primary-background) 2%,transparent);
        padding: 6px;
        box-sizing: border-box;
        border: 1px dashed var(--text-lightgrey)
    }

        .control-wrapper.is-container.selected {
            box-shadow: 0 0 0 2px color-mix(in srgb,var(--secondary-color),var(--primary-background) 45%,transparent 65%);
            border: 2px dashed var(--secondary-color)
        }

    .control-wrapper.drop-target-hover {
        border: 2px dashed var(--color-success) !important;
        background: color-mix(in srgb,var(--color-success) 8%,transparent) !important
    }

    .control-wrapper.hidden-control {
        opacity: .4
    }

.control-preview {
    min-width: 60px;
    max-width: 10px
}

    .control-preview .btn, .control-preview .form-control, .control-preview .form-select {
        pointer-events: none;
        transform: scale(.8);
        transform-origin: left center
    }

.control-preview-body {
    overflow: hidden;
    pointer-events: none
}

    .control-preview-body, .control-preview-body .preview-el {
        width: 100%;
        height: 100%
    }

.control-label-overlay {
    position: absolute;
    top: -1px;
    left: -1px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-size-smaller);
    padding: 1px 4px;
    line-height: 1.4;
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
    -webkit-text-stroke: 1px var(--primary-background);
    paint-order: stroke fill;
    background: 0 0
}

    .control-label-overlay .delete-btn {
        pointer-events: auto;
        padding: 0 4px;
        line-height: 1;
        font-size: var(--text-size-small);
        border: 0;
        text-shadow: none;
        background: 0 0;
        color: var(--color-danger)
    }

        .control-label-overlay .delete-btn:hover {
            color: color-mix(in srgb,var(--color-danger) 70%,var(--primary-background) 30%)
        }

.control-help-btn:hover, .control-wrapper:hover .control-label-overlay {
    color: var(--text-color)
}

.control-label-overlay, .preview-el, .preview-label {
    color: var(--text-color)
}

.preview-label {
    display: inline-block;
    padding: 2px 4px
}

.preview-container {
    background: var(--Purpleburstbackgrounddark);
    color: var(--text-color)
}

.preview-container-empty, .preview-generic {
    border: 1px dashed color-mix(in srgb,var(--secondary-color),var(--primary-background) 35%);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

.preview-generic {
    font-weight: 500;
    background: var(--Purpleburstbackgrounddark);
    font-size: var(--text-size-small);
    color: var(--text-lightgrey)
}

.preview-container-empty {
    background: color-mix(in srgb,var(--secondary-color),var(--secondary-color) 40%,transparent 88%);
    font-size: var(--text-size-smaller);
    color: var(--text-lightgrey);
    text-align: center;
    padding: 4px
}

.control-help-btn, .control-help-icon {
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--Purpleburstbackgrounddark);
    color: var(--text-color);
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0
}

.control-help-btn {
    width: 16px;
    height: 16px;
    border: 1px solid var(--border-standard);
    font-size: var(--text-size-smaller);
    display: flex;
    cursor: pointer;
    margin-left: 6px;
    padding: 0;
    box-shadow: var(--shadow-sm);
    transition: background-color .2s ease,border-color .2s ease,color .2s ease,transform .1s ease,box-shadow .2s ease
}

    .control-help-btn:hover {
        background: var(--primary-hover);
        border-color: var(--secondary-color);
        transform: scale(1.1);
        box-shadow: 0 0 8px color-mix(in srgb,var(--secondary-color) 40%,transparent)
    }

    .control-help-btn:active {
        transform: scale(.95)
    }

.control-help-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    font-size: var(--text-size-smaller);
    box-shadow: 0 0 6px color-mix(in srgb,var(--secondary-color) 25%,transparent)
}

.control-help-icon, .designer-menu-bar, .designer-menu-bar .btn-menu-trigger {
    border: 1px solid var(--component-border)
}

.designer-menu-bar {
    background: var(--primary-color);
    border-radius: var(--bps-radius);
    box-shadow: 0 4px 15px color-mix(in srgb,var(--primary-background) 40%,transparent)
}

    .designer-menu-bar .btn-menu-trigger {
        background: var(--Purpleburstbackgrounddark);
        color: var(--text-color);
        font-size: var(--text-size-small);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .5px;
        padding: 4px 10px;
        border-radius: var(--bps-radius);
        transition: all .2s ease
    }

        .designer-menu-bar .btn-menu-trigger:focus, .designer-menu-bar .btn-menu-trigger:hover, .designer-menu-bar .btn-menu-trigger[aria-expanded=true] {
            background-color: var(--primary-hover);
            border-color: var(--secondary-color);
            color: var(--text-color);
            box-shadow: 0 0 8px color-mix(in srgb,var(--secondary-color) 25%,transparent)
        }

    .designer-menu-bar .dropdown-menu {
        background: var(--primary-color) !important;
        border: 1px solid var(--component-border) !important;
        border-radius: var(--bps-radius);
        box-shadow: 0 10px 30px color-mix(in srgb,var(--primary-background) 60%,transparent);
        padding: 6px 0;
        min-width: 220px;
        z-index: 3000 !important
    }

    .designer-menu-bar .dropdown-header {
        color: var(--text-color) !important;
        font-size: var(--text-size-smaller);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        padding: 6px 14px 2px
    }

    .designer-menu-bar .dropdown-item {
        color: var(--text-color) !important;
        font-size: var(--text-size-small);
        padding: 6px 14px;
        transition: background .15s ease,color .15s ease
    }

        .designer-menu-bar .dropdown-item:focus, .designer-menu-bar .dropdown-item:hover {
            background: var(--primary-hover) !important;
            color: var(--text-color) !important
        }

        .designer-menu-bar .dropdown-item .oi {
            color: var(--text-color);
            font-size: var(--text-size-small)
        }

        .designer-menu-bar .dropdown-item.text-danger {
            color: var(--color-danger) !important
        }

            .designer-menu-bar .dropdown-item.text-danger:hover {
                background: color-mix(in srgb,var(--color-danger) 15%,transparent) !important;
                color: color-mix(in srgb,var(--color-danger) 80%,var(--text-color) 20%) !important
            }

            .designer-menu-bar .dropdown-item.text-danger .oi {
                color: var(--color-danger)
            }

    .designer-menu-bar .dropdown-divider {
        border-top: 1px solid var(--component-border);
        opacity: .6;
        margin: 4px 0
    }

.dynamic-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--bps-radius);
    overflow: hidden;
    box-shadow: var(--mud-elevation-2);
    background-color: var(--mud-palette-surface)
}

.grid-fixed .mud-table-container {
    overflow-x: auto
}

.grid-fixed .mud-data-grid {
    height: 100%;
    display: flex;
    flex-direction: column
}

.dynamic-grid .mud-data-grid-toolbar, .dynamic-grid .mud-toolbar, .dynamic-grid .mud-toolbar-content {
    background-color: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem
}

    .dynamic-grid .mud-toolbar .mud-text-field {
        min-width: 200px
    }

.dynamic-grid .mud-table-header {
    background-color: var(--mud-palette-background-grey);
    font-weight: 600;
    text-transform: capitalize
}

.dynamic-grid .mud-table-cell {
    padding: .5rem .75rem;
    white-space: nowrap
}

.dynamic-grid .mud-table-row:hover {
    background-color: var(--mud-palette-action-hover);
    cursor: pointer
}

.dynamic-grid .mud-data-grid-pager, .dynamic-grid .mud-table-footer {
    border-top: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background);
    padding: .25rem .75rem
}

.datagrid-singleselect {
    border: 1px solid var(--mud-palette-lines-default)
}

.tiptap-wrapper {
    min-width: 100px;
    border: 1px solid color-mix(in srgb,var(--primary-background) 60%,transparent);
    border-radius: var(--radius-sm)
}

.tiptap-toolbar button {
    font-size: var(--text-size-smaller);
    padding: 4px 8px;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    background: var(--primary-color);
    color: var(--text-color)
}

    .tiptap-toolbar button:hover {
        filter: brightness(1.08)
    }

.drawbox-container {
    box-shadow: 0 4px 6px color-mix(in srgb,var(--primary-background) 10%,transparent);
    margin-bottom: 1rem;
    width: 100%
}

    .drawbox-container canvas {
        background-color: var(--text-color);
        display: block
    }

.bps-draw-stack {
    background-color: color-mix(in srgb,var(--primary-background),var(--text-color) 7%) !important;
    border: 1px solid var(--component-border) !important
}

    .bps-draw-stack canvas {
        background-color: transparent !important
    }

.bps-graph-canvas-wrap canvas:focus {
    outline: 0
}

.bps-main-content, .bps-root {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.bps-root {
    transition: all .3s ease;
    background: var(--Purpleburstbackgrounddark);
    box-shadow: var(--shadow-sm);
    font-family: var(--bps-font);
    font-size: var(--control-font-size);
    color: var(--text-color);
    overflow-y: auto
}

.bps-main-content {
    flex: 1;
    position: relative
}

.bps-main-wrapper {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0
}

.bps-slide-menu {
    position: absolute;
    top: 0;
    left: -300px;
    width: var(--menu-open-width);
    height: 100%;
    background-color: color-mix(in srgb,var(--primary-background) 80%,transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid color-mix(in srgb,var(--text-color) 10%,transparent);
    transition: transform .3s ease;
    z-index: 1000
}

    .bps-slide-menu.open {
        transform: translateX(300px)
    }

/* Transparent click-catcher shown while the slide menu is open; one z-index
   below the panel so clicks land on it only outside the panel itself. */
.bps-slide-menu-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 999
}

.bps-bottom-bar, .bps-side-icon-bar {
    background: var(--Purpleburstbackgrounddark);
    flex-shrink: 0;
    display: flex;
    align-items: center
}

.bps-side-icon-bar {
    /* --Purpleburstbackgrounddark mirrored vertically (angle 180-a, radial y 100-y) so the light side is at the top */
    background: linear-gradient(calc(180deg - var(--gradient-angle)), var(--gradient-base-1) 0%, var(--gradient-base-2) 50%, var(--gradient-base-3) 100%), radial-gradient(circle at 20% 70%, var(--gradient-glow-indigo), transparent 50%), radial-gradient(circle at 75% 75%, var(--gradient-glow-magenta), transparent 55%), radial-gradient(circle at 30% 30%, var(--gradient-glow-crimson), transparent 50%), radial-gradient(circle at 80% 20%, var(--gradient-glow-violet), transparent 55%);
    width: var(--sidebar-icon-width);
    border-right: 0 solid var(--component-border);
    flex-direction: column;
    padding-top: 5px;
    gap: 3px;
    z-index: 150
}

.bps-bottom-bar {
    height: auto !important;
    min-height: 50px;
    flex-wrap: wrap;
    padding: .5rem 1rem;
    gap: 10px
}

.footer-result-container {
    min-width: 200px;
    flex: 1 1 300px
}

.bps-toolbar, .bps-toolbar .form-check.form-switch {
    display: flex !important;
    color: var(--text-color);
    text-transform: uppercase;
    font-weight: 700
}

.bps-toolbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    background: var(--primary-color);
    border-bottom: 1px solid var(--component-border)
}

/* Main search/control bar matches the bottom bar (.bps-bottom-bar). Scoped to .bps-main-content
   so the sticky .bps-toolbar inside the relations modal keeps its solid background. */
.bps-main-content .bps-toolbar {
    background: var(--Purpleburstbackgrounddark)
}

    .bps-list select.form-select, .bps-toolbar button, .bps-toolbar input, .bps-toolbar select {
        font-size: var(--control-font-size)
    }

.bps-list {
    color: var(--text-color);
    container-type: inline-size;
    container-name: bps-list
}

.bps-list {
    background: color-mix(in srgb,var(--primary-background) 15%,transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    height: calc(100vh - 250px);
    overflow-y: auto;
    position: relative;
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden
}

    .bps-list select.form-select {
        width: 100%;
        background: var(--primary-background);
        color: var(--text-color);
        transition: border-color .15s ease,box-shadow .15s ease;
        height: var(--control-height);
        line-height: 1.25;
        border-color: var(--component-border)
    }

        .bps-list select.form-select:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 .15rem color-mix(in srgb,var(--secondary-color) 12%,transparent);
            outline: 0
        }

    .bps-list input.form-control[type=date], .bps-list input.form-control[type=time] {
        padding-right: .5rem
    }

    .bps-list .btn {
        background-color: var(--AbsoluteComponentBGColor);
        border: 1px solid var(--component-border);
        border-radius: var(--bps-radius);
        color: var(--text-color);
        cursor: pointer;
        font-size: var(--control-font-size);
        transition: background-color .15s ease,border-color .15s ease,transform .15s ease
    }

        .bps-list .btn:focus, .bps-list .btn:hover {
            background-color: var(--primary-hover);
            border-color: var(--component-border);
            color: var(--text-color);
            transform: translateY(-1px)
        }

        .bps-list .btn:active {
            background-color: var(--AbsoluteComponentBGColor);
            transform: translateY(1px)
        }

    .bps-list .mb-2, .bps-list .mb-3 {
        margin-bottom: 10px
    }

    .bps-list table.table {
        background: var(--primary-color);
        border-radius: var(--bps-radius);
        overflow: hidden
    }

        .bps-list table.table thead th {
            background: color-mix(in srgb,var(--primary-background) 15%,transparent);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            font-weight: 600
        }

        .bps-list table.table td, .bps-list table.table th {
            border-color: var(--component-border);
            font-size: var(--text-size-small);
            color: var(--text-color)
        }

    .bps-list td:nth-child(1), .bps-list td:nth-child(2), .bps-list td:nth-child(3), .bps-list th:nth-child(1), .bps-list th:nth-child(2), .bps-list th:nth-child(3) {
        width: 10%
    }

    .bps-list td:nth-child(4), .bps-list th:nth-child(4) {
        width: 25%
    }

    .bps-list td:nth-child(5), .bps-list th:nth-child(5) {
        width: 35%
    }

    .bps-list td:nth-child(6), .bps-list th:nth-child(6) {
        width: 10%;
        text-align: right
    }

    .bps-list .alert, .bps-map-wrapper .alert, .bps-map-route .alert {
        border-radius: var(--bps-radius);
        font-size: var(--text-size-small)
    }

    .bps-list .alert-info, .bps-map-wrapper .alert-info {
        background: color-mix(in srgb,var(--secondary-color) 8%,transparent);
        border: 1px solid color-mix(in srgb,var(--secondary-color) 15%,transparent);
        color: var(--text-color)
    }

    .bps-list .alert-danger, .bps-map-wrapper .alert-danger {
        background: color-mix(in srgb,var(--color-danger) 15%,transparent);
        border: 1px solid color-mix(in srgb,var(--color-danger) 40%,transparent);
        color: var(--text-color)
    }

.bps-table-scroll {
    flex: 1 1 auto;
    overflow: auto
}

.bps-row {
    display: flex;
    align-items: center;
    gap: .2rem;
    justify-content: space-between;
    padding: 3px;
    margin-bottom: 3px;
    color: var(--text-color);
    transition: all .15s ease;
    min-width: 140px
}

    .bps-row:hover {
        background: var(--Purpleburstbackgrounddark);
        border-color: color-mix(in srgb,var(--secondary-color) 20%,transparent);
        box-shadow: 0 2px 8px color-mix(in srgb,var(--primary-background) 5%,transparent)
    }

    .bps-row .number {
        width: 10%;
        min-width: 70px;
        text-align: left
    }

    .bps-row .name {
        width: 25%
    }

    .bps-row .desc {
        width: 40%
    }

    .bps-row .note {
        width: 15%;
        min-width: 120px;
        font-size: var(--text-size-small)
    }

    .bps-row .bps-icon-btn {
        width: 30px;
        height: 30px;
        flex-shrink: 0
    }

    .bps-row .col-2.text-truncate.fw-bold, .bps-row .col-3.text-truncate.fw-bold {
        font-size: var(--text-size-smaller) !important;
        letter-spacing: -.02em
    }

    .col-description {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

.col-description {
    display: flex;
    align-items: center
}

.col-description {
    gap: .5rem;
    flex: 1 1 0%;
    min-width: 0;
    margin-right: 25px;
    color: var(--text-color);
    font-size: var(--text-size-smaller)
}

.bps-item-controls {
    flex-direction: row;
    align-items: center;
    margin-right: 15px
}

.bps-root .btn, .bps-root input[type=date], .bps-root select {
    border-radius: var(--bps-radius);
    font-size: var(--control-font-size);
    transition: all .15s ease
}

    .bps-list .btn:hover, .bps-root .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px color-mix(in srgb,var(--primary-background) 8%,transparent)
    }

.bps-root input[type=date], .bps-root select {
    border: 1px solid var(--component-border);
    padding: 6px 10px;
    transition: border-color .15s ease
}

    .bps-root input[type=date]:focus, .bps-root select:focus {
        box-shadow: 0 0 0 .15rem color-mix(in srgb,var(--secondary-color) 10%,transparent);
        outline: 0
    }

.bps-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
    line-height: 1;
    color: var(--text-color);
    background: 0 0;
    border: 0;
    font-size: var(--text-size-large);
    cursor: pointer;
    transition: color .2s,transform .1s
}

    .bps-icon-btn:hover {
        background: var(--primary-hover);
        color: var(--text-color);
        border-color: color-mix(in srgb,var(--secondary-color) 20%,transparent);
        transform: scale(1.1)
    }

    /* Back/Next stay mounted when unavailable, so the disabled state must read
       as disabled: dimmed, and no hover growth. Declared after :hover so it
       wins on source order without !important. */
    .bps-icon-btn:disabled,
    .control-label-overlay .delete-btn:disabled,
    .dropdown-item:disabled {
        opacity: .35;
        filter: grayscale(1);
        cursor: default;
        pointer-events: none;
        transform: none;
        box-shadow: none;
        animation: none
    }

.bps-input {
    background-color: color-mix(in srgb,var(--primary-background) 30%,transparent) !important;
    border: 1px solid var(--component-border) !important;
    color: var(--text-color) !important
}

    .bps-input:focus {
        border-color: var(--secondary-color) !important;
        box-shadow: 0 0 8px color-mix(in srgb,var(--secondary-color) 20%,transparent);
        outline: 0
    }

.bps-radio-list {
    display: flex;
    flex-direction: column;
    gap: 6px
}

    .bps-radio-list.inline {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px
    }

.bps-radio {
    display: flex;
    align-items: center;
    gap: 8px
}

.bps-radio-input {
    width: 18px;
    height: 18px;
    accent-color: var(--secondary-color)
}

    .bps-radio-input:checked {
        background-color: var(--secondary-color);
        border-color: var(--text-color)
    }

    .bps-radio-input:focus-visible + .bps-radio-label {
        outline: 2px dotted var(--secondary-color);
        outline-offset: 2px
    }

    .bps-radio-input:checked + .bps-radio-label {
        color: var(--text-color) !important;
        font-weight: 700
    }

.bps-radio-label {
    border: 0;
    background: 0 0;
    padding: 0;
    color: var(--text-lightgrey);
    font-weight: 400;
    box-shadow: none;
    transition: color .2s ease;
    cursor: pointer
}

.bps-radio:hover .bps-radio-label {
    background: 0 0
}

.form-check-input {
    --bs-form-check-bg: var(--AbsoluteComponentBGColor);
    border-color: var(--component-border)
}

    .form-check-input:focus {
        border-color: var(--secondary-color);
        box-shadow: 0 0 0 .2rem color-mix(in srgb,var(--secondary-color) 25%,transparent)
    }

    .form-check-input:checked {
        background-color: var(--secondary-color);
        border-color: var(--secondary-color)
    }

.bps-active-toggle {
    background-color: color-mix(in srgb,var(--primary-background) 40%,transparent) !important;
    border-color: color-mix(in srgb,var(--AbsoluteComponentBGColor),var(--text-color) 8%) !important;
    background-image: var(--toggle-dot-off) !important
}

    .bps-active-toggle:checked {
        background-color: color-mix(in srgb,var(--secondary-color),var(--primary-background) 45%) !important;
        border-color: color-mix(in srgb,var(--secondary-color),var(--primary-background) 35%) !important;
        background-image: var(--toggle-dot-on) !important
    }

    .bps-active-toggle:focus {
        box-shadow: 0 0 0 .2rem color-mix(in srgb,var(--secondary-color),var(--primary-background) 45%,transparent) !important;
        border-color: var(--component-border) !important
    }

.bps-page-title {
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    font-size: var(--text-size-normal)
}

    .bps-page-title::before {
        content: "✎";
        opacity: .65;
        margin-right: .25rem
    }

    .bps-page-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 48px;
        height: 2px;
        background: linear-gradient(90deg,var(--secondary-color),transparent);
        border-radius: 1px;
        opacity: .6
    }

.d-flex > .bps-page-title {
    min-width: 0
}

.bps-label-sm {
    color: color-mix(in srgb,var(--text-color),var(--primary-background) 18%);
    font-size: var(--text-size-smaller)
}

.bps-label-sm {
    font-weight: 600;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: .5rem;
    display: block
}

.bps-comment-shiny {
    color: var(--text-color) !important;
    font-size: var(--text-size-large);
    text-shadow: 0 0 10px color-mix(in srgb,var(--secondary-color),var(--primary-background) 20%,transparent 20%),0 0 5px color-mix(in srgb,var(--text-color) 50%,transparent);
    filter: drop-shadow(0 0 2px color-mix(in srgb,var(--secondary-color) 50%,transparent))
}

.bps-preview-container {
    background: var(--primary-background);
    border: 1px solid var(--component-border);
    border-radius: var(--radius-md);
    height: 150px;
    overflow: hidden
}

.bps-preview-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: 0 0
}

.bps-wait-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: color-mix(in srgb,var(--AbsoluteComponentBGColor),var(--primary-background) 30%,transparent 30%);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px)
}

.bps-help-content pre, .bps-help-content table {
    border: 1px solid var(--component-border)
}

.bps-geo-item, .bps-geo-list {
    background-color: var(--primary-background)
}

.bps-geo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid color-mix(in srgb,var(--text-color) 20%,transparent);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 14px color-mix(in srgb,var(--primary-background) 50%,transparent)
}

.bps-geo-item {
    padding: .5rem .75rem;
    cursor: pointer;
    color: var(--text-color)
}

    .bps-geo-item:hover {
        background-color: color-mix(in srgb,var(--text-lightgrey),var(--primary-background) 35%)
    }

.bps-geo-item-active {
    background-color: var(--color-danger)
}

.bps-subdata-form-cols {
    display: grid;
    column-gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(600px, calc(50% - .75rem))), 1fr));
    align-items: start;
}

.border-bottom-purple {
    border-bottom: 1px solid color-mix(in srgb,var(--AbsoluteComponentBGColor),var(--text-color) 30%,transparent 50%) !important
}

.border-top-purple {
    border-top: 1px solid color-mix(in srgb,var(--AbsoluteComponentBGColor),var(--text-color) 30%,transparent 50%) !important
}

.bps-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(var(--vh)*70);
    background: var(--Purpleburstbackgrounddark) !important;
    color: var(--text-color);
    border: 1px solid var(--component-border);
    box-shadow: var(--shadow-sm)
}

.bps-modal .modal-footer, .bps-modal .modal-header {
    background: linear-gradient(180deg,color-mix(in srgb,var(--text-color) 4%,transparent),transparent)
}

.bps-modal .modal-header {
    border-bottom: 1px solid var(--component-border)
}

.bps-modal .modal-footer {
    border-top: 1px solid var(--component-border)
}

.bps-modal .modal-body {
    flex: 1 1 auto;
    overflow: auto;
    min-height: calc(var(--vh)*40);
    background: var(--Purpleburstbackgrounddark)
}

.bps-modal .modal-title {
    color: var(--text-color);
    font-weight: 700;
    letter-spacing: .2px
}

.bps-modal .btn-close {
    opacity: .7
}

    .bps-modal .btn-close:hover {
        opacity: 1
    }

.bps-modal .table {
    background: 0 0;
    color: var(--text-color)
}

    .bps-modal .table thead th {
        background: color-mix(in srgb,var(--text-color) 5%,transparent);
        color: var(--text-color)
    }

    .bps-modal .table, .bps-modal .table td, .bps-modal .table th, .bps-modal .table thead th {
        border-color: var(--component-border)
    }

.bps-modal .form-control, .bps-modal .form-select {
    background: var(--AbsoluteComponentBGColor) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--component-border) !important
}

    .bps-modal .form-control:focus, .bps-modal .form-select:focus {
        border-color: var(--component-border) !important;
        box-shadow: 0 0 0 .15rem color-mix(in srgb,var(--secondary-color) 12%,transparent)
    }

.bps-modal .btn-secondary {
    background: var(--primary-hover);
    border-color: var(--component-border);
    color: var(--text-color)
}

    .bps-modal .btn-secondary:hover {
        background: color-mix(in srgb,var(--text-color) 15%,transparent)
    }

.bps-modal-dark {
    background: var(--primary-color) !important;
    border: 1px solid var(--component-border) !important;
    box-shadow: 0 10px 30px color-mix(in srgb,var(--primary-background) 50%,transparent);
    border-radius: var(--radius-lg)
}

.bps-map-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 400px
}

    .bps-map-wrapper .bps-map-container {
        flex: 1 1 auto !important;
        min-height: 150px
    }

.bps-map-container {
    flex-grow: 1;
    min-height: 300px
}

.bps-map-crosshair {
    position: relative
}

    .bps-map-crosshair::after, .bps-map-crosshair::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: color-mix(in srgb,var(--primary-background) 60%,transparent);
        z-index: 1000;
        transform: translate(-50%,-50%);
        pointer-events: none;
        box-shadow: 0 0 2px color-mix(in srgb,var(--text-color) 80%,transparent)
    }

    .bps-map-crosshair::before {
        width: 20px;
        height: 2px
    }

    .bps-map-crosshair::after {
        width: 2px;
        height: 20px
    }

.bps-map-container img {
    max-width: none !important
}

.bps-map-note {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: 0 !important;
    overflow: visible !important
}

    .bps-map-note::after, .bps-map-note::before {
        display: none !important;
        border: 0 !important
    }

.bps-map-container img, .bps-map-note {
    background: 0 0 !important;
    border: 0 !important;
    box-shadow: none !important
}

.bps-note-icon-mode::after {
    position: absolute;
    color: var(--primary-background)
}

.bps-note-icon-mode {
    color: transparent !important;
    text-shadow: none !important
}

    .bps-note-icon-mode::after {
        content: "📝";
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: var(--text-size-large);
        line-height: 1;
        opacity: 1;
        text-shadow: 0 2px 5px color-mix(in srgb,var(--primary-background) 50%,transparent)
    }

.bps-marker-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--color-warning);
    color: var(--primary-background);
    border-radius: 10px;
    padding: 2px 6px;
    font-size: var(--text-size-smaller);
    font-weight: 700;
    border: 1px solid var(--primary-background);
    box-shadow: 0 2px 4px color-mix(in srgb,var(--primary-background) 40%,transparent);
    z-index: 10;
    pointer-events: none
}

.bps-root.bps-mode-map > .bps-toolbar > button {
    flex-shrink: 0 !important;
    margin-top: 5px;
    align-self: flex-start
}

.bps-root.bps-mode-map > .bps-list {
    grid-area: rightpanel;
    overflow-y: auto;
    padding-left: 1rem;
    height: 100%
}

.bps-root.bps-mode-map.bps-map-closed > .bps-list {
    border-left: none;
    padding-left: 0
}

.bps-calendar-grid {
    background: var(--Purpleburstbackgrounddark);
    border: 1px solid var(--component-border);
    border-radius: var(--bps-radius);
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.bps-cal-body, .bps-cal-header {
    display: grid;
    grid-template-columns: repeat(7,1fr)
}

.bps-cal-header {
    text-align: center;
    color: var(--text-color);
    font-weight: 700;
    font-size: var(--text-size-smaller);
    padding: 8px 0;
    background: color-mix(in srgb,var(--AbsoluteComponentBGColor),var(--primary-background) 40%);
    border-bottom: 1px solid var(--component-border)
}

.bps-cal-body {
    gap: 1px;
    background: color-mix(in srgb,var(--AbsoluteComponentBGColor),var(--primary-background) 10%)
}

.bps-cal-day {
    min-height: 120px;
    background: var(--Purpleburstbackgrounddark);
    padding: 4px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

    .bps-cal-day.has-data {
        cursor: pointer;
        border-color: var(--secondary-color)
    }

        .bps-cal-day.has-data:hover {
            background: var(--AbsoluteComponentBGColor)
        }

    .bps-cal-day.selected {
        box-shadow: inset 0 0 0 2px var(--selection-color);
        background: color-mix(in srgb,var(--selection-color) 12%,var(--Purpleburstbackgrounddark)) !important
    }

        .bps-cal-day.selected .day-num {
            text-decoration: underline 2px var(--selection-color);
            text-underline-offset: 3px
        }

    .bps-cal-day.drop-target-hover {
        outline: 2px dashed var(--color-success);
        outline-offset: -2px;
        background: color-mix(in srgb,var(--color-success) 10%,var(--Purpleburstbackgrounddark)) !important
    }

    .bps-cal-day .day-item-container[draggable=true] {
        cursor: grab
    }

    .bps-cal-day .day-item-container.is-dragging {
        opacity: .45
    }

.bps-cal-diff-month {
    background: color-mix(in srgb,var(--AbsoluteComponentBGColor),var(--primary-background) 45%);
    opacity: .5
}

.day-num {
    font-size: var(--text-size-smaller);
    color: var(--text-color);
    font-weight: 700;
    margin-bottom: 4px
}

.day-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    flex-grow: 1;
    scrollbar-width: none
}

.day-item-container {
    transition: background .2s
}

    .day-item-container:hover {
        background: color-mix(in srgb,var(--text-color) 5%,transparent) !important
    }

/* BeeplannerSearch calendar week view (.bps-cal-week): Outlook-style tall day columns.
   Narrow list (phones): one row per day with the entries side by side, scrolling sideways. */
.bps-cal-week .bps-cal-day {
    min-height: 60vh
}

    .bps-cal-week .bps-cal-day .day-item-container {
        overflow-wrap: anywhere
    }

@container bps-list (max-width: 640px) {
    .bps-cal-week .bps-cal-body {
        grid-template-columns: 1fr
    }

    .bps-cal-week .bps-cal-day {
        min-height: 72px
    }

    .bps-cal-week .day-stack {
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden
    }

        .bps-cal-week .day-stack > .day-item-container {
            flex: 0 0 auto;
            width: min(240px, 75%);
            margin-bottom: 0 !important
        }
}

.bps-cal-float-tooltip {
    width: 380px;
    max-width: 90vw;
    max-height: 80vh;
    overflow: visible;
    background: var(--tooltip-background);
    border: 1px solid var(--component-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px color-mix(in srgb,var(--primary-background) 60%,transparent);
    padding: 12px;
    color: var(--tooltip-text-color);
    font-size: var(--text-size-small)
}

.bps-cal-popup-source {
    display: none !important
}

.bps-cal-item-popup-title {
    font-weight: 700;
    font-size: var(--text-size-normal);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid color-mix(in srgb,var(--AbsoluteComponentBGColor),var(--text-color) 10%);
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
    line-height: 1.3
}

.bps-cal-item-popup-number {
    color: var(--text-color);
    font-family: var(--font-mono);
    font-size: var(--text-size-smaller);
    flex-shrink: 0
}

.bps-cal-item-popup-desc {
    white-space: pre-wrap;
    opacity: .9;
    margin: 0 0 12px;
    line-height: 1.6;
    font-size: var(--text-size-small)
}

.bps-cal-item-popup-html {
    margin-top: 10px;
    border-top: 1px solid color-mix(in srgb,var(--AbsoluteComponentBGColor),var(--text-color) 10%);
    padding-top: 10px;
    overflow-x: auto;
    line-height: 1.6
}

    .bps-cal-item-popup-html * {
        margin-bottom: 6px
    }

.bps-selection-tree-container {
    scrollbar-width: thin
}

    .bps-selection-tree-container::-webkit-scrollbar {
        width: 4px
    }

    .bps-selection-tree-container::-webkit-scrollbar-thumb {
        background: var(--secondary-color);
        border-radius: 10px
    }

.bps-tree-item {
    transition: background .2s,border-color .2s,color .2s
}

    .bps-tree-item, .bps-tree-item i {
        font-size: var(--text-size-small)
    }

        .bps-tree-item:hover {
            transform: translateX(5px);
            background: color-mix(in srgb,var(--secondary-color) 10%,transparent) !important;
            border-color: var(--secondary-color) !important;
            color: var(--text-color) !important;
            text-decoration: none
        }

.bps-pulse-active {
    animation: bps-filling-pulse .5s ease-out
}

.bps-pulse-next {
    animation: bps-next-glow 1.5s infinite ease-in-out;
    color: var(--text-color)
}

/* Caption under a disabled Back/Next button; the span sits outside the button. */
.bps-nav-label-disabled {
    opacity: .35;
    filter: grayscale(1)
}

.bps-tree-desc-container {
    width: 100%;
    overflow: hidden;
    white-space: pre;
    mask-image: linear-gradient(to right,transparent,var(--primary-background) 5%,var(--primary-background) 90%,transparent);
    -webkit-mask-image: linear-gradient(to right,transparent,var(--primary-background) 5%,var(--primary-background) 90%,transparent)
}

.bps-category-desc-container {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    cursor: default
}

.bps-tree-desc-text {
    display: inline-block;
    width: max-content;
    font-family: var(--font-mono);
    font-size: var(--text-size-smaller);
    transition: transform 1000s steps(10000) .1s;
    transform: translateX(0)
}

.bps-tree-item:hover .bps-tree-desc-text {
    transform: translateX(-9900ch)
}

.bps-scrolling-desc-text {
    display: inline-block;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-weight: 700
}

.bps-scrolling-desc-text {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--text-size-smaller);
    color: color-mix(in srgb,var(--text-color),var(--primary-background) 17%)
}

.bps-breadcrumb-viewport {
    flex: 1 1 0;
    position: relative;
    min-height: 0;
    width: 100%;
    background: 0 0;
    overflow: hidden
}

    .bps-breadcrumb-viewport::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 2;
        border-radius: var(--bps-radius);
        box-shadow: inset 0 0 25px color-mix(in srgb,var(--primary-background) 90%,transparent);
        background: linear-gradient(to bottom,transparent 80%,var(--Purpleburstbackgrounddark) 100%)
    }

.bps-breadcrumb-scroll-container {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 5px;
    backdrop-filter: blur(10px)
}

    .bps-breadcrumb-scroll-container::-webkit-scrollbar {
        width: 6px
    }

    .bps-breadcrumb-scroll-container::-webkit-scrollbar-track {
        background: color-mix(in srgb,var(--AbsoluteComponentBGColor) 15%,transparent)
    }

    .bps-breadcrumb-scroll-container::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: var(--radius-sm)
    }

.breadcrumb-scroll-wrapper {
    min-width: 0;
    overflow: hidden;
    white-space: pre;
    display: inline-block;
    vertical-align: middle;
    mask-image: linear-gradient(to right,transparent,var(--primary-background) 5%,var(--primary-background) 95%,transparent);
    -webkit-mask-image: linear-gradient(to right,transparent,var(--primary-background) 5%,var(--primary-background) 95%,transparent)
}

.breadcrumb-scroll-wrapper {
    max-width: 140px
}

.breadcrumb-scroll-text {
    display: inline-block;
    width: max-content;
    transition: transform 500s steps(5000) .1s;
    transform: translateX(0);
    font-family: var(--bps-font)
}

.breadcrumb-scroll-text {
    padding-left: 20px;
    padding-right: 5px
}

.breadcrumb-node {
    z-index: 1;
    position: relative
}

    .breadcrumb-node:hover .breadcrumb-scroll-text {
        transform: translateX(-5000ch)
    }

    .bqa-dropdown li {
        color: var(--text-color)
    }

    .breadcrumb-node:hover span.badge {
        border-color: var(--secondary-color) !important;
        background: var(--primary-hover) !important;
        box-shadow: 0 0 10px color-mix(in srgb,var(--secondary-color) 20%,transparent)
    }

.breadcrumb-node:hover span.badge {
    box-shadow: 0 0 15px color-mix(in srgb,var(--secondary-color) 30%,transparent)
}

.breadcrumb-item-wrap:hover {
    transform: rotate(-45deg) scale(1.05)
}

.bps-panel-resize-handle, .bps-resize-handle {
    background: repeating-linear-gradient(90deg,var(--component-border)0 6px,transparent 6px 12px);
    position: relative;
    flex-shrink: 0;
    touch-action: none;
    user-select: none
}

.bps-resize-handle {
    height: 10px;
    margin: 6px 0 10px;
    border-radius: 5px;
    cursor: row-resize
}

    .bps-resize-handle::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 44px;
        height: 4px;
        border-radius: var(--radius-xs);
        background: color-mix(in srgb,var(--text-color) 35%,transparent)
    }

.bps-panel-resize-handle {
    z-index: 5
}

    .bps-panel-resize-handle.bps-resize-active, .bps-panel-resize-handle:hover, .bps-resize-handle.bps-resize-active, .bps-resize-handle:hover {
        background: repeating-linear-gradient(90deg,var(--secondary-color)0 6px,transparent 6px 12px)
    }

.app-window {
    display: flex;
    flex-direction: column;
    background: 0 0;
    border: 1px solid var(--border-standard);
    border-radius: var(--bps-radius);
    box-shadow: var(--shadow-lg),0 12px 28px color-mix(in srgb,var(--primary-background) 50%,transparent);
    overflow: hidden;
    font-family: var(--bps-font);
    transition: opacity .15s ease
}

    .app-window.window-dragging {
        opacity: .55
    }

    .app-window.window-fade-in {
        animation: windowFadeIn .25s ease-out
    }

    .app-window.window-minimizing {
        animation: windowFadeOut .22s ease forwards;
        pointer-events: none
    }

    .app-window.snap-pending {
        outline: 2px dashed var(--secondary-color);
        outline-offset: 2px
    }

    .app-window.pinned {
        box-shadow: var(--shadow-md)
    }

.app-window-titlebar {
    position: relative;
    background: 0 0;
    backdrop-filter: blur(var(--titlebar-blur)) saturate(170%);
    -webkit-backdrop-filter: blur(var(--titlebar-blur)) saturate(170%);
    box-shadow: inset 0 1px 0 color-mix(in srgb,var(--text-color) calc(30% * var(--titlebar-gloss-on)),transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--titlebar-text-color);
    padding: var(--control-pad-y) var(--control-pad-x);
    font-size: var(--text-size-small);
    font-weight: 600;
    letter-spacing: .2px;
    cursor: move;
    user-select: none;
    touch-action: none;
    flex: 0 0 auto;
    border-top-left-radius: var(--bps-radius);
    border-top-right-radius: var(--bps-radius)
}

    .app-window-titlebar::after, .app-window-titlebar::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        pointer-events: none
    }

    .app-window-titlebar::before {
        background: var(--titlebar-inactive-color);
        opacity: var(--titlebar-opacity)
    }

    .app-window.window-active .app-window-titlebar::before {
        background: var(--titlebar-color)
    }

    .app-window-titlebar::after {
        background: linear-gradient(to bottom,color-mix(in srgb,var(--text-color) 22%,transparent) 0%,color-mix(in srgb,var(--text-color) 9%,transparent) 47%,color-mix(in srgb,var(--text-color) 1%,transparent) 48%,color-mix(in srgb,var(--text-color) 7%,transparent) 100%);
        opacity: var(--titlebar-gloss-on)
    }

/* Separator under the titlebar sits on the body (opaque background) instead of the titlebar:
   the titlebar's ::before tint does not reach its own border, so the line showed what is behind the window. */
.app-window-titlebar + .app-window-body {
    border-top: 1px solid var(--border-standard)
}

.app-window-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.app-window-buttons {
    display: flex;
    gap: 4px
}

.app-window-btn {
    width: 22px;
    height: 20px;
    border: 1px solid var(--border-standard);
    background: color-mix(in srgb,var(--primary-background) 30%,transparent);
    color: var(--text-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .15s ease,color .15s ease,border-color .15s ease
}

    .app-window-btn.maximize:hover, .app-window-btn.minimize:hover, .app-window-btn:hover {
        border-color: var(--secondary-color);
        color: var(--text-color)
    }

    .app-window-btn.minimize:hover, .app-window-btn:hover {
        background: var(--primary-hover)
    }

/* Floating window opened by a folder shortcut (File Browser) and the login page's Request access form.
   Moved here from DesktopSurface's <style> so pages without the desktop can use the same window. */
.desktop-window-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: color-mix(in srgb, var(--primary-background) 55%, transparent);
}

.desktop-window {
    position: fixed;
    z-index: 1201;
    top: var(--desktop-window-top, 3vh);
    left: 50%;
    transform: translateX(-50%);
    width: var(--desktop-window-width, min(1700px, 96vw));
    height: var(--desktop-window-height, 92vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--component-border);
    background: var(--Purpleburstbackgrounddark);
    box-shadow: var(--shadow-lg);
}

.desktop-window-titlebar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--primary-color);
    border-bottom: 1px solid var(--border-standard);
}

.desktop-window-title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* FileBrowser sizes itself to 100% height, so the body must be a sized flex box */
.desktop-window-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

    .desktop-window-body > * {
        flex: 1 1 auto;
        min-width: 0;
    }

.app-window-body {
    position: relative;
    flex: 1 1 auto;
    overflow: auto;
    padding: 4px;
    background: var(--Purpleburstbackgrounddark);
    color: var(--text-color);
    border-bottom-left-radius: var(--bps-radius);
    border-bottom-right-radius: var(--bps-radius)
}

/* Custom edge/corner resize handles + active outline for every .app-window (containers, pseudo windows,
   desktop remote windows). Handles are rendered by the host; windowDrag.js does the resizing. Side strips
   start below the titlebar so they never cover its buttons. */
.app-window, .floating-panel, .start-menu {
    --rz-thickness: 6px;
    --rz-corner: 14px;
    --rz-top-offset: 38px
}

/* The start menu has no titlebar; its handles (NavMenu, windowDrag.js dcTaskbar) sit on the sides away from the taskbar. */
.start-menu {
    --rz-top-offset: var(--rz-corner)
}

    :is(.app-window, .floating-panel, .start-menu) > .app-window-resizer {
        position: absolute;
        z-index: 30;
        background: transparent;
        touch-action: none
    }

        :is(.app-window, .floating-panel, .start-menu) > .app-window-resizer.rz-e, :is(.app-window, .floating-panel, .start-menu) > .app-window-resizer.rz-w {
            top: var(--rz-top-offset);
            bottom: var(--rz-corner);
            width: var(--rz-thickness);
            cursor: ew-resize
        }

        :is(.app-window, .floating-panel, .start-menu) > .app-window-resizer.rz-e { right: 0 }
        :is(.app-window, .floating-panel, .start-menu) > .app-window-resizer.rz-w { left: 0 }

        :is(.app-window, .floating-panel, .start-menu) > .app-window-resizer.rz-s {
            left: var(--rz-corner);
            right: var(--rz-corner);
            bottom: 0;
            height: var(--rz-thickness);
            cursor: ns-resize
        }

        :is(.app-window, .floating-panel, .start-menu) > .app-window-resizer.rz-n {
            left: var(--rz-corner);
            right: var(--rz-corner);
            top: 0;
            height: var(--rz-thickness);
            cursor: ns-resize
        }

        :is(.app-window, .floating-panel, .start-menu) > .app-window-resizer.rz-ne, :is(.app-window, .floating-panel, .start-menu) > .app-window-resizer.rz-nw {
            top: 0;
            width: var(--rz-corner);
            height: var(--rz-corner)
        }

        :is(.app-window, .floating-panel, .start-menu) > .app-window-resizer.rz-ne { right: 0; cursor: nesw-resize }
        :is(.app-window, .floating-panel, .start-menu) > .app-window-resizer.rz-nw { left: 0; cursor: nwse-resize }

        :is(.app-window, .floating-panel, .start-menu) > .app-window-resizer.rz-se, :is(.app-window, .floating-panel, .start-menu) > .app-window-resizer.rz-sw {
            bottom: 0;
            width: var(--rz-corner);
            height: var(--rz-corner)
        }

        :is(.app-window, .floating-panel, .start-menu) > .app-window-resizer.rz-se { right: 0; cursor: nwse-resize }
        :is(.app-window, .floating-panel, .start-menu) > .app-window-resizer.rz-sw { left: 0; cursor: nesw-resize }

            :is(.app-window, .floating-panel, .start-menu) > .app-window-resizer.rz-se::after {
                content: '';
                position: absolute;
                right: 3px;
                bottom: 3px;
                width: 8px;
                height: 8px;
                opacity: .45;
                background: linear-gradient(135deg,transparent 0 45%,currentColor 45% 55%,transparent 55% 100%),linear-gradient(135deg,transparent 0 70%,currentColor 70% 80%,transparent 80% 100%)
            }

        :is(.app-window, .floating-panel, .start-menu) > .app-window-resizer:hover {
            background: rgba(127,127,127,.18)
        }

    .app-window.window-resizing, .app-window.window-resizing * {
        user-select: none;
        -webkit-user-select: none
    }

    .app-window.maximized > .app-window-resizer {
        display: none
    }

    /* Maximized = the screen minus the taskbar (.bottom-nav, fixed to the edge the user picked, --taskbar-inset-*), for every top-level window:
       interface containers, the Open window / media player, desktop windows (file browser, media, documents,
       .dcremote). Fixed to the viewport so it no longer depends on the parent box (.desktop-windows-layer and
       group divs reach under the taskbar, a scrolled .dynamic-interface moved it). Windows nested in another
       window still maximize inside their parent; a window in browser fullscreen is left alone. */
    .app-window.maximized:not(.app-window .app-window):not(:fullscreen) {
        position: fixed !important;
        inset: var(--taskbar-inset-top, 0px) var(--taskbar-inset-right, 0px) var(--taskbar-inset-bottom, var(--bottom-nav-height)) var(--taskbar-inset-left, 0px) !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        transform: none !important
    }

    /* outline, not border: a border would change the size the ResizeObserver reports */
    .app-window.window-active {
        outline: var(--app-window-active-border-width) solid var(--app-window-active-border);
        outline-offset: -1px
    }

.window-taskbar-panel {
    z-index: 999999
}

.window-taskbar-body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    overflow: auto;
    height: 100%
}

.bqa-root, .window-taskbar-chip {
    border-radius: var(--bps-radius);
    color: var(--text-color)
}

.window-taskbar-chip {
    background: var(--primary-hover);
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: var(--text-size-small);
    font-family: var(--bps-font);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background .2s,border-color .2s
}

    .window-taskbar-chip:hover {
        background: color-mix(in srgb,var(--text-color) 20%,transparent);
        border-color: var(--secondary-color)
    }

.bqa-root {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--border-standard);
    background: var(--Purpleburstbackgrounddark)
}

.bqa-toolbar {
    flex: 1 0 auto;
    height: auto
}

.bqa-list {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    background: color-mix(in srgb,var(--primary-background) 15%,transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

.bqa-bottombar {
    flex: 0 0 auto
}

.bqa-field-label {
    display: block;
    font-size: var(--text-size-smaller);
    text-transform: uppercase;
    font-weight: 700;
    color: color-mix(in srgb,var(--text-color),var(--primary-background) 17%)
}

.bqa-field-label {
    margin-bottom: 4px
}

.bqa-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 2000;
    background: color-mix(in srgb,var(--primary-color) 95%,transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    list-style: none;
    margin: 2px 0 0;
    padding: 4px 0;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-sm);
    scroll-behavior: smooth
}

    .bqa-dropdown li {
        padding: 6px 10px;
        cursor: pointer
    }

        .bqa-dropdown li.active, .bqa-dropdown li:hover {
            background: var(--primary-hover);
            color: var(--text-color)
        }

.bqa-editor {
    background: color-mix(in srgb,var(--primary-background) 20%,transparent);
    border-top: 1px solid var(--component-border)
}

.bqa-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap: 1rem;
    align-items: start
}

.bqa-span-2 {
    grid-column: 1/-1
}

.bqa-draw-canvas-stack {
    position: relative;
    background: color-mix(in srgb,var(--primary-background),var(--text-color) 7%);
    border: 1px solid var(--component-border);
    border-radius: var(--radius-sm);
    overflow: hidden
}

.bqa-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: color-mix(in srgb,var(--text-color) 3%,transparent);
    border: 1px solid color-mix(in srgb,var(--AbsoluteComponentBGColor),var(--text-color) 30%,transparent 65%);
    border-radius: var(--bps-radius);
    padding: 8px 10px;
    transition: background .2s ease,border-color .2s ease
}

    .bqa-row:hover {
        background: color-mix(in srgb,var(--text-color) 6%,transparent);
        border-color: var(--secondary-color)
    }

.bqa-clear-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    background: 0 0;
    border: 0;
    padding: 0;
    line-height: 1;
    color: var(--text-lightgrey);
    cursor: pointer;
    font-size: var(--text-size-normal);
    display: flex;
    align-items: center
}

    .bqa-clear-btn:hover {
        color: var(--text-color)
    }

    .bqa-clear-btn:focus {
        outline: 0;
        box-shadow: none
    }

.ts-page {
    font-family: var(--bps-font);
    max-width: 1200px;
    margin: 0 auto;
    color: var(--text-color)
}

.ts-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap
}

    .ts-page-header h3 {
        margin: 0;
        font-size: var(--text-size-large);
        font-weight: 600;
        letter-spacing: -.01em
    }

.ts-subtitle, .ts-subtitle code {
    font-size: var(--text-size-small)
}

.ts-subtitle {
    margin: .15rem 0 0;
    opacity: .65
}

    .ts-subtitle code {
        padding: .1rem .35rem;
        border-radius: var(--radius-sm);
        background: color-mix(in srgb,var(--text-lightgrey) 15%,transparent)
    }

.ts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    gap: 1rem
}

.ts-card {
    border: 1px solid color-mix(in srgb,var(--text-lightgrey) 25%,transparent);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    transition: box-shadow .15s ease,transform .15s ease
}

    .ts-card:hover {
        box-shadow: 0 6px 20px color-mix(in srgb,var(--primary-background) 8%,transparent);
        transform: translateY(-2px)
    }

.ts-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    padding-bottom: .6rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid color-mix(in srgb,var(--text-lightgrey) 18%,transparent)
}

.ts-card-title {
    font-weight: 600;
    font-size: var(--text-size-normal);
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word
}

.ts-card-actions {
    display: flex;
    gap: .25rem;
    flex-shrink: 0
}

.ts-card-body {
    font-size: var(--text-size-small)
}


.ts-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer
}


.ts-icon-btn-danger:hover {
    background: color-mix(in srgb,var(--color-danger) 12%,transparent)
}

.ts-toggle {
    gap: .4rem
}

    .ts-toggle input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0
    }

.ts-toggle-track {
    width: 34px;
    height: 19px;
    border-radius: 999px;
    background: color-mix(in srgb,var(--text-lightgrey) 30%,transparent);
    position: relative;
    transition: background .15s ease;
    flex-shrink: 0
}

.ts-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--text-color);
    box-shadow: 0 1px 2px color-mix(in srgb,var(--primary-background) 30%,transparent);
    transition: transform .15s ease
}

.ts-toggle input:checked + .ts-toggle-track {
    background: var(--primary-color);
    opacity: .85
}

    .ts-toggle input:checked + .ts-toggle-track .ts-toggle-thumb {
        transform: translateX(15px)
    }

.ts-toggle-label {
    font-size: var(--text-size-smaller);
    font-weight: 600;
    opacity: .7
}

.ts-number-input {
    display: flex;
    align-items: stretch;
    border: 1px solid color-mix(in srgb,var(--text-lightgrey) 35%,transparent);
    border-radius: var(--radius-md);
    overflow: hidden;
    width: fit-content
}

.ts-number-btn {
    background: color-mix(in srgb,var(--text-lightgrey) 10%,transparent);
    border: 0;
    width: 30px;
    font-size: var(--text-size-normal);
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    transition: background .15s ease
}

    .ts-number-btn:hover {
        background: color-mix(in srgb,var(--text-lightgrey) 20%,transparent)
    }

.ts-number-field {
    border: 0;
    border-left: 1px solid color-mix(in srgb,var(--text-lightgrey) 35%,transparent);
    border-right: 1px solid color-mix(in srgb,var(--text-lightgrey) 35%,transparent);
    border-radius: 0;
    width: 80px;
    text-align: center
}

    .ts-number-field:focus {
        outline: 0
    }

.ts-empty, .ts-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 3.5rem 1rem;
    text-align: center;
    opacity: .75
}

    .ts-empty i {
        font-size: var(--text-size-large);
        opacity: .4
    }

.ts-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb,var(--text-lightgrey) 25%,transparent);
    border-top-color: var(--primary-color);
    animation: ts-spin .8s linear infinite
}

.ts-modal-backdrop {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb,var(--primary-background) 50%,transparent);
    backdrop-filter: blur(2px);
    z-index: 1040
}

.ts-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
    pointer-events: none
}

.ts-modal-content {
    pointer-events: auto;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb,var(--text-lightgrey) 25%,transparent);
    box-shadow: 0 20px 60px color-mix(in srgb,var(--primary-background) 35%,transparent);
    background: var(--primary-background);
    color: var(--text-color)
}

.ts-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid color-mix(in srgb,var(--text-lightgrey) 20%,transparent)
}

    .ts-modal-header h5 {
        margin: 0;
        font-size: var(--text-size-normal);
        font-weight: 600;
        min-width: 0;
        overflow-wrap: break-word;
        word-break: break-word
    }

.ts-modal-close {
    background: 0 0;
    border: 0;
    cursor: pointer;
    opacity: .6;
    font-size: var(--text-size-small);
    padding: .25rem;
    flex-shrink: 0;
    color: var(--text-color)
}

    .ts-modal-close:hover {
        opacity: 1
    }

.ts-modal-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .9rem
}

.ts-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid color-mix(in srgb,var(--text-lightgrey) 20%,transparent)
}

.ts-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 1
}

    .ts-field label {
        font-size: var(--text-size-smaller);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        opacity: .6
    }

.ts-input {
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb,var(--text-lightgrey) 35%,transparent);
    padding: .5rem .6rem;
    font-size: var(--text-size-small);
    background: 0 0;
    color: inherit;
    width: 100%
}

    .ts-input:focus {
        outline: 2px solid var(--primary-color);
        outline-offset: 1px
    }

select.ts-input {
    cursor: pointer
}

.ts-toast-container {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1100
}

.ts-toast {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1rem;
    border-radius: var(--bps-radius);
    font-size: var(--text-size-small);
    font-weight: 500;
    box-shadow: 0 8px 24px color-mix(in srgb,var(--primary-background) 25%,transparent);
    color: var(--text-color);
    animation: ts-toast-in .2s ease-out
}

.ts-toast-success {
    background: var(--color-success)
}

.ts-toast-error {
    background: var(--color-danger)
}

@container bps-app (min-width: 900px) {
    .bps-root.bps-mode-map .bps-main-content {
        display: grid !important;
        grid-template-columns: var(--bps-map-left-width, 1fr) 10px 1fr !important;
        grid-template-areas: "leftpanel handle rightpanel" !important;
        height: 100% !important;
        gap: 0 !important
    }

    .bps-root.bps-mode-map.bps-map-closed .bps-main-content {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr !important;
        grid-template-areas: "toolbar" "rightpanel" !important
    }

    .bps-root.bps-mode-map .bps-toolbar {
        grid-area: leftpanel !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        overflow-y: auto !important;
        padding-right: 10px;
        border-right: none
    }

    /* When the map is collapsed, "leftpanel" no longer exists in the grid above, so the
       toolbar (still showing its search bar / reopen chevron) would fall back to CSS grid
       auto-placement into an unnamed cell instead of disappearing cleanly - it needs its
       own named area, sized to its content, above the list. */
    .bps-root.bps-mode-map.bps-map-closed .bps-toolbar {
        grid-area: toolbar !important;
        height: auto !important;
        overflow-y: visible !important;
        padding-right: 0;
        border-right: none
    }

    .bps-root.bps-mode-map .bps-panel-resize-handle {
        grid-area: handle !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        cursor: col-resize !important;
        align-self: stretch
    }

    .bps-root.bps-mode-map.bps-map-closed .bps-panel-resize-handle {
        display: none !important
    }

    .bps-root.bps-mode-map .bps-list {
        grid-area: rightpanel !important;
        height: 100% !important;
        overflow-y: auto !important
    }
}

@container bps-app (max-width: 899.98px) {
    .bps-root.bps-mode-map .bps-main-content {
        display: block !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important
    }

    .bps-root.bps-mode-map .bps-toolbar {
        display: flex !important;
        flex-direction: column !important;
        height: var(--bps-map-top-height, 340px) !important;
        max-height: 70vh !important;
        flex-shrink: 0 !important;
        overflow-y: auto !important;
        border-right: none !important;
        padding-right: 0 !important
    }

    .bps-root.bps-mode-map.bps-map-closed .bps-toolbar {
        height: auto !important
    }

    .bps-root.bps-mode-map .bps-panel-resize-handle {
        display: block !important;
        width: 100% !important;
        height: 10px !important;
        cursor: row-resize !important;
        margin: 4px 0
    }

    .bps-root.bps-mode-map.bps-map-closed .bps-panel-resize-handle {
        display: none !important
    }

    .bps-root.bps-mode-map .bps-list {
        grid-area: unset !important;
        height: auto !important;
        min-height: 300px !important;
        overflow-y: visible !important;
        border-left: none !important;
        padding-left: 0 !important
    }
}

/* BeeplannerSearch map category on phones: floating map controls + list bottom sheet (see project doc beeplannersearch-map-mobile-layout.md) */
.bps-sheet-head, .bps-map-tools-more, .bps-map-nearest-chip, .bps-map-mode-banner {
    display: none
}

@container bps-app (max-width: 600px) {
    .bps-root.bps-mode-map:not(.bps-map-closed) .bps-main-content {
        --bps-float-inset: var(--control-pad-x);
        --bps-float-gap: var(--control-pad-y);
        --bps-float-top: calc(var(--control-height) + var(--control-pad-x) * 2);
        --bps-sheet-peek-h: calc(var(--radius-sm) * 3 + var(--mini-control-size) + var(--control-pad-y) + 1px);
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) var(--bps-sheet-h, 45%) !important;
        grid-template-areas: none !important;
        height: 100% !important;
        overflow: hidden !important;
        position: relative;
        transition: grid-template-rows .2s ease
    }

    .bps-root.bps-sheet-peek .bps-main-content {
        --bps-sheet-h: var(--bps-sheet-peek-h)
    }

    .bps-root.bps-sheet-half .bps-main-content {
        --bps-sheet-h: 45%
    }

    .bps-root.bps-sheet-full .bps-main-content {
        --bps-sheet-h: calc(100% - var(--bps-float-top))
    }

    .bps-root.bps-mode-map:not(.bps-map-closed) .bps-toolbar {
        grid-area: 1 / 1 / 2 / 2 !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        gap: 0 !important
    }

    .bps-root.bps-mode-map:not(.bps-map-closed) .bps-panel-resize-handle {
        display: none !important
    }

    .bps-root.bps-mode-map:not(.bps-map-closed) .bps-list {
        grid-area: 2 / 1 / 3 / 2 !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 var(--bps-float-gap) var(--bps-float-gap) !important;
        border-top: 1px solid var(--component-border);
        border-radius: var(--radius-md) var(--radius-md) 0 0
    }

    .bps-root.bps-sheet-peek .bps-list {
        overflow-y: hidden !important
    }

    .bps-root.bps-mode-map .bps-sheet-head {
        display: block;
        position: sticky;
        top: 0;
        z-index: 5;
        margin: 0 calc(var(--bps-float-gap) * -1) var(--bps-float-gap);
        padding: var(--radius-sm) var(--control-pad-x) var(--control-pad-y);
        background: var(--primary-color);
        color: var(--text-color);
        border-bottom: 1px solid var(--component-border);
        touch-action: none;
        user-select: none;
        cursor: pointer
    }

        .bps-root.bps-mode-map .bps-sheet-head > .d-flex {
            min-height: var(--mini-control-size)
        }

    .bps-sheet-grip {
        width: var(--control-height);
        height: var(--radius-sm);
        border-radius: var(--radius-xs);
        margin: 0 auto var(--radius-sm);
        background: color-mix(in srgb, var(--text-color) 40%, transparent)
    }

    .bps-root.bps-mode-map:not(.bps-map-closed) .bps-map-wrapper {
        position: relative;
        height: 100% !important;
        min-height: 0 !important
    }

        .bps-root.bps-mode-map:not(.bps-map-closed) .bps-map-wrapper .bps-map-container {
            min-height: 0 !important
        }

    .bps-root.bps-mode-map:not(.bps-map-closed) .bps-map-head {
        display: none !important
    }

    .bps-root.bps-mode-map:not(.bps-map-closed) .bps-map-search {
        position: absolute;
        top: var(--bps-float-inset);
        left: var(--bps-float-inset);
        right: var(--bps-float-inset);
        width: auto !important;
        margin: 0 !important;
        z-index: 1010;
        box-shadow: var(--shadow-lg)
    }

    .bps-root.bps-mode-map .bps-map-container .leaflet-top.leaflet-left {
        top: calc(var(--bps-float-top) - var(--bps-float-inset))
    }

    .bps-root.bps-mode-map .bps-map-wrapper:has(.bps-map-mode-banner) .leaflet-top.leaflet-left {
        top: calc(var(--bps-float-top) + var(--control-height) - var(--bps-float-inset))
    }

    .bps-root.bps-mode-map .bps-map-controls {
        position: static !important;
        margin: 0 !important
    }

    .bps-root.bps-mode-map .bps-map-tools {
        position: absolute;
        top: var(--bps-float-top);
        right: var(--bps-float-inset);
        z-index: 1010;
        flex-direction: column;
        flex-wrap: nowrap !important;
        gap: var(--bps-float-gap) !important;
        margin: 0 !important;
        max-height: calc(100% - var(--bps-float-top) * 2);
        overflow-y: auto;
        scrollbar-width: none
    }

        .bps-root.bps-mode-map .bps-map-tools > .btn {
            width: var(--control-height);
            height: var(--control-height);
            flex: 0 0 var(--control-height);
            padding: 0 !important;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-lg)
        }

        .bps-root.bps-mode-map .bps-map-tools:not(.open) > .bps-map-tool-extra:not(.btn-secondary) {
            display: none
        }

    .bps-root.bps-mode-map .bps-map-mode-banner {
        display: flex;
        position: absolute;
        top: var(--bps-float-top);
        left: var(--bps-float-inset);
        right: calc(var(--control-height) + var(--bps-float-inset) * 2);
        z-index: 1010
    }

    .bps-root.bps-mode-map .bps-map-nearest-chip {
        display: inline-flex;
        align-items: center;
        position: absolute;
        left: var(--bps-float-inset);
        bottom: var(--bps-float-inset);
        z-index: 1010;
        font-family: var(--font-mono);
        box-shadow: var(--shadow-lg)
    }

    .bps-root.bps-mode-map .bps-map-nearest {
        display: none !important
    }

        .bps-root.bps-mode-map .bps-map-nearest.open {
            display: flex !important;
            position: absolute;
            left: var(--bps-float-inset);
            right: calc(var(--control-height) + var(--bps-float-inset) * 2);
            bottom: calc(var(--control-height) + var(--bps-float-inset));
            width: auto !important;
            z-index: 1020
        }

    .bps-root.bps-mode-map .bps-map-geo {
        top: calc(var(--control-height) + var(--bps-float-inset)) !important;
        left: var(--bps-float-inset);
        right: var(--bps-float-inset);
        width: auto !important;
        z-index: 1030 !important
    }

    /* Floating parts get the theme's component colour without its transparency, so they read over the map */
    .bps-root.bps-mode-map:not(.bps-map-closed) .bps-main-content {
        --bps-float-bg: var(--AbsoluteComponentBGColor)
    }

    @supports (color: rgb(from red r g b / 1)) {
        .bps-root.bps-mode-map:not(.bps-map-closed) .bps-main-content {
            --bps-float-bg: rgb(from var(--AbsoluteComponentBGColor) r g b / 1)
        }
    }

    .bps-root.bps-mode-map .bps-map-search .form-control,
    .bps-root.bps-mode-map .bps-map-search .btn,
    .bps-root.bps-mode-map .bps-map-tools > .btn,
    .bps-root.bps-mode-map .bps-map-nearest-chip,
    .bps-root.bps-mode-map .bps-map-nearest,
    .bps-root.bps-mode-map .bps-map-route,
    .bps-root.bps-mode-map .bps-map-mode-banner,
    .bps-root.bps-mode-map .bps-map-geo .bps-geo-list,
    .bps-root.bps-mode-map .bps-map-geo .bps-geo-item {
        background-color: var(--bps-float-bg) !important
    }

    .bps-root.bps-mode-map .bps-map-search .btn:hover,
    .bps-root.bps-mode-map .bps-map-tools > .btn:hover,
    .bps-root.bps-mode-map .bps-map-nearest-chip:hover,
    .bps-root.bps-mode-map .bps-map-geo .bps-geo-item:hover,
    .bps-root.bps-mode-map .bps-map-geo .bps-geo-item-active {
        background-color: color-mix(in srgb, var(--bps-float-bg), var(--text-color) 12%) !important
    }

    .bps-root.bps-mode-map .bps-map-tools > .btn-secondary,
    .bps-root.bps-mode-map .bps-map-tools.open > .bps-map-tools-more,
    .bps-root.bps-mode-map .bps-map-nearest-chip.active {
        background-color: color-mix(in srgb, var(--bps-float-bg), var(--secondary-color) 30%) !important
    }

    .bps-root.bps-sheet-full .bps-map-tools,
    .bps-root.bps-sheet-full .bps-map-mode-banner,
    .bps-root.bps-sheet-full .bps-map-nearest-chip,
    .bps-root.bps-sheet-full .bps-map-nearest.open {
        display: none !important
    }
}


.font-mag-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--control-pad-y) var(--control-pad-x) var(--padding-default) var(--control-pad-x)
}

.font-mag-btn {
    flex: 1;
    background: var(--primary-hover);
    border: 1px solid var(--border-standard);
    color: var(--text-color);
    border-radius: var(--bps-radius);
    padding: var(--control-pad-y)0;
    font-family: var(--font-system);
    font-size: var(--control-font-size);
    line-height: 1.2;
    cursor: pointer
}

    .font-mag-btn:hover {
        background: color-mix(in srgb,var(--text-color) 18%,transparent);
        border-color: var(--component-border)
    }

.font-mag-value {
    min-width: 3.5em;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--text-size-smaller);
    color: var(--text-color);
    opacity: .85
}

.wallpaper-modal-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb,var(--primary-background) 55%,transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 24px
}

.wallpaper-modal {
    width: min(780px,100%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--primary-color);
    color: var(--text-color);
    border: 1px solid var(--border-standard);
    border-radius: 10px;
    box-shadow: 0 18px 48px color-mix(in srgb,var(--primary-background) 50%,transparent);
    overflow: hidden
}

.wallpaper-modal-title {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: calc(.95rem*var(--font-magnification, 1));
    font-weight: 600;
    border-bottom: 1px solid color-mix(in srgb,var(--text-color) 10%,transparent)
}


.wallpaper-modal-close {
    background: 0 0;
    border: 0;
    color: inherit;
    font-size: calc(1.35rem*var(--font-magnification, 1));
    line-height: 1;
    cursor: pointer;
    padding: 0 4px
}

.wallpaper-thumb-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
    grid-auto-rows: min-content;
    align-content: start;
    gap: 10px;
    padding: 14px;
    overflow-y: auto
}

.wallpaper-thumb-wrapper {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-standard);
    background: color-mix(in srgb,var(--primary-background) 30%,transparent)
}

.wallpaper-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform .15s ease
}

.wallpaper-thumb-wrapper.active {
    border-color: var(--app-window-active-border);
    box-shadow: 0 0 0 1px var(--app-window-active-border)
}

.wallpaper-thumb-wrapper:hover .wallpaper-thumb {
    transform: scale(1.05)
}

.wallpaper-thumb-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 4px;
    opacity: .55;
    transition: opacity .15s ease
}

.wallpaper-thumb-wrapper:hover .wallpaper-thumb-actions {
    opacity: 1
}

.wallpaper-action-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: var(--text-size-smaller);
    color: var(--text-color);
    background: color-mix(in srgb,var(--primary-background) 60%,transparent);
    cursor: pointer
}

    .wallpaper-action-btn:hover {
        background: color-mix(in srgb,var(--primary-background) 85%,transparent)
    }

.wallpaper-delete-btn:hover {
    background: var(--color-danger)
}

.wallpaper-thumb-size {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 5px;
    font-size: calc(.62rem*var(--font-magnification, 1));
    color: var(--text-color);
    background: linear-gradient(transparent,color-mix(in srgb,var(--primary-background) 80%,transparent));
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.wallpaper-picker-empty {
    padding: 28px 16px;
    text-align: center;
    font-size: var(--text-size-small);
    opacity: .7
}

.wallpaper-modal-upload, .wallpaper-modal-clear {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    font-size: calc(.72rem*var(--font-magnification, 1));
    color: inherit;
    background: color-mix(in srgb,var(--text-color) 8%,transparent);
    border: 1px solid color-mix(in srgb,var(--text-color) 18%,transparent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap
}

    .wallpaper-modal-upload i, .wallpaper-modal-clear i {
        font-size: calc(.8rem*var(--font-magnification, 1));
        line-height: 1
    }

    .wallpaper-modal-upload:hover {
        background: color-mix(in srgb,var(--text-color) 16%,transparent)
    }

    .wallpaper-modal-clear:hover {
        background: var(--color-danger);
        border-color: var(--color-danger)
    }

/* Shared picker layout (wallpaper, interface icon, window icon, theme system icons):
   title + close / current strip / error / grid / footer with Upload + Remove. */
.wallpaper-modal-current {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    font-size: var(--text-size-small);
    border-bottom: 1px solid color-mix(in srgb,var(--text-color) 10%,transparent)
}

.wallpaper-modal-current-preview {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 42px;
    border: 1px solid var(--border-standard);
    border-radius: var(--radius-md);
    background: color-mix(in srgb,var(--primary-background) 30%,transparent);
    overflow: hidden
}

    .wallpaper-modal-current-preview img, .wallpaper-modal-current-preview video, .wallpaper-modal-current-preview svg {
        display: block;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain
    }

.wallpaper-modal-error {
    flex: 0 0 auto;
    margin: 10px 14px 0;
    padding: 4px 8px;
    font-size: var(--text-size-small);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb,var(--color-danger) 15%,transparent)
}

.wallpaper-modal-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid color-mix(in srgb,var(--text-color) 10%,transparent)
}

.wallpaper-modal-hint {
    margin-left: auto;
    font-size: calc(.72rem*var(--font-magnification, 1));
    opacity: .7;
    text-align: right
}

/* Icon libraries: square tiles, whole icon visible. */
.wallpaper-thumb-grid.icon-thumb-grid {
    grid-template-columns: repeat(auto-fill,minmax(88px,1fr))
}

    .icon-thumb-grid .wallpaper-thumb-wrapper {
        aspect-ratio: 1
    }

    .icon-thumb-grid .wallpaper-thumb {
        object-fit: contain;
        padding: 14px 14px 18px
    }

.bps-row-compact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    transition: background .2s,border-color .6s
}

.bps-compact-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: .5rem;
    row-gap: 4px;
    width: 100%;
    min-width: 0;
    padding: 4px
}

.bps-row-compact .bps-item-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: 0 0
}

.bps-mini-btn, .bps-mini-color {
    width: var(--mini-control-size);
    height: var(--mini-control-size);
    min-width: var(--mini-control-size);
    padding: 0;
    border-radius: var(--radius-sm);
    flex-shrink: 0
}

.bps-mini-btn {
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: var(--mini-control-icon)
}

.bps-mini-color {
    margin: 0;
    border: 1px solid var(--component-border);
    background: 0 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none
}

    .bps-mini-color::-webkit-color-swatch-wrapper {
        padding: 0
    }

    .bps-mini-color::-webkit-color-swatch {
        border: 0;
        border-radius: 3px
    }

    .bps-mini-color::-moz-color-swatch {
        border: 0;
        border-radius: 3px
    }

.bps-col-number {
    flex: none;
    min-width: 150px;
    max-width: 150px;
    font-size: var(--text-size-smaller * 1.5)
}

.bps-col-desc, .bps-col-name {
    flex: 2 1 140px;
    min-width: 110px;
    font-size: var(--text-size-smaller)
}

.bps-col-desc {
    flex: 999 1 180px;
    min-width: 120px
}

.bps-inline-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: .5rem;
    row-gap: 4px;
    flex: 0 1 auto;
    min-width: 300px;
    justify-content: flex-end
}

.bps-ctl-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    white-space: nowrap
}

.bps-row-compact .bps-field-label {
    font-size: var(--text-size-smaller);
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    opacity: .75;
    flex-shrink: 0
}

.bps-mini-input {
    height: 24px;
    font-size: var(--text-size-smaller);
    padding: 0 6px;
    min-width: 0;
    flex: 1 1 auto
}

.bps-prio-input.bps-mini-input {
    flex: 0 0 46px;
    width: 46px;
    text-align: center
}

.bps-row-actions {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-left: auto
}

    .bps-row-actions > .btn, .bps-row-actions > .btn-group {
        flex: 1 1 auto
    }

.bps-mini-action {
    padding: 2px 7px;
    line-height: 1.1;
    font-size: var(--text-size-smaller);
    flex: 1 1 auto;
    min-width: 32px
}

.bps-distance-text {
    font-size: var(--text-size-smaller);
    opacity: .8;
    white-space: nowrap;
    flex-shrink: 0
}

.bps-row-compact .form-check.form-switch {
    display: flex;
    align-items: center;
    padding-left: 0;
    margin: 0;
    min-height: 0
}

    .bps-row-compact .form-check.form-switch .form-check-input {
        margin: 0;
        float: none;
        width: var(--mini-switch-width);
        height: var(--mini-switch-height);
        flex-shrink: 0
    }

.bps-row-html {
    overflow-x: auto;
    padding-top: 2px;
    border-top: 1px solid color-mix(in srgb,var(--component-border) 40%,transparent)
}

/* Narrow list (phones, small windows): every row is two dense lines instead of 4-5 wrapped ones.
   Based on the list's own width (container bps-list), so it also works next to the map. */
@container bps-list (max-width: 640px) {
    /* Subdata rows (RenderSubdataRow).
       Line 1: select/icon/colour, number, name, then ... / star / edit.
       Line 2: description, then Active / Prio / Note (labels hidden, tooltips stay). */
    .bps-row.bps-row-compact {
        padding: 2px 4px !important;
        margin-bottom: 0 !important;
        gap: 0
    }

    .bps-row-compact .bps-compact-line {
        column-gap: 4px;
        row-gap: 2px;
        padding: 0
    }

        .bps-row-compact .bps-compact-line::after {
            content: "";
            order: 5;
            flex-basis: 100%;
            height: 0
        }

    .bps-row-compact .bps-inline-controls,
    .bps-row-compact .bps-row-actions {
        display: contents
    }

    .bps-row-compact .bps-item-controls {
        order: 1
    }

    .bps-row-compact .bps-col-number {
        order: 2;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 28%
    }

    .bps-row-compact .bps-col-name {
        order: 3;
        flex: 1 1 0;
        min-width: 0
    }

    .bps-row-compact .bps-row-actions > * {
        order: 4;
        flex: 0 0 auto
    }

    .bps-row-compact .bps-row-actions > .btn,
    .bps-row-compact .bps-row-actions > .btn-group > .btn {
        border-radius: var(--radius-sm) !important;
        margin-left: 0 !important
    }

    .bps-row-compact .bps-col-desc {
        order: 6;
        flex: 1 1 0;
        min-width: 0
    }

    .bps-row-compact .bps-ctl-group {
        order: 7
    }

    .bps-row-compact .bps-field-label {
        display: none
    }

    /* Category rows (@foreach n in _items). Icon spans both lines; name + note + buttons on
       line 1, description under the name. !important beats the row's inline styles. */
    .bps-row.flex-wrap:not(.bps-row-compact) {
        display: grid !important;
        grid-template-columns: auto auto minmax(0,1fr) auto auto;
        grid-template-areas: "icon color name note actions" "icon color desc desc desc";
        align-items: center;
        gap: 0 6px !important;
        padding: 2px 4px;
        margin-bottom: 0
    }

        .bps-row.flex-wrap:not(.bps-row-compact) > :first-child {
            grid-area: icon;
            width: 36px !important
        }

            .bps-row.flex-wrap:not(.bps-row-compact) > :first-child > div {
                width: 36px !important;
                height: 36px !important
            }

        .bps-row.flex-wrap:not(.bps-row-compact) > :has(> input[type=color]) {
            grid-area: color;
            width: 22px !important
        }

            .bps-row.flex-wrap:not(.bps-row-compact) > :has(> input[type=color]) > input {
                width: 22px !important;
                height: 22px !important
            }

        .bps-row.flex-wrap:not(.bps-row-compact) > .fw-semibold {
            grid-area: name;
            min-width: 0 !important
        }

        .bps-row.flex-wrap:not(.bps-row-compact) > .col-description {
            grid-area: desc;
            min-width: 0 !important
        }

        .bps-row.flex-wrap:not(.bps-row-compact) > .ms-auto {
            grid-area: note;
            margin: 0 !important
        }

        .bps-row.flex-wrap:not(.bps-row-compact) > .ms-2 {
            grid-area: actions;
            margin: 0 !important
        }

        .bps-row.flex-wrap:not(.bps-row-compact) .btn-sm {
            padding: 2px 7px !important
        }
}

.form-label {
    font-size: var(--text-size-normal)
}

.form-check-label, .form-label, label {
    display: flex !important;
    color: color-mix(in srgb,var(--text-color),var(--primary-background) 17%);
    text-transform: uppercase;
    font-weight: 700
}

.file-browser-container {
    position: relative;
    container-type: inline-size;
    container-name: fb;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    border-radius: var(--bps-radius);
    font-family: var(--font-system);
    font-size: var(--text-size-small);
    background: var(--Purpleburstbackgrounddark) !important;
    border: 1px solid var(--border-standard) !important;
    color: var(--text-color) !important
}

    .file-browser-container .mud-toolbar,
    .file-browser-container .mud-toolbar.mud-toolbar-dense {
        flex: 0 0 auto; /* <- the fix: never shrink below content height */
        flex-wrap: wrap;
        height: auto !important;
        min-height: 48px;
        align-items: center;
        align-content: flex-start;
        column-gap: 8px;
        row-gap: 4px;
        padding: 4px 8px
    }

        .file-browser-container .mud-toolbar .mud-button-group-root {
            flex: 0 0 auto;
            margin-left: auto
        }

.fb-layout-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    min-height: 0;
    overflow: hidden
}

/* MediaPlayer reuses .fb-layout-container/.fb-sidebar for its stage+playlist layout; the
   playlist sits on the right, so the divider needs to move to the sidebar's other edge and
   the panel wants a bit more room for track names than a folder tree does. */
.mp-sidebar {
    width: 280px;
    border-right: 0;
    border-left: 1px solid var(--border-standard)
}

/* Splitter left of the playlist (looks like .bps-panel-resize-handle, dragged by mediaPlayerInterop). */
.mp-split {
    width: 6px;
    cursor: col-resize
}

/* Fullscreen mode (mediaPlayerInterop.toggleFullscreen) hands the browser's native Fullscreen
   API just the bare <video> element -- our own toolbar/playlist live outside it and wouldn't be
   reachable while fullscreened, so native play/seek/volume/exit controls take over for that
   duration. object-fit:contain on the element letterboxes automatically; this just keeps those
   bars black instead of the UA default (usually already black, but not guaranteed everywhere). */
.mp-root video:fullscreen {
    background: #000;
}

/* Loading box / messages floating over the player's stage (replaces the old top bar). */
.mp-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    max-width: calc(100% - 24px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb,var(--primary-background) 60%,transparent);
    backdrop-filter: blur(6px);
    color: var(--text-color);
    box-shadow: 0 10px 30px color-mix(in srgb,#000 40%,transparent);
    pointer-events: none;
    z-index: 2
}

/* Picture enhance panel (sharpen / denoise), top right of the stage. */
.mp-overlay-fx {
    left: auto;
    right: 12px;
    top: 12px;
    transform: none;
    width: 240px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    font-size: var(--text-size-small);
    pointer-events: auto;
    z-index: 3
}

.mp-overlay-msg {
    top: auto;
    bottom: 12px;
    transform: translateX(-50%);
    pointer-events: auto;
    cursor: pointer
}

/* Centred status card (DynamicInterface loading / error / empty). 90% opaque. */
.center-status {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 50;
    max-width: min(420px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 22px 28px;
    text-align: center;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-standard);
    background: color-mix(in srgb,var(--primary-background) 90%,transparent);
    backdrop-filter: blur(6px);
    color: var(--text-color);
    box-shadow: 0 10px 30px color-mix(in srgb,#000 40%,transparent)
}

.center-status-danger {
    border-color: var(--color-danger)
}

.center-status-warning {
    border-color: var(--color-warning)
}

.center-status-title {
    font-weight: 600
}

.center-status-danger .center-status-title {
    color: var(--color-danger)
}

.center-status-warning .center-status-title {
    color: var(--color-warning)
}

.center-status-text {
    overflow-wrap: anywhere
}

/* Card placed by a flex parent (e.g. .bps-wait-overlay) instead of fixed to the viewport */
.center-status-inline {
    position: static;
    transform: none
}

/* dcNotify() message (replaces browser alert()): above all windows, click to close */
.center-status-popup {
    z-index: 2147483600;
    cursor: pointer;
    white-space: pre-line
}

/* Blur everything behind a body-level popup card (dcNotify message, Blazor error) while it shows. Clicks still pass through. */
body:has(> .center-status-popup)::before,
body:has(#blazor-error-ui[style*="block"])::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483590;
    pointer-events: none;
    background: color-mix(in srgb,#000 20%,transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px)
}

/* Blazor error bar (_Host.cshtml) as a centred danger card. Blazor sets style="display: block" to show it. */
#blazor-error-ui {
    display: none;
    z-index: 2147483600
}

    #blazor-error-ui[style*="block"] {
        display: flex !important
    }

    #blazor-error-ui .dismiss {
        position: absolute;
        top: 6px;
        right: 10px;
        cursor: pointer;
        text-decoration: none;
        color: var(--text-color);
        opacity: .7
    }

        #blazor-error-ui .dismiss:hover {
            opacity: 1
        }

/* Blazor reconnect box (_Host.cshtml): dimmed full screen + centred .center-status card, one text block per state */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb,#000 35%,transparent);
    backdrop-filter: blur(6px); /* blur the whole app behind "Connection lost" / "Could not reconnect" */
    -webkit-backdrop-filter: blur(6px)
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        display: flex
    }

    #components-reconnect-modal .dc-reconnect-state {
        display: none
    }

    #components-reconnect-modal.components-reconnect-show .dc-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed .dc-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected .dc-reconnect-rejected {
        display: contents
    }

    #components-reconnect-modal.components-reconnect-failed .center-status {
        border-color: var(--color-warning)
    }

    #components-reconnect-modal.components-reconnect-failed .center-status-title {
        color: var(--color-warning)
    }

    #components-reconnect-modal.components-reconnect-rejected .center-status {
        border-color: var(--color-danger)
    }

    #components-reconnect-modal.components-reconnect-rejected .center-status-title {
        color: var(--color-danger)
    }

.center-status-hourglass,
.center-status-printer {
    width: 40px;
    height: 40px;
    fill: #fff;
    mix-blend-mode: difference; /* white + difference = inverse of whatever is behind it, always visible */
    animation: hourglass-flip 1.6s ease-in-out infinite
}

/* Printer instead of the hourglass (DcRemote "Printout received"): a page slides out of the slot while the light blinks */
.center-status-printer {
    animation: none;
    overflow: visible
}

.center-status-printer-paper {
    animation: printer-paper 2s ease-out infinite
}

.center-status-printer-light {
    animation: printer-light .5s steps(1) infinite
}

@keyframes printer-paper {
    0% {
        transform: translateY(-9px);
        opacity: 1
    }

    65%, 85% {
        transform: translateY(0);
        opacity: 1
    }

    100% {
        transform: translateY(0);
        opacity: 0
    }
}

@keyframes printer-light {
    50% {
        opacity: 0
    }
}

@keyframes hourglass-flip {
    0%, 60% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(180deg)
    }
}

/* Window snapping (windowDrag.js): ghost of where a dragged window lands + top snap-layout picker. */
.snap-ghost {
    position: fixed;
    z-index: 2147483000;
    pointer-events: none;
    border-radius: var(--radius-lg);
    border: 2px solid var(--primary-color);
    background: color-mix(in srgb,var(--primary-color) 18%,transparent);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .12s ease, left .12s ease, top .12s ease, width .12s ease, height .12s ease
}

    .snap-ghost.show {
        opacity: 1
    }

.snap-picker {
    position: fixed;
    z-index: 2147483001;
    pointer-events: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
    padding: 10px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-standard);
    background: color-mix(in srgb,var(--primary-background) 90%,transparent);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px color-mix(in srgb,#000 40%,transparent);
    opacity: 0;
    transition: opacity .15s ease
}

    .snap-picker.show {
        opacity: 1
    }

.snap-picker-layout {
    position: relative;
    width: 72px;
    height: 46px;
    border-radius: var(--radius-sm, 4px);
    background: color-mix(in srgb,var(--text-color) 6%,transparent)
}

.snap-picker-zone {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 5px;
    background-color: color-mix(in srgb,var(--text-color) 22%,transparent);
    transition: background-color .08s ease
}

    .snap-picker-zone.active {
        background-color: var(--primary-color)
    }

.fb-sidebar {
    width: var(--fb-sidebar-width);
    flex: 0 0 auto;
    overflow-y: auto;
    border-right: 1px solid var(--border-standard)
}

.file-grid-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden
}

    .file-grid-area .mud-table-container {
        height: 100% !important
    }

    /* Select column: same fixed inset in wide and compact mode, so the checkbox never
       slides under the component's left border. */
    .file-grid-area .mud-table-cell:first-child {
        width: 1%;
        padding-left: 12px !important;
        padding-right: 4px !important
    }

.file-browser-container .mud-typography-h6 {
    font-size: var(--text-size-small);
    font-weight: 600
}

.file-browser-container .mud-button-root, .file-browser-container .mud-input, .file-browser-container .mud-input-root, .file-browser-container .mud-typography-body1, .file-browser-container .mud-typography-body2 {
    font-size: var(--text-size-smaller)
}

.file-browser-container .mud-input-root {
    color: var(--text-color)
}

.file-browser-container .mud-chip, .file-browser-container .mud-input-label, .file-browser-container .mud-typography-caption {
    font-size: var(--text-size-smaller)
}

.file-browser-container .mud-icon-root.mud-svg-icon {
    font-size: var(--fb-icon-size);
    width: 1em;
    height: 1em
}

.file-browser-container .mud-icon-size-large {
    font-size: calc(var(--fb-icon-size)*2)
}

.file-browser-container .mud-toolbar {
    background: color-mix(in srgb,var(--primary-background) 20%,transparent) !important;
    border-bottom: 1px solid var(--border-standard) !important
}

.file-browser-container .mud-button-group-outlined .mud-button-root {
    border-color: var(--component-border);
    color: var(--text-color)
}

.file-browser-container .mud-icon-button.mud-error-text {
    color: var(--color-danger)
}

.fb-context-menu .mud-list-item:hover .mud-icon-root, .file-browser-container .mud-chip.mud-chip-text.mud-chip-color-info {
    color: var(--text-color)
}

.file-browser-container .mud-treeview-item-content {
    font-size: var(--text-size-small);
    color: var(--text-color) !important
}

    .file-browser-container .mud-table-row:hover, .file-browser-container .mud-treeview-item-content:hover {
        background-color: var(--primary-hover) !important
    }

.file-browser-container .mud-table-head {
    background-color: color-mix(in srgb,var(--text-color) 5%,transparent) !important
}

.file-browser-container .mud-th {
    font-size: var(--text-size-smaller);
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--text-color) !important
}

.file-browser-container .mud-table-cell {
    font-size: var(--text-size-small);
    color: var(--text-color) !important;
    border-bottom: 1px solid var(--border-standard) !important
}

.fb-upload-item {
    border: 1px solid var(--component-border)
}

.fb-upload-item {
    background-color: color-mix(in srgb,var(--primary-background) 50%,transparent)
}

.fb-upload-name {
    font-weight: 700
}

.fb-breadcrumb-bar {
    flex: 0 0 auto;
    min-height: calc(2rem*var(--font-magnification, 1));
    background: color-mix(in srgb,var(--primary-background) 20%,transparent);
    border-top: 1px solid var(--border-standard)
}

.file-browser-container .mud-breadcrumb-item {
    font-size: var(--text-size-small);
    color: var(--text-color) !important
}

    .file-browser-container .mud-breadcrumb-item a:hover {
        color: var(--text-color) !important
    }

.fb-context-backdrop {
    position: absolute;
    inset: 0;
    z-index: 9998
}

/* Long press = right-click on touch (js/longPress.js): no iOS callout or text selection on the items. */
[data-longpress] [data-lp-item] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none
}

.fb-context-menu {
    position: absolute;
    z-index: 9999;
    min-width: var(--fb-menu-min-width);
    padding: 4px 0;
    background: var(--Purpleburstbackgrounddark) !important;
    border: 1px solid var(--component-border);
    border-radius: var(--bps-radius);
    color: var(--text-color) !important;
    font-family: var(--font-system);
    box-shadow: var(--shadow-lg)
}

    .fb-context-menu .mud-list-item {
        font-size: var(--text-size-small);
        color: var(--text-color);
        cursor: pointer;
        border-left: 3px solid transparent;
        transition: background-color .12s ease,border-left-color .12s ease,color .12s ease
    }

        .fb-context-menu .mud-list-item:focus-visible, .fb-context-menu .mud-list-item:hover {
            background-color: color-mix(in srgb,var(--secondary-color) 18%,transparent);
            border-left-color: var(--secondary-color);
            color: var(--text-color)
        }

    .fb-context-menu .fb-context-danger:focus-visible, .fb-context-menu .fb-context-danger:hover {
        background-color: color-mix(in srgb,var(--color-danger) 20%,transparent);
        border-left-color: var(--color-danger);
        color: var(--color-danger)
    }

        .fb-context-menu .fb-context-danger:hover .mud-icon-root {
            color: var(--color-danger)
        }

    .fb-context-menu .mud-divider:hover {
        background-color: transparent
    }


@container fb (max-width: 768px) {
    .fb-layout-container {
        flex-direction: column
    }

    .fb-sidebar {
        width: 100%;
        height: var(--fb-sidebar-mobile-height);
        flex: 0 0 auto;
        border-right: 0;
        border-bottom: 1px solid var(--border-standard)
    }
}

/* Compact file rows in narrow browsers (phones, small windows). The grid uses
   Breakpoint.None so it never turns into MudBlazor's stacked card layout; here Type and
   Date are dropped, cells stay on one line and long names get an ellipsis.
   Columns: 1 select, 2 name, 3 size, 4 type, 5 date. */
@container fb (max-width: 560px) {
    .file-grid-area .mud-table-cell {
        white-space: nowrap
    }

    .file-grid-area .mud-table-cell:not(:first-child) {
        padding: 2px 6px !important
    }

    .file-grid-area .mud-table-cell:nth-child(4),
    .file-grid-area .mud-table-cell:nth-child(5) {
        display: none
    }

    .file-grid-area td.mud-table-cell:nth-child(2) {
        width: 100%;
        max-width: 0;
        overflow: hidden
    }

    .file-grid-area td.mud-table-cell:nth-child(2) div {
        min-width: 0
    }

    .file-grid-area td.mud-table-cell:nth-child(2) .mud-typography {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

@container fb (max-width: 560px) {
    .file-browser-container .mud-toolbar .mud-spacer {
        flex-basis: 100%;
        height: 0
    }

    .file-browser-container .mud-toolbar .mud-button-group-root {
        margin-left: 0
    }
}

@container fb (max-width: 380px) {
    .file-browser-container .mud-toolbar .mud-button-group-root {
        flex-wrap: wrap
    }

    .file-browser-container .mud-toolbar .mud-icon-button {
        padding: 4px
    }
}

@media (max-width:768px) {
    .bps-col-desc {
        flex: 1 1 100%;
        order: 5
    }

    .bps-inline-controls {
        flex: 1 1 100%;
        min-width: 0;
        order: 6;
        justify-content: flex-start
    }

    .bps-row-actions {
        margin-left: auto
    }

    .fb-layout-container {
        flex-direction: column
    }

    .fb-sidebar {
        width: 100%;
        height: var(--fb-sidebar-mobile-height);
        border-right: 0;
        border-bottom: 1px solid var(--border-standard)
    }

    /* Phones / small screens: no folder tree in FileBrowser (every file browser and picker
       window uses it). Navigation is the grid, breadcrumbs and Up. MediaPlayer's playlist
       (.mp-sidebar, not inside .file-browser-container) keeps the stacked layout above. */
    .file-browser-container .fb-sidebar {
        display: none
    }

    /* Playlist stacked under the picture: nothing to drag sideways */
    .mp-split {
        display: none
    }
}

.tiptap-root, .tiptap-toolbar {
    display: flex;
    width: 100%;
    min-width: 0;
    box-sizing: border-box
}

/* Always exactly 100% of the outer div: never smaller, never larger. */
.tiptap-root {
    flex-direction: column;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    flex: 1 1 100%;
    align-self: stretch;
    overflow: hidden;
    border: 1px solid var(--component-border);
    border-radius: var(--bps-radius);
    background: var(--primary-background);
    container-type: inline-size;
    container-name: tiptap
}

.tiptap-toolbar {
    --tiptap-toolbar-row: 40px;
    backdrop-filter: blur(4px);
    /* was: flex: 0 0 40px with fixed min/max height */
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: var(--tiptap-toolbar-row);
    /* two rows max, then scroll vertically */
    max-height: calc(var(--tiptap-toolbar-row) * 2);
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    column-gap: 4px;
    row-gap: 4px;
    padding: 4px 6px;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none !important;
    background: var(--primary-color);
    border: 0;
    border-bottom: 1px solid var(--component-border);
    border-radius: 0
}

@container tiptap (max-width: 560px) {
    .tiptap-toolbar .tth-menu-trigger .tth-caret,
    .tiptap-toolbar .tth-menu-trigger .tth-label {
        display: none
    }
}

@container tiptap (max-width: 380px) {
    .tiptap-toolbar {
        --tiptap-toolbar-row: 34px
    }

        .tiptap-toolbar button {
            padding: 3px 5px
        }
}


.tiptap-toolbar::-webkit-scrollbar {
    display: none !important
}

.tiptap-toolbar > * {
    flex-shrink: 0
}

.tiptap-toolbar > .tth-spacer {
    flex: 1 1 0;
    min-width: 0
}

/* Takes whatever height is left after the toolbar; content scrolls instead of growing it. */
.tiptap-editor {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--primary-background);
    color: var(--text-color)
}

    .tiptap-editor .ProseMirror {
        flex: 1 1 0;
        min-width: 0;
        min-height: 0;
        box-sizing: border-box;
        padding: 12px;
        outline: 0;
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: anywhere;
        overflow-x: auto;
        overflow-y: auto;
        line-height: var(--tiptap-line-height, inherit)
    }

        /* Row spacing, per user (Spacing menu -> UserData.TiptapLineHeight / TiptapParagraphSpacing).
           Set on <html> by tiptapHelper.applySpacing; unset = Bootstrap's 1rem. */
        .tiptap-editor .ProseMirror p {
            margin-bottom: var(--tiptap-paragraph-spacing, 1rem)
        }

        .tiptap-editor .ProseMirror img {
            max-width: 100%;
            height: auto
        }

        .tiptap-editor .ProseMirror pre,
        .tiptap-editor .ProseMirror table {
            max-width: 100%;
            overflow-x: auto
        }

.tiptap-disabled .tiptap-toolbar {
    pointer-events: none;
    opacity: .6
}

.tiptap-host {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    width: 100%
}

/* Read-only Tiptap that grows with its content inside a list (guestbook entries): no toolbar, no frame, no inner scroll. */
.tiptap-autoheight,
.tiptap-autoheight .tiptap-root,
.tiptap-autoheight .tiptap-editor,
.tiptap-autoheight .tiptap-editor .ProseMirror {
    height: auto;
    min-height: 0;
    max-height: none;
    flex: 0 0 auto;
    overflow: visible
}

    .tiptap-autoheight .tiptap-toolbar {
        display: none
    }

    .tiptap-autoheight .tiptap-root,
    .tiptap-autoheight .tiptap-editor {
        border: 0;
        background: transparent
    }

    .tiptap-autoheight .tiptap-editor .ProseMirror {
        padding: 0
    }

/* Tiptap find / replace bar (Edit menu, Ctrl+F / Ctrl+H), between the toolbar and the text.
   Buttons reuse the editor's own .tth-standalone / .tth-menu-trigger. */
.tth-findbar {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 4px 6px;
    background: var(--primary-color);
    color: var(--text-color);
    border-bottom: 1px solid var(--component-border)
}

    .tth-findbar[hidden] {
        display: none
    }

    .tth-findbar .tth-active {
        border-color: var(--secondary-color);
        background: color-mix(in srgb, var(--secondary-color) 18%, transparent)
    }

.tth-find-group {
    display: flex;
    flex: 1 1 260px;
    align-items: center;
    gap: 4px;
    min-width: 0
}

    .tth-find-group .form-control {
        flex: 1 1 120px;
        width: auto;
        min-width: 80px
    }

.tth-find-count {
    min-width: 4.5em;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    opacity: .75
}

/* Matches (CSS Custom Highlight API, set by tiptapHelper's find bar). */
::highlight(tth-find) {
    background-color: color-mix(in srgb, var(--secondary-color) 30%, transparent)
}

::highlight(tth-find-current) {
    background-color: var(--secondary-color);
    color: var(--primary-color)
}

/* Word count under document windows (TiptapDocument). */
.tth-statusbar {
    flex: 0 0 auto;
    padding: 2px 10px;
    overflow: hidden;
    border-top: 1px solid var(--component-border);
    background: var(--primary-color);
    color: var(--text-color);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: .8
}

/* View > Page view (document windows): the text on an A4-wide sheet with page margins. */
.tiptap-root.tth-page-view .tiptap-editor {
    overflow-y: auto;
    padding: 16px 8px;
    background: color-mix(in srgb, var(--primary-background) 88%, var(--text-color))
}

    .tiptap-root.tth-page-view .tiptap-editor .ProseMirror {
        flex: 0 0 auto;
        width: 100%;
        max-width: 21cm;
        min-height: 29.7cm;
        margin: 0 auto;
        padding: clamp(12px, 7%, 2cm);
        overflow: visible;
        border: 1px solid var(--component-border);
        background: var(--primary-background);
        box-shadow: var(--shadow-md)
    }

/* Layout menu: picture position (data-align on the picture's node view, none = left). */
.tiptap-editor .tth-img-wrap[data-align="center"],
.tiptap-editor .tth-img-wrap[data-align="right"] {
    display: block;
    width: fit-content;
    margin-left: auto
}

.tiptap-editor .tth-img-wrap[data-align="center"] {
    margin-right: auto
}

.tiptap-editor .tth-img-wrap[data-align="wrap-left"] {
    float: left;
    margin: 4px 14px 8px 0
}

.tiptap-editor .tth-img-wrap[data-align="wrap-right"] {
    float: right;
    margin: 4px 0 8px 14px
}

/* Layout menu: text columns. The column count / gap / line come from the inline style. */
.tiptap-editor .ProseMirror div[data-columns] {
    margin: 0 0 var(--tiptap-paragraph-spacing, 1rem);
    display: flow-root
}

    .tiptap-editor .ProseMirror[contenteditable="true"] div[data-columns] {
        outline: 1px dashed var(--component-border);
        outline-offset: 4px
    }

    .tiptap-editor .ProseMirror div[data-columns] > :first-child {
        margin-top: 0
    }

/* Column break: a dashed line while editing; the text after it starts in the next column. */
.tiptap-editor .ProseMirror div[data-column-break] {
    height: 0;
    margin: 6px 0 0;
    border-top: 1px dashed var(--text-lightgrey)
}

.tiptap-editor .ProseMirror:not([contenteditable="true"]) div[data-column-break] {
    border-top: 0;
    margin: 0
}

.tiptap-editor .ProseMirror div[data-column-break].ProseMirror-selectednode {
    border-top-color: var(--secondary-color)
}

/* Checklists (Paragraph > Checklist): checkbox next to the text. */
.tiptap-editor ul[data-type="taskList"] {
    padding-left: .25em;
    list-style: none
}

    .tiptap-editor ul[data-type="taskList"] li {
        display: flex;
        align-items: baseline;
        gap: .5em
    }

        .tiptap-editor ul[data-type="taskList"] li > label {
            flex: 0 0 auto;
            margin: 0;
            user-select: none
        }

        .tiptap-editor ul[data-type="taskList"] li > div {
            flex: 1 1 auto;
            min-width: 0
        }

        .tiptap-editor ul[data-type="taskList"] li[data-checked="true"] > div {
            text-decoration: line-through;
            opacity: .65
        }

/* Quote and code block (Paragraph menu). */
.tiptap-editor .ProseMirror blockquote {
    margin: 0 0 var(--tiptap-paragraph-spacing, 1rem);
    padding-left: 1em;
    border-left: 3px solid var(--component-border);
    opacity: .85
}

.tiptap-editor .ProseMirror pre {
    padding: .6em .8em;
    border-radius: var(--bps-radius);
    background: color-mix(in srgb, var(--primary-background) 90%, var(--text-color));
    font-family: var(--font-mono, Consolas, monospace)
}

@container tiptap (max-width: 420px) {
    .tiptap-toolbar .tth-menu-trigger .tth-caret, .tiptap-toolbar .tth-menu-trigger .tth-label {
        display: none
    }
}

/* Tiptap AI assist: correction options + saved-instructions manager.
   Shares dbo.OllamaChatPrompts with OllamaChat.razor's pre-prompt library. */
.tth-ai-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb,var(--primary-background) 50%,transparent);
    backdrop-filter: blur(2px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box
}

.tth-ai-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 95%;
    max-width: 480px;
    max-height: 85vh;
    padding: 20px;
    background: var(--primary-background);
    color: var(--text-color);
    border: 1px solid color-mix(in srgb,var(--text-lightgrey) 25%,transparent);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px color-mix(in srgb,var(--primary-background) 35%,transparent);
    font-family: var(--bps-font);
    overflow: auto
}

.tth-ai-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--component-border);
    padding-bottom: 10px
}

.tth-ai-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px
}

.tth-preset-row {
    display: flex;
    align-items: center;
    gap: 8px
}

.tth-preset-select {
    flex: 1 1 auto;
    min-width: 0
}

.tth-preset-textarea {
    resize: vertical;
    font-family: var(--font-mono)
}

.tth-preset-list {
    overflow: auto;
    max-height: 40vh
}

.tth-preset-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    margin-bottom: 4px;
    border: 1px solid var(--border-standard);
    border-radius: var(--radius-sm);
    background: var(--AbsoluteComponentBGColor)
}

.tth-preset-item-text {
    color: var(--text-lightgrey)
}

.tth-icon-btn {
    background: transparent;
    border: 0;
    padding: 4px 6px;
    color: var(--text-lightgrey);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: color .2s, background .2s
}

    .tth-icon-btn:hover {
        color: var(--text-color);
        background: var(--primary-hover)
    }

/* "LLM is busy..." / OCR popup (tiptapHelper.showAiPopup). Colours come from the
   .ts-modal-* classes it is built from; these only set size and stacking. */
.tth-ai-popup {
    position: fixed;
    inset: 0;
    z-index: 10000
}

.tth-ai-popup-content {
    max-width: 1100px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.tth-ai-popup-status {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--text-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-lightgrey)
}

.tth-ai-popup-body {
    flex: 1;
    min-height: 0
}

    .tth-ai-popup-body.tth-ai-popup-row {
        flex-direction: row
    }

.tth-ai-popup-image {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--AbsoluteComponentBGColor);
    border: 1px solid var(--component-border);
    border-radius: var(--bps-radius)
}

    .tth-ai-popup-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain
    }

.tth-ai-popup-text {
    flex: 1;
    min-height: 0;
    resize: none;
    font-family: var(--font-mono);
    line-height: 1.6
}

.tth-ai-popup-footer {
    align-items: center
}

    .tth-ai-popup-footer .form-text {
        margin: 0 auto 0 0;
        font-style: italic
    }

.video-wallpaper {
    position: fixed;
    top: -6%;
    left: -6%;
    width: 112%;
    height: 112%;
    object-fit: cover;
    filter: blur(1px);
    z-index: -1;
    pointer-events: none
}

main > article.content::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--Purpleburstbackgrounddark);
    opacity: .95;
    z-index: 0;
    pointer-events: none
}

.input-group.input-group-sm .form-control, .input-group.input-group-sm .input-group-text {
    background-color: transparent;
    border-color: var(--border-standard);
    color: var(--text-lightgrey)
}

.input-group.input-group-sm .form-control {
    color: var(--text-color);
    box-shadow: none
}

    .input-group.input-group-sm .form-control::placeholder {
        color: var(--text-lightgrey)
    }

.input-group.input-group-sm .btn-outline-secondary {
    background-color: transparent;
    border-color: var(--border-standard);
    color: var(--text-lightgrey)
}

    .input-group.input-group-sm .btn-outline-secondary:hover {
        background-color: var(--primary-hover);
        border-color: var(--border-standard);
        color: var(--text-color)
    }

.form-control, .form-select, input[type=email], input[type=number], input[type=password], input[type=search], input[type=text], textarea {
    background-color: var(--input-background);
    color: var(--input-text-color);
    border-color: var(--border-standard)
}

    .form-control::placeholder, input::placeholder, textarea::placeholder {
        color: var(--text-lightgrey);
        opacity: .8
    }

    .form-control:focus, .form-select:focus, input:focus, textarea:focus {
        background-color: var(--input-background);
        color: var(--input-text-color);
        border-color: var(--focus-color);
        box-shadow: 0 0 0 .25rem color-mix(in srgb,var(--focus-color) 25%,transparent)
    }

    .form-control:disabled, .form-control[readonly], input:disabled, input[readonly] {
        background-color: color-mix(in srgb,var(--AbsoluteComponentBGColor) 40%,transparent);
        color: var(--text-lightgrey);
        border-color: var(--border-standard)
    }

.btn-outline-secondary, .input-group-text {
    background-color: transparent;
    border-color: var(--border-standard);
    color: var(--text-lightgrey)
}

    .btn-outline-secondary:hover {
        background-color: var(--primary-hover);
        border-color: var(--border-standard);
        color: var(--text-color)
    }



.form-select,
.form-select option {
    background-color: var(--AbsoluteComponentBGColor);
    color: var(--text-color);
}

.menu-button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--text-size-large);
    height: 6vh !important;
    width: 6vh !important;
    max-height: var(--bottom-nav-height, 48px) !important;
    max-width: var(--bottom-nav-height, 48px) !important;
    /* Theme > Start button. min-* beats max-* in CSS, so these can grow it past the bar height. */
    min-width: var(--start-button-min-width, 0px) !important;
    min-height: var(--start-button-min-height, 0px) !important;
    aspect-ratio: 1/1 !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: 0 0 !important;
    cursor: pointer !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    isolation: isolate !important;
    transition: transform .2s ease !important;
}

    .menu-button:hover {
        transform: scale(1.06) !important;
    }

    .menu-button::after,
    .startmenu-bee-icon {
        border-radius: 50% !important;
        pointer-events: none !important;
    }

.startmenu-bee-icon {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 4px;
    object-fit: contain !important;
    display: block !important;
    opacity: 1 !important;
    background: 0 0 !important;
    border: 0 !important;
    filter: none !important;
    backdrop-filter: blur(4px);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .startmenu-bee-icon:hover {
        transform: scale(1.05);
        box-shadow: 0 0 5px color-mix(in srgb, var(--text-color) 60%, transparent);
        border-color: var(--secondary-color);
    }

.menu-button::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background: radial-gradient(circle at 35% 20%, color-mix(in srgb, var(--dome-light) 24%, transparent) 0, color-mix(in srgb, var(--dome-light) 6%, transparent) 25%, transparent 55%), radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--dome-light) 8%, transparent) 0, transparent 50%) !important;
    border: 1px solid color-mix(in srgb, var(--dome-light) 14%, transparent) !important;
    box-shadow: inset 0 2px 4px color-mix(in srgb, var(--dome-light) 20%, transparent), inset 0 -2px 4px color-mix(in srgb, var(--dome-shade) 12%, transparent), inset 1px 0 3px color-mix(in srgb, var(--dome-light) 9%, transparent), inset -1px 0 3px color-mix(in srgb, var(--dome-shade) 9%, transparent), 0 2px 6px color-mix(in srgb, var(--dome-shade) 15%, transparent) !important;
    transition: background .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.menu-button:hover::after {
    border-color: color-mix(in srgb, var(--dome-light) 45%, transparent) !important;
    background: radial-gradient(circle at 35% 20%, color-mix(in srgb, var(--dome-light) 42%, transparent) 0, color-mix(in srgb, var(--dome-light) 16%, transparent) 25%, transparent 60%), radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--dome-light) 18%, transparent) 0, transparent 55%) !important;
    box-shadow: inset 0 4px 7px color-mix(in srgb, var(--dome-light) 36%, transparent), inset 0 -3px 6px color-mix(in srgb, var(--dome-shade) 16%, transparent), inset 2px 0 5px color-mix(in srgb, var(--dome-light) 16%, transparent), inset -2px 0 5px color-mix(in srgb, var(--dome-shade) 10%, transparent), 0 0 10px color-mix(in srgb, var(--dome-light) 30%, transparent) !important;
}

/* ---------------- DC Chat + Profile Home (Shared/DcChat.razor, Shared/ProfileHome.razor) ----------------
   Only what the shared classes don't cover: the round avatar with its presence dot, offline dimming, the chat list
   height, own messages and the unread badge on the gear button. Rows/buttons use floating-menu-item, log-entry,
   font-mag-btn, profile-picture(-container), wallpaper-thumb-* and btn classes. */
.dc-chat-avatar {
    position: relative;
    display: inline-flex;
    flex-shrink: 0
}

    .dc-chat-avatar .profile-picture-container {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .dc-chat-avatar.dc-chat-avatar-large .profile-picture-container {
        width: 72px;
        height: 72px
    }

.dc-chat-initials {
    font-weight: 600;
    color: var(--text-color);
    font-size: var(--text-size-small)
}

.dc-presence-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: color-mix(in srgb,var(--text-color) 30%,transparent);
    border: 2px solid var(--primary-background)
}

.dc-chat-avatar-large .dc-presence-dot {
    width: 16px;
    height: 16px;
    right: 2px;
    bottom: 2px
}

.dc-online .dc-presence-dot {
    background: var(--color-success)
}

.dc-chat-offline {
    opacity: .55
}

    .dc-chat-offline img {
        filter: grayscale(1)
    }

.dc-chat-list {
    max-height: 260px;
    overflow-y: auto
}

.dc-chat-row {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding-right: .75rem
}

    .dc-chat-row .floating-menu-item {
        flex: 1 1 auto;
        min-width: 0
    }

/* DC Chat / Profile Home: icon buttons keep their own size (font-mag-btn is flex:1 for the font +/- bar and would stretch over the row) */
.dc-chat-row .font-mag-btn, .dc-chat-window .font-mag-btn, .dc-home .font-mag-btn,
.font-mag-btn.dc-confirm-yes, .font-mag-btn.dc-confirm-no {
    flex: 0 0 auto;
    min-width: 2rem;
    padding: var(--control-pad-y) .45rem
}

/* Inline confirms (delete, clear history, leave): a green check and a red X instead of text buttons */
.dc-confirm-yes {
    color: var(--color-success)
}

.dc-confirm-no {
    color: var(--color-danger)
}

/* DC Chat: secondary actions (delete) appear on hover/keyboard focus of their row; always shown on touch screens */
.dc-chat-reveal {
    opacity: 0;
    transition: opacity .12s
}

    .log-entry:hover .dc-chat-reveal, .dc-chat-row:hover .dc-chat-reveal, .dc-chat-reveal:focus-visible {
        opacity: 1
    }

@media (hover: none) {
    .dc-chat-reveal {
        opacity: .7
    }
}

.dc-chat-mine {
    text-align: right;
    background-color: color-mix(in srgb,var(--secondary-color) 18%,transparent) !important
}

.dc-chat-body {
    white-space: pre-wrap;
    word-break: break-word
}

.dc-chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 1.3rem;
    padding: 1px 5px;
    border-radius: 999px;
    font-size: var(--text-size-smaller);
    font-weight: 700;
    line-height: 1.2;
    background: var(--color-danger);
    color: var(--text-color);
    border: 2px solid var(--primary-background)
}

/* DC Chat: files dragged over a chat window */
.dc-chat-dragover {
    outline: 2px dashed var(--secondary-color);
    outline-offset: -4px;
    background-color: color-mix(in srgb,var(--secondary-color) 10%,transparent)
}