#quick_preview_3d_crop_panel input[type="range"] {
        min-height: 44px;
    }



    /* Remove default bullets */
    ul, #myUL {
        list-style-type: none;
    }

    /* Remove margins and padding from the parent ul */
    #myUL {
        margin: 10px;
        padding: 0;
    }





    .element-tag-container {
        display: flex;
        position: absolute;
        inset: 0;
        align-items: stretch;
        justify-content: flex-end;
        pointer-events: none;
    }

    .gallery-figcaption-right {
        --tile-tag-rail-width: 21px;
        overflow: visible;
        z-index: 5;
    }






    .tag_element {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        border: none;
        border-radius: 4px;
        margin: 0;
        padding: 6px 8px;
    }

    .tile-tag-shell {
        display: flex;
        align-items: stretch;
        height: 100%;
        pointer-events: auto;
    }

    .tile-tag-rail {
        width: var(--tile-tag-rail-width);
        min-width: var(--tile-tag-rail-width);
        border: none;
        padding: 0;
        background: linear-gradient(0deg, #b9d0dc 0%, #8eacbb 100%);
        color: #172731;
        cursor: pointer;
        transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
    }

    .tile-tag-rail:hover,
    .tile-tag-rail:focus {
        background: #d5f800;
        color: #17210a;
        outline: none;
        box-shadow: inset 2px 0 0 rgba(255,255,255,.42);
    }

    .tile-tag-shell.has-tags .tile-tag-rail {
        background: linear-gradient(0deg, #dfff38 0%, #aeea00 100%);
        color: #17210a;
    }

    .tile-tag-panel {
        display: none;
        width: 0;
        overflow: hidden;
        padding: 0;
        background: rgba(20, 29, 35, 0.97);
        color: #f6fbfd;
        border-left: 1px solid rgba(213,248,0,.28);
    }

    .tile-tag-shell.is-open .tile-tag-panel {
        display: block;
        width: 260px;
        padding: 10px;
    }

    .tile-tag-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 190px;
        overflow-y: auto;
        padding-right: 2px;
    }

    .tile-tag-empty {
        color: rgba(255, 255, 255, 0.76);
        font-size: 12px;
        line-height: 1.4;
    }

    .tile-tag-item-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tile-tag-remove {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        min-width: 18px;
        border: none;
        border-radius: 999px;
        padding: 0;
        background: rgba(0, 0, 0, 0.22);
        color: inherit;
        cursor: pointer;
    }

    .gallery-frame {
        position: relative;
        isolation: isolate;
        border: 1px solid rgba(158, 181, 193, 0.24);
        border-radius: 8px;
        background: linear-gradient(0deg, rgba(49, 56, 61, 0.98) 0%, rgba(35, 41, 46, 0.98) 100%);
        box-shadow: 0 8px 18px rgba(0,0,0,.28);
        overflow: hidden;
        transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

        .gallery-frame:hover {
            border-color: rgba(213,248,0,.44);
            background-color: #39464d;
            color: white;
            box-shadow: 0 12px 26px rgba(0,0,0,.34);
        }

    .gallery-main-content {
        position: relative;
        z-index: 1;
        background: linear-gradient(0deg, rgba(45, 51, 56, 0.98) 0%, rgba(34, 39, 43, 0.98) 100%);
    }

    .quick-preview-tile-button {
        float: right;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        min-width: 30px;
        margin: -5px 2px 0 6px;
        border: none;
        border-radius: 6px;
        background: linear-gradient(0deg, #eaff35 0%, #bfe900 100%);
        color: #162126;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.36);
        transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
    }

        .quick-preview-tile-button:hover,
        .quick-preview-tile-button:focus {
            background: #f4ff57;
            transform: translateY(-1px);
            box-shadow: 0 7px 16px rgba(0, 0, 0, 0.42);
            outline: none;
        }

        .quick-preview-tile-button .material-icons {
            font-size: 20px;
            line-height: 1;
        }

    .quick-preview-overlay {
        --quick-preview-mixed-mpr-width: min(330px, 24vw);
        --quick-preview-mixed-split-x: 50%;
        --quick-preview-mixed-split-y: 50%;
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(3, 8, 12, 0.78);
    }

    .quick-preview-overlay.is-open {
        display: flex;
    }

    /* Paint the viewer shell before saves, teardown and metadata work. Never
       expose an earlier patient's content while the new source is pending. */
    .quick-preview-overlay.is-opening {
        background: #03080c;
    }

    .quick-preview-overlay.is-opening .quick-preview-shell > :not(.quick-preview-toolbar),
    .quick-preview-overlay.is-opening .quick-preview-toolbar > :not(#quick_preview_close) {
        visibility: hidden;
        pointer-events: none;
    }

    .quick-preview-overlay.is-opening .quick-preview-shell > :not(.quick-preview-toolbar) {
        opacity: 0;
    }

    .quick-preview-overlay.is-opening::after {
        content: attr(data-opening-label);
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #c5dce6;
        pointer-events: none;
    }

    .quick-preview-overlay.is-opening #quick_preview_close {
        visibility: visible;
        pointer-events: auto;
    }

    html.teaching-embed-mode .quick-preview-overlay {
        background: #000;
    }

    html.teaching-embed-mode .leftside,
    html.teaching-embed-mode #div_leftcontainer_settings,
    html.teaching-embed-mode #div_leftcontainer_patient,
    html.teaching-embed-mode #div_search,
    html.teaching-embed-mode #div_patient_results,
    html.teaching-embed-mode #div_patient_data,
    html.teaching-embed-mode .mdl-layout__drawer,
    html.teaching-embed-mode .mdl-layout__header,
    html.teaching-embed-mode .mdl-layout__tab-bar,
    html.teaching-embed-mode .searchbar {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    html.teaching-embed-booting body {
        background: #000;
    }

    html.teaching-embed-booting body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1199;
        background: #000;
        pointer-events: none;
    }

    html.teaching-embed-booting .leftside,
    html.teaching-embed-booting #div_leftcontainer_settings,
    html.teaching-embed-booting #div_leftcontainer_patient,
    html.teaching-embed-booting #div_search,
    html.teaching-embed-booting #div_patient_results,
    html.teaching-embed-booting #div_patient_data,
    html.teaching-embed-booting .mdl-layout__drawer,
    html.teaching-embed-booting .mdl-layout__header,
    html.teaching-embed-booting .mdl-layout__tab-bar,
    html.teaching-embed-booting .searchbar {
        opacity: 0;
        visibility: hidden;
    }

    .quick-preview-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 44px minmax(0, 1fr);
        width: min(94vw, 1280px);
        min-width: 0;
        max-width: 100vw;
        height: min(92vh, 900px);
        max-height: 100vh;
        height: min(calc(var(--quick-preview-vh, 1vh) * 92), 900px);
        max-height: calc(var(--quick-preview-vh, 1vh) * 100);
        border: 1px solid rgba(174, 234, 0, 0.35);
        border-radius: 6px;
        overflow: hidden;
        background: #05090c;
        color: #f6fbfd;
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.62);
    }

    @media (min-width: 900px) {
        .quick-preview-shell {
            width: 100vw;
            height: 100vh;
            max-height: 100vh;
            height: calc(var(--quick-preview-vh, 1vh) * 100);
            max-height: calc(var(--quick-preview-vh, 1vh) * 100);
            border: 0;
            border-radius: 0;
        }
    }

    .quick-preview-toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        overflow: visible;
        padding: 0 10px;
        background: #15242c;
        position: relative;
        z-index: 20;
    }

    html.teaching-embed-hide-toolbar .quick-preview-shell {
        grid-template-rows: minmax(0, 1fr);
    }

    html.teaching-embed-hide-toolbar .quick-preview-toolbar,
    html.teaching-embed-hide-panel .quick-preview-measure-panel,
    html.teaching-embed-hide-patient .quick-preview-overlay-info,
    html.teaching-embed-hide-filmstrip .quick-preview-filmstrip,
    html.teaching-embed-hide-controls .quick-preview-3d-quickbar,
    html.teaching-embed-hide-controls .quick-preview-3d-panel,
    html.teaching-embed-hide-controls .quick-preview-active-tool,
    html.teaching-embed-hide-controls .quick-preview-window-info,
    html.teaching-embed-hide-footer .footer,
    html.teaching-embed-readonly .quick-preview-embed-write {
        display: none !important;
    }

    .quick-preview-title {
        min-width: 0;
        flex: 0 1 auto;
        max-width: min(34vw, 520px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 700;
    }

    .quick-preview-status {
        min-width: 0;
        flex: 1 1 auto;
        max-width: min(42vw, 560px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgba(246, 251, 253, 0.78);
        font-size: 12px;
    }

    .quick-preview-source-badge {
        flex: 0 0 auto;
        max-width: min(34vw, 430px);
        padding: 4px 8px;
        overflow: hidden;
        border: 1px solid rgba(90, 214, 255, 0.38);
        border-radius: 999px;
        color: #dff8ff;
        background: rgba(9, 28, 36, 0.86);
        font-size: 10px;
        font-weight: 800;
        line-height: 1.1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-preview-workspace-badge {
        flex: 0 0 auto;
        min-width: 34px;
        padding: 4px 8px;
        border: 1px solid rgba(238, 255, 65, 0.48);
        border-radius: 999px;
        color: #eeff41;
        background: rgba(29, 35, 11, 0.72);
        font-size: 10px;
        font-weight: 900;
        line-height: 1.1;
        text-align: center;
        white-space: nowrap;
    }

    .quick-preview-source-badge.is-viewing-aid {
        border-color: rgba(238, 255, 65, 0.65);
        color: #eeff41;
    }

    .quick-preview-media.is-pixel-sampling,
    .quick-preview-canvas.is-pixel-sampling,
    .quick-preview-video.is-pixel-sampling {
        image-rendering: pixelated;
    }

    .quick-preview-media.is-smooth-sampling,
    .quick-preview-canvas.is-smooth-sampling,
    .quick-preview-video.is-smooth-sampling {
        image-rendering: auto;
    }

    .quick-preview-media.is-high-quality-sampling,
    .quick-preview-canvas.is-high-quality-sampling,
    .quick-preview-video.is-high-quality-sampling {
        image-rendering: auto;
    }

    .quick-preview-series-label,
    .quick-preview-cine-label {
        min-width: 48px;
        color: rgba(246, 251, 253, 0.82);
        font-size: 11px;
        font-weight: 700;
        text-align: center;
        white-space: nowrap;
    }

    .quick-preview-cine-fps {
        width: 76px;
        min-width: 56px;
        accent-color: #eeff41;
        cursor: pointer;
    }

    .quick-preview-menu-wrap {
        position: relative;
        display: inline-flex;
        flex: 0 0 auto;
    }

    .quick-preview-menubutton {
        width: auto;
        min-width: 78px;
        padding: 0 9px;
        gap: 6px;
        font-size: 11px;
        font-weight: 800;
    }

    .quick-preview-top-menu-label {
        display: inline-block;
        max-width: 82px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-preview-base-action {
        border-color: rgba(90, 214, 255, 0.42);
        background: rgba(90, 214, 255, 0.08);
    }

    .quick-preview-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        display: none;
        min-width: 216px;
        max-width: min(82vw, 320px);
        max-height: min(560px, calc(100dvh - 132px));
        padding: 7px;
        border: 1px solid rgba(90, 214, 255, 0.45);
        border-radius: 6px;
        background: rgba(6, 17, 23, 0.96);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48);
        backdrop-filter: blur(10px);
        z-index: 30;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .quick-preview-tool-menu {
        min-width: 280px;
        max-width: min(88vw, 380px);
    }

    .quick-preview-menu.is-open {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .quick-preview-menu-search {
        position: sticky;
        top: -7px;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 6px;
        border-bottom: 1px solid rgba(90, 214, 255, 0.22);
        background: rgba(6, 17, 23, 0.98);
    }

    .quick-preview-menu-search .material-icons {
        color: rgba(246, 251, 253, 0.72);
        font-size: 18px;
    }

    .quick-preview-menu-search input {
        min-width: 0;
        width: 100%;
        height: 30px;
        padding: 0 9px;
        border: 1px solid rgba(158, 181, 193, 0.38);
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.28);
        color: #f6fbfd;
        font-size: 12px;
        outline: none;
    }

    .quick-preview-menu-search input:focus {
        border-color: rgba(238, 255, 65, 0.72);
    }

    .quick-preview-menu .quick-preview-toolbutton {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        gap: 9px;
        padding: 0 10px;
    }

    .quick-preview-menu .quick-preview-toolbutton:disabled,
    .quick-preview-menu .quick-preview-toolbutton[aria-hidden="true"] {
        display: none;
    }

    .quick-preview-menu-section {
        display: grid;
        gap: 4px;
        border: 1px solid rgba(90, 214, 255, 0.18);
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.025);
    }

    .quick-preview-menu-section > summary {
        display: flex;
        align-items: center;
        min-height: 30px;
        padding: 0 9px;
        color: rgba(246, 251, 253, 0.86);
        cursor: pointer;
        font-size: 12px;
        font-weight: 800;
        list-style: none;
    }

    .quick-preview-menu-section > summary::-webkit-details-marker {
        display: none;
    }

    .quick-preview-menu-section > summary::after {
        content: "";
        margin-left: auto;
        width: 7px;
        height: 7px;
        border-right: 2px solid #eeff41;
        border-bottom: 2px solid #eeff41;
        transform: rotate(45deg);
        transition: transform 120ms ease;
    }

    .quick-preview-menu-section[open] > summary::after {
        transform: rotate(225deg);
    }

    .quick-preview-menu-section-body {
        display: grid;
        gap: 4px;
        padding: 0 5px 5px;
    }

    .quick-preview-menu-section-quick {
        border-color: rgba(238, 255, 65, 0.45);
        background: rgba(238, 255, 65, 0.055);
    }

    .quick-preview-menu-section-quick > summary {
        color: #eeff41;
    }

    .quick-preview-menu-section-quick .quick-preview-menu-section-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-preview-menu-section-quick .quick-preview-toolbutton {
        min-height: 34px;
    }

    .quick-preview-menu-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 700;
    }

    .quick-preview-menu-section-quality .quick-preview-toolbutton,
    .quick-preview-menu-section-displayAid .quick-preview-toolbutton,
    .quick-preview-menu-section-zoom .quick-preview-toolbutton {
        min-height: 44px;
        height: auto;
    }

    .quick-preview-menu-section-quality .quick-preview-menu-label,
    .quick-preview-menu-section-displayAid .quick-preview-menu-label {
        white-space: normal;
        text-align: left;
    }

    .quick-preview-quality-hint {
        margin: 4px 2px;
        color: #bdcbd2;
        font-size: 11px;
        line-height: 1.4;
    }

    .quick-preview-menu-section-quality [role="radio"]::after {
        content: "○";
        margin-left: auto;
        font-size: 18px;
    }

    .quick-preview-menu-section-quality [aria-checked="true"]::after {
        content: "◉";
    }

    .quick-preview-menu-section-displayAid [role="switch"]::after {
        content: "−";
        margin-left: auto;
        font-size: 18px;
    }

    .quick-preview-menu-section-displayAid [aria-checked="true"]::after {
        content: "✓";
    }

    .quick-preview-toolbutton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        min-width: 32px;
        border: 1px solid rgba(158, 181, 193, 0.5);
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.24);
        color: #f6fbfd;
        cursor: pointer;
    }

    @media (max-width: 900px) {
        .quick-preview-status {
            display: none;
        }

        .quick-preview-source-badge {
            max-width: 36vw;
        }

        .quick-preview-workspace-badge {
            padding-inline: 6px;
        }

        .quick-preview-cine-fps {
            width: 56px;
        }

        .quick-preview-series-label,
        .quick-preview-cine-label {
            min-width: 38px;
            font-size: 10px;
        }

        .quick-preview-toolbar {
            gap: 5px;
            padding: 0 6px;
        }

        .quick-preview-title {
            font-size: 12px;
        }

        .quick-preview-menu {
            position: fixed;
            top: 50px;
            right: 8px;
            left: 8px;
            max-width: none;
        }

        .quick-preview-menubutton {
            min-width: 32px;
            padding: 0;
        }

        .quick-preview-top-menu-label {
            display: none;
        }
    }

    @media (pointer: coarse), (max-width: 600px) {
        .quick-preview-toolbar > .quick-preview-toolbutton,
        .quick-preview-toolbar > .quick-preview-menu-wrap > .quick-preview-toolbutton {
            width: 44px;
            min-width: 44px;
            height: 44px;
        }

        .quick-preview-menu .quick-preview-toolbutton,
        .quick-preview-menu-section > summary,
        .quick-preview-menu-search input {
            min-height: 40px;
        }
    }

        .quick-preview-toolbutton:hover,
        .quick-preview-toolbutton:focus {
            border-color: #eeff41;
            color: #eeff41;
            outline: none;
        }

        .quick-preview-toolbutton.is-active {
            border-color: rgba(90, 214, 255, 0.9);
            background: rgba(90, 214, 255, 0.18);
            color: #fff;
        }

        .quick-preview-toolbutton:disabled,
        .quick-preview-toolbutton.is-disabled {
            border-color: rgba(158, 181, 193, 0.22);
            color: rgba(246, 251, 253, 0.32);
            cursor: default;
            opacity: .62;
        }

            .quick-preview-toolbutton:disabled:hover,
            .quick-preview-toolbutton.is-disabled:hover {
                border-color: rgba(158, 181, 193, 0.22);
                color: rgba(246, 251, 253, 0.32);
            }

        .quick-preview-toolbutton .material-icons {
            font-size: 20px;
        }

    .quick-preview-stage {
        position: relative;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        touch-action: none;
        cursor: grab;
        background: #000;
    }

    .quick-preview-stage.is-panning {
        cursor: grabbing;
    }

    .quick-preview-shell.has-annotations-panel {
        grid-template-columns: minmax(0, 1fr) min(360px, 34vw);
    }

    .quick-preview-shell > .quick-preview-toolbar {
        grid-column: 1 / -1;
    }

    .quick-preview-shell > .quick-preview-measure-panel {
        position: relative;
        grid-column: 2;
        grid-row: 2;
        inset: auto;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        box-sizing: border-box;
        border-radius: 0;
        transition: none;
        cursor: default;
        touch-action: pan-y;
    }

    .quick-preview-shell > .quick-preview-measure-panel.is-collapsed {
        display: none;
    }

    .quick-preview-shell > .quick-preview-measure-panel .quick-preview-measure-panel-head {
        grid-template-columns: minmax(0, 1fr);
        position: sticky;
        top: 0;
        z-index: 2;
        background: #09151c;
    }

    .quick-preview-shell > .quick-preview-measure-panel .quick-preview-measure-panel-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .quick-preview-shell > .quick-preview-measure-panel .quick-preview-measure-panel-actions button,
    #quick_preview_annotations_panel_button {
        min-width: 44px;
        min-height: 44px;
    }

    #quick_preview_annotations_panel_button {
        flex: 0 0 auto;
        width: auto;
        white-space: nowrap;
        gap: 5px;
        padding: 0 8px;
    }

    html.teaching-embed-hide-toolbar .quick-preview-shell > .quick-preview-measure-panel {
        grid-row: 1;
    }

    @media (max-width: 760px) {
        .quick-preview-shell.has-annotations-panel {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: 44px minmax(0, 1fr) min(40%, 320px);
        }
        .quick-preview-shell > .quick-preview-measure-panel {
            grid-column: 1;
            grid-row: 3;
            min-height: 0;
        }
        html.teaching-embed-hide-toolbar .quick-preview-shell.has-annotations-panel {
            grid-template-rows: minmax(0, 1fr) min(40%, 320px);
        }
        html.teaching-embed-hide-toolbar .quick-preview-shell > .quick-preview-measure-panel {
            grid-row: 2;
        }
    }

    .quick-preview-collab-cursor {
        position: absolute;
        z-index: 24;
        left: 0;
        top: 0;
        pointer-events: none;
        transform: translate(-2px, -2px);
        color: var(--collab-color, #ff4fa3);
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75));
    }

    .quick-preview-collab-cursor::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 15px;
        height: 15px;
        border-left: 2px solid currentColor;
        border-top: 2px solid currentColor;
        transform: rotate(-12deg);
    }

    .quick-preview-collab-cursor span {
        position: absolute;
        left: 12px;
        top: 10px;
        max-width: 160px;
        padding: 2px 6px;
        border: 1px solid var(--collab-color, rgba(255, 79, 163, 0.68));
        border-radius: 6px;
        background: rgba(5, 12, 16, 0.86);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .quick-preview-collab-ping {
        position: absolute;
        z-index: 23;
        left: 0;
        top: 0;
        width: 14px;
        height: 14px;
        border: 2px solid var(--collab-color, #5ad6ff);
        border-radius: 999px;
        pointer-events: none;
        transform: translate(-50%, -50%) scale(0.4);
        animation: quick-preview-collab-ping-wave 900ms ease-out forwards;
        box-shadow: 0 0 18px var(--collab-color, rgba(90, 214, 255, 0.7));
    }

    @keyframes quick-preview-collab-ping-wave {
        0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.35); }
        100% { opacity: 0; transform: translate(-50%, -50%) scale(4.8); }
    }

    .quick-preview-collab-end-floating {
        position: static;
        flex: 0 0 auto;
        display: none;
        align-items: center;
        gap: 5px;
        min-height: 28px;
        padding: 0 8px;
        border: 1px solid rgba(255, 79, 163, 0.72);
        border-radius: 6px;
        background: rgba(12, 20, 26, 0.82);
        color: #f6fbfd;
        font-size: 10px;
        font-weight: 900;
        box-shadow: none;
        cursor: pointer;
    }

    .quick-preview-collab-end-floating.is-open {
        display: inline-flex;
    }

    .quick-preview-collab-end-floating .material-icons {
        color: #ff4fa3;
        font-size: 17px;
    }

    .quick-preview-collab-status-pill,
    .quick-preview-collab-follow-floating {
        display: none;
        align-items: center;
        gap: 5px;
        min-height: 28px;
        padding: 0 8px;
        border: 1px solid rgba(90, 214, 255, 0.5);
        border-radius: 6px;
        background: rgba(5, 18, 24, 0.84);
        color: #f6fbfd;
        font-size: 10px;
        font-weight: 900;
        white-space: nowrap;
    }

    .quick-preview-collab-status-pill.is-open,
    .quick-preview-collab-follow-floating.is-open {
        display: inline-flex;
    }

    .quick-preview-collab-status-pill::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #9eb5c1;
        box-shadow: 0 0 8px rgba(158, 181, 193, 0.45);
    }

    .quick-preview-collab-status-pill.is-following {
        border-color: rgba(238, 255, 65, 0.62);
        color: #eeff41;
    }

    .quick-preview-collab-status-pill.is-following::before {
        background: #eeff41;
        box-shadow: 0 0 8px rgba(238, 255, 65, 0.6);
    }

    .quick-preview-collab-status-pill.is-free {
        border-color: rgba(255, 180, 84, 0.72);
        color: #ffb454;
    }

    .quick-preview-collab-status-pill.is-free::before {
        background: #ffb454;
        box-shadow: 0 0 8px rgba(255, 180, 84, 0.58);
    }

    .quick-preview-collab-status-pill.is-waiting {
        border-color: rgba(90, 214, 255, 0.62);
        color: #5ad6ff;
    }

    .quick-preview-collab-status-pill.is-waiting::before {
        background: #5ad6ff;
        box-shadow: 0 0 8px rgba(90, 214, 255, 0.58);
    }

    .quick-preview-collab-follow-floating {
        border-color: rgba(238, 255, 65, 0.72);
        background: rgba(20, 31, 16, 0.86);
        color: #eeff41;
        cursor: pointer;
    }

    .quick-preview-collab-follow-floating .material-icons {
        font-size: 17px;
    }

    .quick-preview-collab-message-overlay {
        position: fixed;
        top: 50%;
        right: 0;
        z-index: 120;
        display: none;
        width: min(380px, calc(100vw - 28px));
        height: min(360px, 48vh);
        pointer-events: auto;
        overflow: hidden;
        transform: translateY(-50%) translateX(calc(100% - 34px));
        transition: transform 160ms ease;
        border: 1px solid rgba(90, 214, 255, 0.48);
        border-right: 0;
        border-radius: 8px 0 0 8px;
        background: #07151c;
        color: #f6fbfd;
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    }

    .quick-preview-collab-message-overlay.is-open {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .quick-preview-collab-message-overlay.is-expanded {
        transform: translateY(-50%) translateX(0);
    }

    .quick-preview-collab-chat-tab {
        position: relative;
        display: grid;
        place-items: center;
        border: 0;
        border-right: 1px solid rgba(90, 214, 255, 0.28);
        background: #0b2530;
        color: #5ad6ff;
        cursor: pointer;
    }

    .quick-preview-collab-chat-tab .material-icons {
        font-size: 20px;
    }

    .quick-preview-collab-chat-tab[data-unread]:not([data-unread="0"])::after {
        content: attr(data-unread);
        position: absolute;
        top: 8px;
        left: 18px;
        min-width: 16px;
        padding: 1px 4px;
        border-radius: 999px;
        background: #ff4fa3;
        color: #fff;
        font-size: 9px;
        font-weight: 900;
    }

    .quick-preview-collab-chat-panel {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        min-width: 0;
        min-height: 0;
        background: #07151c;
    }

    .quick-preview-collab-chat-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px;
        padding: 8px 8px 6px;
        border-bottom: 1px solid rgba(90, 214, 255, 0.22);
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .quick-preview-collab-chat-messages {
        display: grid;
        align-content: end;
        gap: 5px;
        min-height: 0;
        overflow: auto;
        padding: 8px;
    }

    .quick-preview-collab-chat-compose {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px;
        padding: 7px 8px 8px;
        border-top: 1px solid rgba(90, 214, 255, 0.22);
    }

    .quick-preview-collab-chat-compose input {
        min-width: 0;
        border: 1px solid rgba(158, 181, 193, 0.42);
        border-radius: 5px;
        background: #03090c;
        color: #f6fbfd;
        padding: 6px 7px;
        font-size: 11px;
    }

    .quick-preview-collab-overlay-message {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 6px;
        min-width: 0;
        padding: 4px 6px;
        border-radius: 6px;
        background: #0d222b;
        font-size: 11px;
        font-weight: 850;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    }

    .quick-preview-collab-overlay-message span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-preview-scale-bar {
        position: absolute;
        left: 14px;
        bottom: 74px;
        z-index: 13;
        display: none;
        min-width: 0;
        pointer-events: none;
        color: #f6fbfd;
        font-size: 12px;
        font-weight: 800;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.96), 0 0 6px rgba(0, 0, 0, 0.88);
    }

    .quick-preview-scale-bar {
        padding: 8px 0;
        min-height: 44px;
        box-sizing: border-box;
        text-align: left;
    }

    .quick-preview-scale-bar.is-calibratable {
        pointer-events: auto;
        cursor: pointer;
        touch-action: manipulation;
        border-radius: 4px;
    }

    .quick-preview-scale-bar.is-calibratable:hover,
    .quick-preview-scale-bar.is-calibratable:focus-visible {
        background: rgba(16, 35, 44, 0.82);
        outline: 1px solid #7de3ff;
        outline-offset: 5px;
    }

    .quick-preview-scale-bar.is-visible {
        display: block;
    }

    .quick-preview-scale-bar-line {
        position: relative;
        display: block;
        height: 10px;
        box-sizing: border-box;
        margin: 0 0 4px;
        border-left: 2px solid #f6fbfd;
        border-right: 2px solid #f6fbfd;
        border-bottom: 2px solid #f6fbfd;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.96));
    }

    .quick-preview-scale-bar-label {
        display: block;
        line-height: 14px;
    }

    .quick-preview-media {
        position: absolute;
        left: 50%;
        top: 50%;
        max-width: none;
        max-height: none;
        transform-origin: center center;
        backface-visibility: visible;
        transform-style: preserve-3d;
        will-change: transform, filter;
        user-select: none;
        -webkit-user-drag: none;
    }

    .quick-preview-canvas {
        position: absolute;
        left: 50%;
        top: 50%;
        max-width: none;
        max-height: none;
        transform-origin: center center;
        backface-visibility: visible;
        transform-style: preserve-3d;
        will-change: transform, filter;
        user-select: none;
    }

    .quick-preview-video {
        position: absolute;
        left: 50%;
        top: 50%;
        max-width: none;
        max-height: none;
        transform-origin: center center;
        backface-visibility: visible;
        transform-style: preserve-3d;
        will-change: transform, filter;
        object-fit: contain;
        background: #000;
    }

    .quick-preview-measure-layer {
        position: absolute;
        inset: 0;
        z-index: 6;
        width: 100%;
        height: 100%;
        pointer-events: none;
        touch-action: none;
    }

    .quick-preview-gsps-layer {
        position: absolute;
        inset: 0;
        z-index: 5;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
    }

    .quick-preview-gsps-graphic {
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
        vector-effect: non-scaling-stroke;
    }

    .quick-preview-gsps-text {
        pointer-events: none;
        user-select: none;
    }

    .quick-preview-measure-layer.is-active {
        pointer-events: auto;
        cursor: crosshair;
    }

    .quick-preview-measure-layer.is-passive-hit-test {
        pointer-events: none;
        cursor: default;
    }

    .quick-preview-measure-layer.is-passive-hit-test [data-measure-uid],
    .quick-preview-measure-layer.is-passive-hit-test [data-measure-point],
    .quick-preview-measure-layer.is-passive-hit-test [data-measure-block] {
        pointer-events: auto;
    }

    .quick-preview-overlay.is-mpr .quick-preview-measure-layer.is-active {
        pointer-events: none;
    }

    .quick-preview-overlay.is-mpr .quick-preview-measure-layer.is-active [data-measure-uid],
    .quick-preview-overlay.is-mpr .quick-preview-measure-layer.is-active [data-measure-point],
    .quick-preview-overlay.is-mpr .quick-preview-measure-layer.is-active [data-measure-block] {
        pointer-events: auto;
    }

    .quick-preview-measure-line {
        stroke: var(--measure-color, #7de3ff);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 5px rgba(90, 214, 255, 0.28));
        pointer-events: stroke;
        cursor: pointer;
    }

    .quick-preview-measure-line.is-selected {
        stroke: #90f7ff;
        stroke-width: 2.8;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 8px rgba(125, 227, 255, 0.55));
    }

    .quick-preview-measure-line.is-vhs-long {
        stroke: #ff7a2f;
    }

    .quick-preview-measure-line.is-vhs-short {
        stroke: #32d7ff;
    }

    .quick-preview-measure-line.is-vhs-spine {
        stroke-dasharray: 7 5;
        opacity: 0.86;
    }

    .quick-preview-measure-line.is-vhs-block-draggable {
        cursor: move;
    }

    .quick-preview-measure-line.is-ohif-head-one,
    .quick-preview-measure-circle.is-ohif-head-one,
    .quick-preview-measure-label.is-ohif-head-one {
        stroke: #FCB12B;
        fill: none;
    }

    .quick-preview-measure-line.is-ohif-head-two,
    .quick-preview-measure-circle.is-ohif-head-two,
    .quick-preview-measure-label.is-ohif-head-two {
        stroke: #60A5FA;
        fill: none;
    }

    .quick-preview-measure-line.is-ohif-baseline {
        stroke: #A7F3D0;
        stroke-dasharray: 4 4;
    }

    .quick-preview-measure-line.is-ohif-angle {
        stroke: #FDE047;
    }

    .quick-preview-measure-line.is-ohif-connector {
        stroke: #FFFFFF;
        stroke-dasharray: 4 4;
    }

    .quick-preview-measure-line.is-protocol-primary {
        stroke: #FCB12B;
    }

    .quick-preview-measure-line.is-protocol-secondary {
        stroke: #22C55E;
    }

    .quick-preview-measure-line.is-protocol-tertiary {
        stroke: #60A5FA;
    }

    .quick-preview-measure-line.is-hu-profile,
    .quick-preview-measure-label.is-hu-profile {
        stroke: #38BDF8;
        fill: #BAE6FD;
    }

    .quick-preview-measure-line.is-lvm-ivsd,
    .quick-preview-measure-label.is-lvm-ivsd {
        stroke: #22D3EE;
        fill: #22D3EE;
    }

    .quick-preview-measure-line.is-lvm-lvidd,
    .quick-preview-measure-label.is-lvm-lvidd {
        stroke: #FACC15;
        fill: #FACC15;
    }

    .quick-preview-measure-line.is-lvm-lvpwd,
    .quick-preview-measure-label.is-lvm-lvpwd {
        stroke: #A3E635;
        fill: #A3E635;
    }

    .quick-preview-measure-line.is-lvm-ivss,
    .quick-preview-measure-label.is-lvm-ivss {
        stroke: #FB7185;
        fill: #FB7185;
    }

    .quick-preview-measure-line.is-lvm-lvids,
    .quick-preview-measure-label.is-lvm-lvids {
        stroke: #F97316;
        fill: #F97316;
    }

    .quick-preview-measure-line.is-lvm-lvpws,
    .quick-preview-measure-label.is-lvm-lvpws {
        stroke: #E879F9;
        fill: #E879F9;
    }

    .quick-preview-measure-label.is-lvm-ivsd,
    .quick-preview-measure-label.is-lvm-lvidd,
    .quick-preview-measure-label.is-lvm-lvpwd,
    .quick-preview-measure-label.is-lvm-ivss,
    .quick-preview-measure-label.is-lvm-lvids,
    .quick-preview-measure-label.is-lvm-lvpws {
        paint-order: stroke;
        stroke: rgba(0, 0, 0, 0.92);
        stroke-width: 3px;
        font-size: 10px;
        font-weight: 800;
    }

    .quick-preview-measure-label.is-lvm-summary {
        fill: #f6fbfd;
        font-size: 11px;
        font-weight: 800;
        stroke-width: 3px;
    }

    .quick-preview-measure-label.is-ohif-head-one {
        fill: #FCB12B;
        stroke: none;
    }

    .quick-preview-measure-label.is-ohif-head-two {
        fill: #60A5FA;
        stroke: none;
    }

    .quick-preview-measure-label.is-ohif-angle {
        fill: #FDE047;
        stroke: none;
    }

    .quick-preview-measure-circle {
        fill: transparent;
        stroke: var(--measure-color, #eeff41);
        stroke-width: 2.2;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
        pointer-events: stroke;
        cursor: pointer;
    }

    .quick-preview-measure-circle.is-selected {
        stroke-width: 3;
    }

    .quick-preview-measure-draft {
        stroke: rgba(125, 227, 255, 0.9);
        stroke-dasharray: 5 4;
        stroke-linecap: round;
    }

    .quick-preview-measure-roi {
        fill: rgba(90, 214, 255, 0.09);
        stroke: var(--measure-color, #7de3ff);
        stroke-width: 2;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 5px rgba(90, 214, 255, 0.26));
        pointer-events: visiblePainted;
        cursor: pointer;
    }

    .quick-preview-measure-roi.is-selected {
        stroke: #90f7ff;
        fill: rgba(90, 214, 255, 0.16);
    }

    .quick-preview-measure-point {
        fill: rgba(6, 18, 24, 0.92);
        stroke: var(--measure-color, #f6fbfd);
        stroke-width: 1.8;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.96)) drop-shadow(0 0 5px rgba(125, 227, 255, 0.36));
        pointer-events: auto;
        cursor: grab;
    }

    .quick-preview-measure-point.is-selected {
        fill: var(--measure-color, #7de3ff);
        stroke: #fff;
    }

    .quick-preview-measure-label {
        paint-order: stroke;
        stroke: rgba(0, 0, 0, 0.9);
        stroke-width: 3.5px;
        fill: #f6fbfd;
        font-size: 12px;
        font-weight: 800;
        pointer-events: none;
    }

    .quick-preview-2d-callout-line {
        stroke: currentColor;
        stroke-width: 1.65;
        stroke-linecap: round;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.88));
        pointer-events: stroke;
        cursor: pointer;
    }

    .quick-preview-2d-callout-arrow {
        fill: currentColor;
        stroke: none;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.95));
        pointer-events: none;
    }

    .quick-preview-2d-callout-anchor {
        fill: rgba(2, 10, 14, 0.96);
        stroke: currentColor;
        stroke-width: 2;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.88));
        pointer-events: auto;
        cursor: grab;
    }

    .quick-preview-2d-callout-box-shadow {
        fill: rgba(0, 0, 0, 0.36);
        stroke: none;
        pointer-events: none;
    }

    .quick-preview-2d-callout-box {
        fill: rgba(4, 14, 18, 0.9);
        stroke: currentColor;
        stroke-width: 1.45;
        vector-effect: non-scaling-stroke;
        shape-rendering: geometricPrecision;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.88)) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.42));
        pointer-events: visiblePainted;
        cursor: grab;
    }

    .quick-preview-2d-callout-text {
        fill: currentColor;
        stroke: rgba(0, 0, 0, 0.62);
        stroke-width: 1.6px;
        paint-order: stroke;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 800;
        pointer-events: none;
    }

    .quick-preview-2d-callout.is-selected .quick-preview-2d-callout-box {
        fill: rgba(5, 22, 29, 0.94);
        stroke-width: 1.9;
    }

    .quick-preview-2d-callout.is-selected .quick-preview-2d-callout-line,
    .quick-preview-2d-callout.is-selected .quick-preview-2d-callout-anchor {
        stroke-width: 2.45;
    }

    .quick-preview-3d-callout-line {
        stroke: #eeff41;
        stroke-width: 1.7;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.86));
        pointer-events: stroke;
        cursor: pointer;
    }

    .quick-preview-3d-callout-anchor {
        fill: #0b151b;
        stroke: #eeff41;
        stroke-width: 2;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
        pointer-events: auto;
        cursor: pointer;
    }

    .quick-preview-3d-callout.is-selected .quick-preview-3d-callout-line,
    .quick-preview-3d-callout.is-selected .quick-preview-3d-callout-anchor {
        stroke: #5ad6ff;
    }

    .quick-preview-3d-callout.is-dimmed:not(.is-selected) {
        opacity: 0.62;
    }

    .quick-preview-3d-callout.is-quiz-marker .quick-preview-3d-callout-line {
        stroke-dasharray: 5 4;
        opacity: 0.88;
    }

    .quick-preview-3d-callout.is-quiz-marker .quick-preview-3d-callout-anchor {
        fill: rgba(6, 18, 24, 0.95);
        stroke-width: 3;
    }

    .quick-preview-3d-distance-line {
        stroke: currentColor;
        stroke-width: 2;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
        pointer-events: stroke;
        cursor: pointer;
    }

    .quick-preview-3d-distance-point {
        fill: #071015;
        stroke: currentColor;
        stroke-width: 2;
        vector-effect: non-scaling-stroke;
    }

    .quick-preview-3d-distance.is-selected .quick-preview-3d-distance-line,
    .quick-preview-3d-distance.is-selected .quick-preview-3d-distance-point {
        stroke: #5ad6ff;
    }

    .quick-preview-3d-distance-label {
        fill: currentColor;
        paint-order: stroke;
        stroke: rgba(0, 0, 0, 0.9);
        stroke-width: 4px;
        stroke-linejoin: round;
        font-size: 12px;
        font-weight: 700;
        pointer-events: none;
    }

    .quick-preview-3d-callout-box {
        box-sizing: border-box;
        min-width: 84px;
        max-width: 220px;
        padding: 6px 8px;
        border: 1px solid currentColor;
        border-radius: 6px;
        background: rgba(4, 12, 16, 0.78);
        color: #eeff41;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.18;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38);
        pointer-events: auto;
        cursor: pointer;
    }

    .quick-preview-3d-callout.is-selected .quick-preview-3d-callout-box {
        color: #5ad6ff;
        background: rgba(5, 21, 29, 0.9);
    }

    .quick-preview-3d-callout.is-occluded {
        opacity: 0.42;
    }

    .quick-preview-3d-callout.is-occluded .quick-preview-3d-callout-line {
        stroke-dasharray: 5 4;
    }

    .quick-preview-3d-perf {
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 26;
        display: none;
        min-width: 190px;
        max-width: 260px;
        padding: 8px 10px;
        border: 1px solid rgba(90, 214, 255, 0.55);
        border-radius: 6px;
        background: rgba(3, 10, 14, 0.82);
        color: #dff8ff;
        font: 11px/1.35 Consolas, "Roboto Mono", monospace;
        pointer-events: none;
        white-space: pre;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
    }

    .quick-preview-3d-perf.is-visible {
        display: block;
    }

    .quick-preview-3d-segment-gizmo {
        fill: rgba(90, 214, 255, 0.035);
        stroke: rgba(90, 214, 255, 0.92);
        stroke-width: 1.8;
        stroke-dasharray: 7 5;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
        pointer-events: none;
    }

    .quick-preview-3d-segment-gizmo-center {
        fill: #071015;
        stroke: #5ad6ff;
        stroke-width: 2;
        vector-effect: non-scaling-stroke;
        pointer-events: none;
    }

    .quick-preview-3d-segment-gizmo-handle {
        fill: #071015;
        stroke: #5ad6ff;
        stroke-width: 2.4;
        vector-effect: non-scaling-stroke;
        pointer-events: all;
        cursor: grab;
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.95));
    }

    .quick-preview-3d-segment-gizmo-handle:hover {
        fill: #5ad6ff;
        stroke: #ffffff;
    }

    .quick-preview-3d-segment-gizmo-handle.is-axis-x {
        stroke: #ff5a7a;
    }

    .quick-preview-3d-segment-gizmo-handle.is-axis-y {
        stroke: #22c55e;
    }

    .quick-preview-3d-segment-gizmo-handle.is-axis-z {
        stroke: #facc15;
    }

    .quick-preview-3d-segment-gizmo-handle.is-dragging {
        cursor: grabbing;
    }

    .quick-preview-3d-segment-gizmo-center.is-seed-history {
        fill: rgba(90, 214, 255, 0.36);
        stroke: rgba(90, 214, 255, 0.58);
        stroke-width: 1.4;
    }

    .quick-preview-3d-segment-axis {
        stroke-width: 1.45;
        stroke-dasharray: 3 5;
        vector-effect: non-scaling-stroke;
        pointer-events: none;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.92));
    }

    .quick-preview-3d-segment-axis-label {
        font-size: 11px;
        font-weight: 800;
        paint-order: stroke;
        stroke: rgba(0, 0, 0, 0.9);
        stroke-width: 3px;
        pointer-events: none;
    }

    .quick-preview-layout-grid {
        position: absolute;
        inset: 44px 34px 118px;
        z-index: 4;
        display: none;
        gap: 8px;
        pointer-events: auto;
    }

    .quick-preview-stage.is-layout-grid .quick-preview-layout-grid {
        display: grid;
    }

    .quick-preview-stage.is-layout-grid .quick-preview-media,
    .quick-preview-stage.is-layout-grid .quick-preview-canvas,
    .quick-preview-stage.is-layout-grid .quick-preview-video {
        display: none !important;
    }

    .quick-preview-stage.layout-2x1 .quick-preview-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-preview-stage.layout-1x2 .quick-preview-layout-grid {
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .quick-preview-stage.layout-2x2 .quick-preview-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .quick-preview-stage.layout-4x4 .quick-preview-layout-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    .quick-preview-layout-cell {
        position: relative;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        padding: 0;
        border: 1px solid rgba(90, 214, 255, 0.38);
        border-radius: 4px;
        background: rgba(3, 8, 12, 0.78);
        color: #f6fbfd;
        cursor: pointer;
    }

    .quick-preview-layout-cell.is-active {
        border-color: #eeff41;
        box-shadow: inset 0 0 0 1px rgba(238, 255, 65, 0.45);
    }

    .quick-preview-layout-cell.is-drop-target {
        border-color: #5ad6ff;
        box-shadow: inset 0 0 0 2px rgba(90, 214, 255, 0.72), 0 0 22px rgba(90, 214, 255, 0.22);
    }

    .quick-preview-layout-cell img,
    .quick-preview-layout-cell canvas.quick-preview-layout-image {
        position: absolute;
        left: 50%;
        top: 50%;
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
        object-fit: fill;
        background: #000;
        transform-origin: center center;
        backface-visibility: visible;
        transform-style: preserve-3d;
        transition: filter 90ms linear;
        will-change: transform, filter;
    }

    .quick-preview-overlay.is-2d-flipping .quick-preview-media,
    .quick-preview-overlay.is-2d-flipping .quick-preview-canvas,
    .quick-preview-overlay.is-2d-flipping .quick-preview-video,
    .quick-preview-overlay.is-2d-flipping .quick-preview-layout-cell img {
        transition: transform 520ms cubic-bezier(0.16, 0.84, 0.22, 1), filter 120ms linear;
    }

    .quick-preview-layout-cell-label {
        position: absolute;
        left: 6px;
        bottom: 5px;
        padding: 2px 6px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.62);
        color: #eeff41;
        font-size: 11px;
        font-weight: 700;
    }

    .teaching-embed-dialog {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: min(640px, calc(100vw - 64px));
        max-width: 100%;
        color: #f4fbff;
    }

    .teaching-embed-title {
        min-height: 20px;
        font-weight: 700;
        color: #ffffff;
        overflow-wrap: anywhere;
    }

    .teaching-embed-field {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
    }

    .teaching-embed-field label {
        color: #eeff41;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.2;
    }

    .teaching-embed-field input,
    .teaching-embed-field select,
    .teaching-embed-field textarea {
        width: 100%;
        box-sizing: border-box;
        min-height: 36px;
        border: 1px solid rgba(140, 190, 204, 0.42);
        border-radius: 4px;
        background: rgba(6, 17, 24, 0.82);
        color: #ffffff;
        padding: 8px 10px;
        font: inherit;
        line-height: 1.35;
    }

    .teaching-embed-field textarea {
        min-height: 76px;
        resize: vertical;
    }

    .teaching-embed-field input[readonly],
    .teaching-embed-field textarea[readonly] {
        color: #d9eef5;
        background: rgba(7, 13, 18, 0.74);
    }

    .teaching-embed-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
    }

    .teaching-embed-options {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
        padding: 8px 10px;
        border: 1px solid rgba(140, 190, 204, 0.34);
        border-radius: 4px;
        background: rgba(6, 17, 24, 0.62);
    }

    .teaching-embed-options label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #f4fbff;
        font-size: 12px;
        font-weight: 700;
    }

    .teaching-embed-options input[type="checkbox"] {
        width: auto;
        min-height: 0;
        accent-color: #eeff41;
    }

    .teaching-embed-status {
        min-height: 20px;
        color: #c7d9df;
        font-size: 13px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .teaching-embed-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: wrap;
        padding-top: 2px;
    }

    .teaching-embed-actions .mdl-button {
        min-width: 96px;
        color: #f4fbff;
    }

    .teaching-embed-actions .mdl-button--accent {
        color: #111;
    }

    .teaching-embed-mode #quick_preview_close,
    .teaching-embed-mode #quick_preview_open_viewer {
        display: none !important;
    }

    .quick-preview-measure-panel {
        position: absolute;
        left: 8px;
        right: auto;
        top: 150px;
        z-index: 11;
        display: none;
        width: min(360px, calc(100% - 20px));
        max-height: calc(100% - 170px);
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-gutter: stable;
        border: 1px solid rgba(90, 214, 255, 0.42);
        border-radius: 6px;
        background: rgba(5, 13, 18, 0.78);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
        backdrop-filter: blur(8px);
        pointer-events: auto;
        transition: width 150ms ease, opacity 150ms ease;
    }

    .quick-preview-measure-panel.is-visible {
        display: flex;
        flex-direction: column;
    }

    .quick-preview-measure-panel.is-collapsed {
        width: 42px;
    }

    .quick-preview-measure-panel.is-collapsed .quick-preview-measure-panel-title,
    .quick-preview-measure-panel.is-collapsed .quick-preview-measure-panel-clear,
    .quick-preview-measure-panel.is-collapsed .quick-preview-rwvm-selector,
    .quick-preview-measure-panel.is-collapsed #quick_preview_pm_panel,
    .quick-preview-measure-panel.is-collapsed .quick-preview-annotation-storage,
    .quick-preview-measure-panel.is-collapsed .quick-preview-saved-views,
    .quick-preview-measure-panel.is-collapsed .quick-preview-measure-list {
        display: none;
    }

    .quick-preview-measure-panel.is-collapsed .quick-preview-measure-panel-head {
        grid-template-columns: 1fr;
        justify-content: center;
        padding: 6px 4px;
        border-bottom: 0;
    }

    .quick-preview-measure-panel.is-collapsed .quick-preview-annotation-save-state {
        display: none;
    }

    .quick-preview-active-tool {
        position: absolute;
        left: auto;
        right: 16px;
        top: 54px;
        z-index: 80;
        display: none;
        align-items: center;
        gap: 8px;
        max-width: min(420px, calc(100% - 24px));
        padding: 6px 7px 6px 10px;
        border: 1px solid rgba(238, 255, 65, 0.52);
        border-radius: 6px;
        background: rgba(5, 13, 18, 0.86);
        color: #f6fbfd;
        font-size: 12px;
        font-weight: 700;
        transform: none;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.36);
        pointer-events: auto;
    }

    .quick-preview-overlay.is-3d .quick-preview-active-tool {
        top: 14px;
        left: calc(50% + min(252px, calc((100% - 360px) / 2)));
        right: auto;
        max-width: min(360px, max(190px, calc(50% - 276px)));
    }

    .quick-preview-overlay.is-mixed .quick-preview-active-tool {
        top: 14px;
        left: calc((100% - var(--quick-preview-mixed-mpr-width, min(330px, 24vw))) / 2 + 252px);
        right: auto;
        max-width: min(340px, max(190px, calc((100% - var(--quick-preview-mixed-mpr-width, min(330px, 24vw))) / 2 - 276px)));
    }

    .quick-preview-active-tool.is-visible {
        display: flex;
    }

    .quick-preview-active-tool > .quick-preview-toolbutton {
        flex: 0 0 auto;
        min-width: 44px;
        min-height: 44px;
    }

    #quick_preview_active_tool_cancel {
        width: auto;
        gap: 4px;
        padding: 0 8px;
    }

    .quick-preview-shortcuts-panel {
        position: absolute;
        top: 54px;
        right: 16px;
        z-index: 86;
        display: none;
        width: min(360px, calc(100vw - 32px));
        max-height: min(620px, calc(100dvh - 112px));
        overflow: auto;
        border: 1px solid rgba(90, 214, 255, 0.52);
        border-radius: 7px;
        background: rgba(6, 17, 23, 0.97);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48);
        color: #f6fbfd;
    }

    .quick-preview-shortcuts-panel.is-open {
        display: block;
    }

    .quick-preview-shortcuts-panel.is-editing {
        width: min(560px, calc(100vw - 32px));
    }

    .quick-preview-shortcuts-head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 42px;
        padding: 5px 6px 5px 12px;
        border-bottom: 1px solid rgba(90, 214, 255, 0.24);
        background: #0a1921;
        color: #eeff41;
        font-size: 12px;
        font-weight: 900;
    }

    .quick-preview-shortcuts-list {
        display: grid;
        grid-template-columns: minmax(86px, auto) minmax(0, 1fr);
        margin: 0;
        padding: 8px 12px 12px;
    }

    .quick-preview-shortcuts-list dt,
    .quick-preview-shortcuts-list dd {
        min-height: 34px;
        margin: 0;
        padding: 6px 0;
        border-bottom: 1px solid rgba(90, 214, 255, 0.12);
    }

    .quick-preview-shortcuts-list dd {
        color: rgba(246, 251, 253, 0.8);
        font-size: 12px;
    }

    .quick-preview-shortcuts-list kbd {
        display: inline-block;
        min-width: 26px;
        padding: 3px 6px;
        border: 1px solid rgba(158, 181, 193, 0.5);
        border-bottom-width: 2px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.07);
        color: #fff;
        font: 800 11px/1.2 system-ui, sans-serif;
        text-align: center;
    }

    .quick-preview-shortcuts-head-actions,
    .quick-preview-input-profile-actions {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .quick-preview-shortcuts-head-actions {
        margin-left: auto;
    }

    .quick-preview-shortcuts-head-actions .quick-preview-toolbutton {
        pointer-events: auto;
        touch-action: manipulation;
    }

    #quick_preview_shortcuts_edit {
        width: auto;
        padding: 0 9px;
        gap: 5px;
    }

    .quick-preview-shortcuts-edit-label {
        font-size: 11px;
        font-weight: 800;
    }

    .quick-preview-input-profile-editor {
        display: none;
        padding: 10px 12px 12px;
    }

    .quick-preview-shortcuts-panel.is-editing .quick-preview-shortcuts-list { display: none; }
    .quick-preview-shortcuts-panel.is-editing .quick-preview-input-profile-editor { display: block; }

    .quick-preview-input-profile-group {
        margin: 0 0 12px;
        padding: 0;
        border: 0;
    }

    .quick-preview-input-profile-group legend {
        width: 100%;
        margin-bottom: 6px;
        color: #eeff41;
        font-size: 12px;
        font-weight: 900;
    }

    .quick-preview-input-profile-row {
        display: grid;
        grid-template-columns: minmax(130px, 1fr) minmax(160px, 1.25fr);
        align-items: center;
        gap: 8px;
        min-height: 42px;
        border-bottom: 1px solid rgba(90, 214, 255, 0.12);
        font-size: 12px;
    }

    .quick-preview-input-profile-row input,
    .quick-preview-input-profile-row select {
        width: 100%;
        min-height: 34px;
        border: 1px solid rgba(158, 181, 193, 0.5);
        border-radius: 4px;
        background: #071219;
        color: #fff;
    }

    .quick-preview-input-profile-status {
        min-height: 20px;
        margin: 6px 0;
        color: rgba(246, 251, 253, 0.78);
        font-size: 11px;
    }

    .quick-preview-input-profile-status.is-error { color: #ff8f8f; }

    .quick-preview-input-profile-actions {
        position: sticky;
        bottom: 0;
        justify-content: flex-end;
        padding-top: 8px;
        background: #0a1921;
    }

    @media (max-width: 620px), (pointer: coarse) {
        .quick-preview-shortcuts-panel {
            top: 8px;
            right: 8px;
            width: calc(100vw - 16px);
            max-height: calc(100dvh - 16px);
        }

        .quick-preview-input-profile-row {
            grid-template-columns: 1fr;
            gap: 4px;
            padding: 7px 0;
        }

        .quick-preview-shortcuts-head button,
        .quick-preview-input-profile-actions button {
            min-width: 44px;
            min-height: 44px;
        }
    }

    .quick-preview-stage.is-space-pan {
        cursor: grab;
    }

    .quick-preview-active-tool-label {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .quick-preview-tool-dialog {
        position: absolute;
        left: 50%;
        top: 96px;
        z-index: 81;
        display: none;
        width: min(360px, calc(100% - 24px));
        padding: 10px;
        border: 1px solid rgba(90, 214, 255, 0.48);
        border-radius: 6px;
        background: rgba(5, 13, 18, 0.92);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
        backdrop-filter: blur(10px);
        color: #f6fbfd;
        pointer-events: auto;
        transform: translateX(-50%);
    }

    .quick-preview-tool-dialog.is-visible {
        display: block;
    }

    #quick_preview_vhs_dialog {
        box-sizing: border-box;
        max-height: calc(100% - 108px);
        overflow-y: auto;
        touch-action: pan-y;
    }

    .quick-preview-tool-dialog-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
        color: #eeff41;
        font-size: 13px;
        font-weight: 800;
    }

    .quick-preview-tool-dialog-body {
        display: grid;
        gap: 8px;
        font-size: 12px;
        line-height: 1.35;
    }

    .quick-preview-tool-dialog-body p {
        margin: 0;
    }

    .quick-preview-tool-dialog-body ol {
        margin: 0;
        padding-left: 18px;
    }

    .quick-preview-tool-dialog-body label {
        display: grid;
        gap: 5px;
        color: #d9eef5;
        font-size: 12px;
        font-weight: 700;
    }

    .quick-preview-tool-dialog-body input,
    .quick-preview-tool-dialog-body textarea {
        min-width: 0;
        height: 30px;
        box-sizing: border-box;
        border: 1px solid rgba(128, 185, 205, 0.46);
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.38);
        color: #fff;
        padding: 4px 7px;
        font-size: 13px;
    }

    .quick-preview-tool-dialog-body textarea {
        height: auto;
        min-height: 72px;
        resize: vertical;
    }

    #quick_preview_measure_text_dialog {
        max-height: calc(100% - 120px);
        overflow-y: auto;
        box-sizing: border-box;
    }

    .quick-preview-tool-dialog-body input[type="color"] {
        width: 44px;
        padding: 0;
    }

    .quick-preview-tool-dialog-body input[type="range"] {
        flex: 1 1 auto;
        padding: 0;
    }

    .quick-preview-tool-dialog-body .quick-preview-label-editor-inline > span {
        min-width: 26px;
        text-align: right;
        color: rgba(246, 251, 253, 0.76);
        font-size: 12px;
        font-weight: 800;
    }

    .quick-preview-tool-dialog-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 10px;
    }

    .quick-preview-3d-quickbar {
        position: absolute;
        left: 50%;
        top: 20px;
        z-index: 10;
        display: none;
        align-items: center;
        gap: 8px;
        width: min(486px, calc(100% - 360px));
        min-width: 280px;
        padding: 6px 7px;
        border: 1px solid rgba(95, 168, 190, 0.46);
        border-radius: 6px;
        background: rgba(5, 13, 18, 0.8);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
        backdrop-filter: blur(8px);
        transform: translateX(-50%);
        pointer-events: auto;
    }

    .quick-preview-overlay.is-mixed .quick-preview-3d-quickbar {
        left: calc((100% - var(--quick-preview-mixed-mpr-width, min(330px, 24vw))) / 2);
        right: auto;
        width: min(486px, calc(100% - var(--quick-preview-mixed-mpr-width, min(330px, 24vw)) - 360px));
        min-width: 280px;
        transform: translateX(-50%);
    }

    .quick-preview-overlay.is-mixed:has(.quick-preview-mpr-grid.is-oblique-enabled) {
        --quick-preview-mixed-mpr-width: min(280px, 21vw);
    }

    .quick-preview-3d-quickbar.is-visible {
        display: flex;
    }

    .quick-preview-3d-endoscopy-bar {
        position: absolute;
        left: 50%;
        top: 58px;
        z-index: 10;
        display: none;
        align-items: center;
        gap: 6px;
        max-width: min(460px, calc(100% - 360px));
        padding: 6px 7px;
        border: 1px solid rgba(238, 255, 65, 0.55);
        border-radius: 6px;
        background: rgba(5, 13, 18, 0.84);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
        backdrop-filter: blur(8px);
        transform: translateX(-50%);
        pointer-events: auto;
    }

    .quick-preview-overlay.is-mixed .quick-preview-3d-endoscopy-bar {
        left: calc((100% - var(--quick-preview-mixed-mpr-width, min(330px, 24vw))) / 2);
        max-width: min(420px, calc(100% - var(--quick-preview-mixed-mpr-width, min(330px, 24vw)) - 360px));
        transform: translateX(-50%);
    }

    .quick-preview-3d-endoscopy-bar.is-visible {
        display: flex;
    }

    .quick-preview-3d-endoscopy-label {
        min-width: 0;
        max-width: 190px;
        color: #f6fbfd;
        font-size: 11px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-preview-3d-endoscopy-slider {
        width: 130px;
        min-width: 90px;
        max-width: 180px;
        flex: 1 1 120px;
    }

    .quick-preview-3d-quickbar-label {
        flex: 0 0 auto;
        color: rgba(246, 251, 253, 0.82);
        font-size: 11px;
        font-weight: 700;
    }

    .quick-preview-3d-quickbar input[type="range"] {
        min-width: 90px;
        flex: 1 1 auto;
    }

    .quick-preview-3d-quickbar select {
        width: 86px;
        height: 30px;
        box-sizing: border-box;
        border: 1px solid rgba(158, 181, 193, 0.38);
        border-radius: 4px;
        background: rgba(4, 12, 16, 0.92);
        color: #f6fbfd;
        font-size: 11px;
    }

    #quick_preview_3d_quick_projection {
        width: auto;
        min-width: 140px;
        min-height: 44px;
        flex-shrink: 0;
    }

    .quick-preview-3d-quickbar-value {
        width: 34px;
        color: #f6fbfd;
        font-size: 11px;
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

    .quick-preview-2d-orientation-bar {
        position: absolute;
        right: 22px;
        bottom: 32px;
        z-index: 14;
        display: none;
        align-items: center;
        gap: 8px;
        width: auto;
        max-width: min(460px, calc(100% - 44px));
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        pointer-events: auto;
        transform: translate3d(0, 8px, 0);
        opacity: 0;
        transition: opacity 150ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .quick-preview-2d-orientation-bar.is-visible {
        display: flex;
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .quick-preview-2d-orientation-bar.has-change {
        box-shadow: none;
    }

    .quick-preview-2d-orientation-dial-wrap {
        position: relative;
        flex: 0 0 auto;
        width: 120px;
        height: 120px;
    }

    .quick-preview-2d-orientation-dial {
        position: absolute;
        inset: 0;
        width: 120px;
        height: 120px;
        border: 1px solid rgba(95, 168, 190, 0.46);
        border-radius: 50%;
        background:
            radial-gradient(circle at 50% 50%, rgba(22, 53, 62, 0.92) 0, rgba(11, 26, 34, 0.96) 52%, rgba(4, 12, 16, 0.96) 100%);
        box-shadow: inset 0 0 20px rgba(90, 214, 255, 0.14), 0 10px 26px rgba(0, 0, 0, 0.36);
        cursor: grab;
        touch-action: none;
    }

    .quick-preview-2d-orientation-dial:active {
        cursor: grabbing;
    }

    .quick-preview-2d-orientation-angle {
        position: absolute;
        left: 50%;
        bottom: 7px;
        min-width: 44px;
        padding: 2px 6px;
        border: 1px solid rgba(238, 255, 65, 0.42);
        border-radius: 999px;
        background: rgba(4, 10, 13, 0.76);
        color: #f6fbfd;
        font-size: 11px;
        font-weight: 900;
        font-variant-numeric: tabular-nums;
        line-height: 1.2;
        text-align: center;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .quick-preview-2d-orientation-reset {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 2;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 1px solid rgba(238, 255, 65, 0.54);
        border-radius: 50%;
        background: rgba(5, 15, 18, 0.92);
        color: #eeff41;
        box-shadow: 0 0 0 3px rgba(238, 255, 65, 0.08);
        cursor: pointer;
        transform: translate(-50%, -50%);
    }

    .quick-preview-2d-orientation-reset .material-icons {
        font-size: 20px;
    }

    .quick-preview-2d-orientation-reset:disabled {
        border-color: rgba(158, 181, 193, 0.24);
        color: rgba(246, 251, 253, 0.36);
        box-shadow: none;
        cursor: default;
    }

    .quick-preview-2d-arc-button {
        position: absolute;
        top: 50%;
        z-index: 3;
        display: grid;
        place-items: center;
        width: 32px;
        height: 44px;
        padding: 0;
        border: 1px solid rgba(90, 214, 255, 0.52);
        background: rgba(6, 20, 26, 0.9);
        color: #7de3ff;
        cursor: pointer;
        transform: translateY(-50%);
    }

    .quick-preview-2d-arc-button:hover {
        border-color: rgba(238, 255, 65, 0.74);
        color: #eeff41;
        background: rgba(18, 35, 31, 0.94);
    }

    .quick-preview-2d-arc-button .material-icons {
        font-size: 20px;
    }

    .quick-preview-2d-arc-button.is-left {
        left: -4px;
        border-radius: 24px 6px 6px 24px;
    }

    .quick-preview-2d-arc-button.is-right {
        right: -4px;
        border-radius: 6px 24px 24px 6px;
    }

    .quick-preview-2d-mirror-block {
        display: grid;
        grid-template-columns: 40px;
        grid-template-rows: repeat(2, 40px);
        gap: 7px;
        align-items: center;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .quick-preview-2d-mirror-title {
        display: none;
    }

    .quick-preview-2d-mirror-button {
        display: grid;
        grid-template-columns: 1fr;
        place-items: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid rgba(90, 214, 255, 0.42);
        border-radius: 8px;
        background: rgba(4, 14, 19, 0.78);
        color: #bdefff;
        box-shadow: 0 9px 22px rgba(0, 0, 0, 0.32);
        backdrop-filter: blur(7px);
        cursor: pointer;
    }

    .quick-preview-2d-mirror-button:hover,
    .quick-preview-2d-mirror-button.is-active {
        border-color: rgba(238, 255, 65, 0.8);
        background: rgba(238, 255, 65, 0.13);
        color: #eeff41;
    }

    .quick-preview-2d-mirror-button .material-icons {
        font-size: 21px;
        line-height: 1;
    }

    .quick-preview-2d-mirror-button small {
        margin-top: -4px;
        font-size: 9px;
        font-weight: 900;
        line-height: 1;
    }

    .quick-preview-2d-orientation-warning {
        position: absolute;
        left: 50%;
        top: 18px;
        z-index: 14;
        display: none;
        max-width: min(520px, calc(100% - 44px));
        padding: 3px 7px;
        border: 1px solid rgba(238, 255, 65, 0.46);
        border-radius: 4px;
        background: rgba(8, 14, 14, 0.74);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
        color: #eeff41;
        font-size: 10px;
        font-weight: 800;
        line-height: 1.15;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92);
        transform: translateX(-50%);
        pointer-events: none;
        white-space: nowrap;
    }

    .quick-preview-2d-orientation-warning.is-visible {
        display: block;
    }

    .quick-preview-density-curve-wrap {
        position: relative;
        flex: 0 0 auto;
    }

    .quick-preview-density-curve-popover {
        position: absolute;
        box-sizing: border-box;
        max-height: calc(100dvh - 140px);
        overflow-y: auto;
        top: calc(100% + 8px);
        right: 0;
        display: none;
        width: min(360px, calc(100vw - 24px));
        padding: 8px;
        border: 1px solid rgba(95, 168, 190, 0.56);
        border-radius: 6px;
        background: rgba(5, 14, 20, 0.96);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46);
        backdrop-filter: blur(10px);
        color: #f6fbfd;
    }

    .quick-preview-density-curve-popover.is-open {
        display: grid;
        gap: 7px;
    }

    .quick-preview-density-curve-canvas {
        width: 100%;
        height: 118px;
        display: block;
        border: 1px solid rgba(95, 168, 190, 0.42);
        border-radius: 4px;
        background: #020609;
        touch-action: none;
        cursor: crosshair;
    }

    .quick-preview-density-curve-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    .quick-preview-density-curve-actions .quick-preview-toolbutton {
        min-width: 44px;
        height: 44px;
        flex: 0 0 auto;
    }

    .quick-preview-density-curve-readout {
        min-width: 0;
        color: rgba(246, 251, 253, 0.72);
        font-size: 10px;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .quick-preview-density-curve-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
    .quick-preview-density-curve-fields label { display: grid; gap: 4px; min-width: 0; }
    .quick-preview-density-curve-popover .quick-preview-density-curve-fields input,
    .quick-preview-density-curve-popover .quick-preview-density-curve-fields select {
        box-sizing: border-box; width: 100%; max-width: none; min-width: 0; min-height: 44px; background: #10212b; color: #f6fbfd; border: 1px solid #5fa8be;
    }
    .quick-preview-density-curve-popover .quick-preview-density-curve-fields input[type="range"] { grid-column: 1 / -1; width: 100%; min-width: 44px; }
    .quick-preview-density-curve-popover :focus-visible { outline: 2px solid #d7ff35; outline-offset: 2px; }
    .quick-preview-density-curve-axis { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; }
    .quick-preview-density-curve-readout { white-space: normal; font-size: 12px; }

    .quick-preview-3d-preset-wrap {
        position: relative;
        flex: 0 0 auto;
    }

    .quick-preview-3d-preset-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        display: none;
        width: 270px;
        padding: 6px;
        border: 1px solid rgba(90, 214, 255, 0.42);
        border-radius: 6px;
        background: rgba(5, 13, 18, 0.96);
        box-shadow: 0 18px 38px rgba(0, 0, 0, 0.46);
        max-height: min(520px, calc(100vh - 140px));
        overflow-y: auto;
    }

    .quick-preview-3d-preset-menu.is-open {
        display: grid;
        gap: 4px;
    }

    .quick-preview-3d-preset-option {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-height: 38px;
        padding: 5px 7px;
        border: 1px solid transparent;
        border-radius: 5px;
        background: transparent;
        color: #f6fbfd;
        text-align: left;
        cursor: pointer;
    }

    .quick-preview-3d-preset-option:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

    .quick-preview-3d-preset-unavailable {
        margin: 4px 6px;
        color: #d9e5eb;
        font-size: 12px;
    }

    .quick-preview-3d-preset-option:not(:disabled):hover,
    .quick-preview-3d-preset-option.is-active {
        border-color: rgba(90, 214, 255, 0.46);
        background: rgba(90, 214, 255, 0.11);
    }

    .quick-preview-3d-preset-swatch {
        width: 16px;
        height: 16px;
        border: 1px solid rgba(255, 255, 255, 0.48);
        border-radius: 3px;
    }

    .quick-preview-3d-preset-copy strong,
    .quick-preview-3d-preset-copy small {
        display: block;
    }

    .quick-preview-3d-preset-copy strong {
        font-size: 11px;
    }

    .quick-preview-3d-cursor {
        fill: rgba(5, 13, 18, 0.9);
        stroke: #5ad6ff;
        stroke-width: 2;
        vector-effect: non-scaling-stroke;
        pointer-events: none;
    }

    .quick-preview-3d-preset-copy small {
        margin-top: 2px;
        color: rgba(246, 251, 253, 0.62);
        font-size: 10px;
    }

    .quick-preview-3d-preset-threshold {
        color: rgba(246, 251, 253, 0.62);
        font-size: 10px;
        font-variant-numeric: tabular-nums;
    }

    .quick-preview-label-editor {
        position: absolute;
        left: 10px;
        bottom: 112px;
        z-index: 13;
        display: none;
        width: min(360px, calc(100% - 20px));
        padding: 10px;
        border: 1px solid rgba(90, 214, 255, 0.46);
        border-radius: 6px;
        background: rgba(5, 13, 18, 0.9);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
        backdrop-filter: blur(8px);
        color: #f6fbfd;
        pointer-events: auto;
    }

    .quick-preview-label-editor.is-open {
        display: grid;
        gap: 9px;
    }

    .quick-preview-segment-editor.is-open {
        z-index: 36;
        max-height: calc(100% - 136px);
        overflow-y: auto;
    }

    #quick_preview_3d_segment_editor button,
    #quick_preview_3d_segment_editor select,
    #quick_preview_3d_segment_editor input[type="range"],
    #quick_preview_3d_segment_editor .is-checks > label {
        min-height: 44px;
    }

    #quick_preview_3d_segment_editor button {
        min-width: 44px;
    }

    .quick-preview-label-editor-head,
    .quick-preview-label-editor-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .quick-preview-label-editor-title {
        font-size: 13px;
        font-weight: 800;
    }

    .quick-preview-label-editor-row {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        font-size: 12px;
    }

    .quick-preview-label-editor-row.is-checks {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .quick-preview-label-editor textarea,
    .quick-preview-label-editor input[type="text"],
    .quick-preview-label-editor input[type="number"],
    .quick-preview-label-editor select {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid rgba(158, 181, 193, 0.38);
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.28);
        color: #f6fbfd;
        font: inherit;
    }

    .quick-preview-label-editor textarea {
        min-height: 76px;
        resize: vertical;
    }

    .quick-preview-label-editor input[type="color"] {
        width: 44px;
        height: 28px;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .quick-preview-label-editor-inline {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .quick-preview-segment-modes,
    .quick-preview-segment-utilities {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .quick-preview-segment-modes .quick-preview-toolbutton {
        width: 100%;
        min-width: 0;
        gap: 5px;
        font-size: 11px;
    }

    .quick-preview-segment-preview {
        min-height: 18px;
        color: rgba(125, 227, 255, 0.9);
        font-size: 11px;
        font-variant-numeric: tabular-nums;
    }

    .quick-preview-segment-density-box {
        display: grid;
        gap: 6px;
        padding: 8px;
        border: 1px solid rgba(90, 214, 255, 0.18);
        border-radius: 8px;
        background: rgba(5, 18, 24, 0.42);
    }

    .quick-preview-segment-density-title {
        color: rgba(246, 251, 253, 0.78);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .quick-preview-segment-density-help {
        color: rgba(198, 216, 224, 0.76);
        font-size: 10.5px;
        line-height: 1.28;
    }

    .quick-preview-stl-export-box {
        border-color: rgba(169, 255, 0, 0.30);
        background: rgba(18, 28, 16, 0.46);
    }

    .quick-preview-segment-density-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    .quick-preview-segment-density-actions .quick-preview-toolbutton {
        width: 100%;
        min-width: 0;
        gap: 4px;
        font-size: 10px;
        white-space: normal;
        line-height: 1.15;
    }

    .quick-preview-3d-guided-box {
        display: grid;
        gap: 7px;
        margin: 0 0 9px;
        padding: 9px;
        border: 1px solid rgba(217, 160, 176, 0.42);
        border-radius: 6px;
        background: rgba(30, 11, 18, 0.56);
    }

    .quick-preview-3d-guided-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        color: #f8d7df;
        font-size: 12px;
        font-weight: 800;
    }

    .quick-preview-3d-guided-copy {
        color: rgba(246, 251, 253, 0.76);
        font-size: 11px;
        line-height: 1.35;
    }

    .quick-preview-3d-guided-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    .quick-preview-3d-guided-actions .quick-preview-toolbutton {
        width: 100%;
        min-width: 0;
        gap: 5px;
        font-size: 10px;
    }

    .quick-preview-segment-utilities {
        grid-template-columns: repeat(5, 32px);
        justify-content: end;
    }

    .quick-preview-measure-panel-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px;
        padding: 7px 6px 7px 8px;
        border-bottom: 1px solid rgba(90, 214, 255, 0.22);
        color: rgba(246, 251, 253, 0.86);
        font-size: 12px;
        font-weight: 700;
    }

    .quick-preview-measure-panel-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-preview-measure-panel-actions {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: 0 1 auto;
        min-width: 0;
        justify-content: flex-end;
    }

    .quick-preview-annotation-save-state {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 24px;
        width: 24px;
        min-width: 24px;
        height: 28px;
        overflow: hidden;
        color: rgba(174, 234, 0, 0.86);
        font-size: 0;
        font-weight: 600;
    }

    .quick-preview-annotation-save-state::before {
        content: "info";
        font-family: "Material Icons";
        font-size: 18px;
        line-height: 1;
    }

    .quick-preview-annotation-save-state.is-empty {
        display: none;
    }

    .quick-preview-annotation-save-state.is-saved::before {
        content: "cloud_done";
    }

    .quick-preview-annotation-save-state.is-saving::before {
        content: "sync";
    }

    .quick-preview-annotation-save-state.is-dirty {
        color: #eeff41;
    }

    .quick-preview-annotation-save-state.is-dirty::before {
        content: "edit";
    }

    .quick-preview-annotation-save-state.is-error {
        color: #ff8a80;
    }

    .quick-preview-annotation-save-state.is-error::before {
        content: "error";
    }

    .quick-preview-annotation-error {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 10px;
        color: #ffc1bb;
        background: #381f26;
        border-bottom: 1px solid #a75c64;
        font-size: 13px;
        line-height: 1.45;
    }

    .quick-preview-annotation-error[hidden] { display: none; }
    .quick-preview-annotation-error > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
    .quick-preview-annotation-error > button { flex: 0 0 auto; min-width: 32px; min-height: 32px; }

    .quick-preview-measure-panel-actions .quick-preview-toolbutton {
        flex: 0 0 auto;
    }

    .quick-preview-annotation-storage {
        display: none;
        gap: 6px;
        padding: 7px;
        border-bottom: 1px solid rgba(90, 214, 255, 0.18);
        background: rgba(3, 13, 18, 0.94);
    }

    .quick-preview-annotation-storage.is-open {
        display: grid;
    }

    .quick-preview-annotation-storage-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        gap: 5px;
        align-items: center;
    }

    .quick-preview-annotation-storage-row.is-name {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .quick-preview-annotation-storage.is-nifti .quick-preview-annotation-storage-row {
        grid-template-columns: repeat(2, minmax(44px, 1fr));
    }

    .quick-preview-annotation-storage.is-nifti .quick-preview-toolbutton {
        width: 100%;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .quick-preview-annotation-storage select,
    .quick-preview-annotation-storage input {
        width: 100%;
        min-width: 0;
        height: 30px;
        box-sizing: border-box;
        border: 1px solid rgba(90, 214, 255, 0.34);
        border-radius: 4px;
        outline: none;
        background: #071116;
        color: #f2f8fa;
        font-size: 11px;
    }

    .quick-preview-annotation-storage input {
        padding: 0 7px;
    }

    .quick-preview-annotation-storage-meta {
        min-height: 14px;
        color: rgba(213, 229, 235, 0.66);
        font-size: 10px;
        line-height: 1.35;
    }

    .quick-preview-annotation-storage .quick-preview-toolbutton:disabled {
        cursor: default;
        opacity: 0.32;
    }

    .quick-preview-measure-list {
        display: grid;
        grid-auto-rows: max-content;
        align-content: start;
        align-items: start;
        gap: 5px;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 7px;
    }

    .quick-preview-saved-views {
        flex: 0 0 auto;
        border-bottom: 1px solid rgba(90, 214, 255, 0.18);
    }

    .quick-preview-panel-section {
        flex: 0 0 auto;
        border-bottom: 1px solid rgba(90, 214, 255, 0.16);
    }

    .quick-preview-panel-section > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 28px;
        padding: 6px 7px;
        color: rgba(246, 251, 253, 0.74);
        cursor: pointer;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        list-style: none;
    }

    .quick-preview-panel-section > summary::-webkit-details-marker {
        display: none;
    }

    .quick-preview-panel-section > summary::after {
        content: "";
        width: 7px;
        height: 7px;
        border-right: 2px solid #eeff41;
        border-bottom: 2px solid #eeff41;
        color: #eeff41;
        transform: rotate(45deg);
        transition: transform 120ms ease;
    }

    .quick-preview-panel-section[open] > summary::after {
        transform: rotate(225deg);
    }

    .quick-preview-panel-action {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 40px;
        padding: 6px 7px;
        border-bottom: 1px solid rgba(90, 214, 255, 0.16);
    }

    .quick-preview-panel-action-title {
        display: grid;
        gap: 2px;
        min-width: 0;
        color: rgba(246, 251, 253, 0.74);
        font-size: 10px;
        font-weight: 800;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .quick-preview-panel-action-title small {
        overflow: hidden;
        color: rgba(246, 251, 253, 0.5);
        font-size: 10px;
        font-weight: 700;
        text-overflow: ellipsis;
        text-transform: none;
        white-space: nowrap;
    }

    .quick-preview-panel-section .quick-preview-guided-tour,
    .quick-preview-panel-section .quick-preview-quiz,
    .quick-preview-panel-section .quick-preview-teaching-case,
    .quick-preview-panel-section .quick-preview-anatomy-layers,
    .quick-preview-panel-section .quick-preview-compare-panel {
        border-top: 0;
    }

    .quick-preview-saved-views-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 6px 7px 4px;
        color: rgba(246, 251, 253, 0.72);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .quick-preview-saved-view-editor {
        display: none;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 5px;
        padding: 0 7px 6px;
    }

    .quick-preview-saved-view-editor.is-open {
        display: grid;
    }

    .quick-preview-saved-view-editor input {
        min-width: 0;
        height: 30px;
        border: 1px solid rgba(158, 181, 193, 0.38);
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.28);
        color: #f6fbfd;
        padding: 0 8px;
    }

    .quick-preview-saved-view-list {
        display: grid;
        gap: 4px;
        max-height: 128px;
        overflow: auto;
        padding: 2px 7px 7px;
    }

    .quick-preview-saved-view-list:empty {
        display: none;
    }

    .quick-preview-guided-tour {
        display: grid;
        grid-template-columns: auto auto auto auto auto minmax(0, 1fr);
        align-items: center;
        gap: 4px;
        padding: 0 7px 6px;
    }

    .quick-preview-quiz {
        display: grid;
        grid-template-columns: auto auto auto auto auto minmax(0, 1fr);
        align-items: center;
        gap: 4px;
        padding: 0 7px 7px;
        border-top: 1px solid rgba(90, 214, 255, 0.12);
    }

    .quick-preview-quiz-body {
        grid-column: 1 / -1;
        display: none;
        gap: 4px;
        padding-top: 2px;
    }

    .quick-preview-quiz-body.is-open {
        display: grid;
        position: absolute;
        left: 50%;
        bottom: 28px;
        z-index: 125;
        width: min(820px, calc(100% - 48px));
        min-width: min(620px, calc(100% - 48px));
        max-height: min(48%, 440px);
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateX(-50%);
        gap: 10px;
        padding: 14px;
        border: 1px solid rgba(90, 214, 255, 0.42);
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(6, 16, 22, 0.92), rgba(10, 23, 31, 0.96));
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(246, 251, 253, 0.08);
        backdrop-filter: blur(10px);
        pointer-events: auto;
    }

    .quick-preview-quiz-question {
        min-width: 0;
        overflow-wrap: anywhere;
        color: #f6fbfd;
        font-size: 17px;
        font-weight: 800;
        line-height: 1.35;
        text-align: center;
    }

    .quick-preview-quiz-question::before {
        content: attr(data-quiz-meta);
        display: block;
        margin-bottom: 6px;
        color: rgba(246, 251, 253, 0.62);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .quick-preview-quiz-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .quick-preview-quiz-option {
        min-width: 0;
        min-height: 52px;
        border: 1px solid rgba(90, 214, 255, 0.62);
        border-radius: 999px;
        background: rgba(4, 12, 18, 0.88);
        color: #f6fbfd;
        padding: 9px 16px;
        text-align: center;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.25;
        cursor: pointer;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
        transition: transform 80ms ease, background 120ms ease, border-color 120ms ease;
        overflow-wrap: anywhere;
    }

    .quick-preview-quiz-option:hover:not(:disabled) {
        background: rgba(21, 46, 58, 0.92);
        transform: translateY(-1px);
    }

    .quick-preview-quiz-option:active:not(:disabled) {
        transform: scale(0.985);
    }

    .quick-preview-quiz-option.is-selected {
        border-color: rgba(0, 229, 255, 0.82);
        background: rgba(0, 188, 212, 0.18);
    }

    .quick-preview-quiz-option.is-correct {
        border-color: rgba(76, 255, 120, 0.9);
        background: rgba(32, 160, 74, 0.26);
    }

    .quick-preview-quiz-option.is-wrong {
        border-color: rgba(255, 82, 82, 0.9);
        background: rgba(190, 32, 45, 0.26);
    }

    .quick-preview-quiz-feedback,
    .quick-preview-quiz-results {
        min-width: 0;
        overflow-wrap: anywhere;
        color: rgba(246, 251, 253, 0.72);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.35;
        text-align: center;
    }

    .quick-preview-quiz-feedback.is-correct {
        color: #8cff9d;
    }

    .quick-preview-quiz-feedback.is-wrong {
        color: #ff8c8c;
    }

    .quick-preview-teaching-case {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 8px;
        padding: 0 7px 7px;
        border-top: 1px solid rgba(90, 214, 255, 0.12);
    }

    .quick-preview-panel-section .quick-preview-teaching-case:not(.is-popout) {
        padding: 0 7px 7px;
    }

    .quick-preview-panel-section .quick-preview-teaching-case:not(.is-popout) .quick-preview-teaching-editor-head {
        cursor: default;
    }

    .quick-preview-panel-section .quick-preview-teaching-case:not(.is-popout) .quick-preview-teaching-editor-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .quick-preview-panel-section .quick-preview-teaching-case:not(.is-popout) .quick-preview-teaching-card {
        padding: 8px;
    }

    .quick-preview-panel-section .quick-preview-teaching-case:not(.is-popout) .quick-preview-teaching-question-settings {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 60px repeat(2, 28px);
        align-items: end;
    }

    .quick-preview-panel-section .quick-preview-teaching-case:not(.is-popout) .quick-preview-teaching-question-settings .quick-preview-toolbutton {
        width: 28px;
        height: 28px;
    }

    .quick-preview-stage > .quick-preview-teaching-case:not(.is-popout) {
        display: none;
    }

    .quick-preview-teaching-case.is-popout {
        position: absolute;
        left: 50%;
        top: 96px;
        z-index: 110;
        width: min(780px, calc(100% - 56px));
        max-height: min(72vh, calc(100% - 132px));
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateX(-50%);
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 14px;
        border: 1px solid rgba(90, 214, 255, 0.46);
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(6, 16, 22, 0.96), rgba(12, 28, 36, 0.98));
        box-shadow: 0 24px 62px rgba(0, 0, 0, 0.66), 0 0 0 1px rgba(246, 251, 253, 0.08);
        backdrop-filter: blur(12px);
        pointer-events: auto;
    }

    .quick-preview-teaching-case.is-popout.is-dragged {
        transform: none;
    }

    .quick-preview-teaching-case.is-dragging {
        user-select: none;
        box-shadow: 0 28px 72px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(90, 214, 255, 0.22);
    }

    .quick-preview-teaching-editor-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(90, 214, 255, 0.16);
        cursor: move;
        touch-action: none;
    }

    .quick-preview-teaching-editor-title {
        display: grid;
        gap: 2px;
        min-width: 0;
    }

    .quick-preview-teaching-editor-title strong {
        color: #f6fbfd;
        font-size: 14px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .quick-preview-teaching-editor-title small,
    .quick-preview-teaching-field small {
        color: rgba(246, 251, 253, 0.58);
        font-size: 10px;
        line-height: 1.3;
    }

    .quick-preview-teaching-editor-actions {
        display: flex;
        flex: 0 0 auto;
        gap: 5px;
    }

    .quick-preview-teaching-field,
    .quick-preview-teaching-question-settings label {
        display: grid;
        gap: 4px;
        min-width: 0;
    }

    .quick-preview-teaching-field > span,
    .quick-preview-teaching-question-settings label > span,
    .quick-preview-teaching-card-title {
        color: rgba(246, 251, 253, 0.68);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.08em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .quick-preview-teaching-editor-grid {
        display: grid;
        grid-template-columns: minmax(420px, 1.35fr) minmax(240px, 0.65fr);
        gap: 10px;
        min-height: 0;
    }

    .quick-preview-teaching-card {
        display: grid;
        align-content: start;
        gap: 9px;
        min-width: 0;
        min-height: 0;
        padding: 10px;
        border: 1px solid rgba(158, 181, 193, 0.24);
        border-radius: 8px;
        background: rgba(1, 10, 14, 0.48);
        box-shadow: inset 0 1px 0 rgba(246, 251, 253, 0.04);
    }

    .quick-preview-teaching-card.is-list {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .quick-preview-teaching-list-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        min-width: 0;
    }

    .quick-preview-teaching-target-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) repeat(3, auto);
        align-items: center;
        gap: 6px;
        min-width: 0;
        padding: 7px;
        border: 1px solid rgba(90, 214, 255, 0.2);
        border-radius: 6px;
        background: rgba(90, 214, 255, 0.06);
    }

    .quick-preview-teaching-target-main {
        display: grid;
        gap: 2px;
        min-width: 0;
    }

    .quick-preview-teaching-target-main strong {
        color: rgba(246, 251, 253, 0.68);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .quick-preview-teaching-target-main small {
        min-width: 0;
        overflow: hidden;
        color: #f6fbfd;
        font-size: 11px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-preview-teaching-target-picker {
        display: grid;
        gap: 6px;
        max-height: 150px;
        overflow: auto;
        padding: 6px;
        border: 1px solid rgba(158, 181, 193, 0.18);
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.18);
    }

    .quick-preview-teaching-target-picker:empty {
        display: none;
    }

    .quick-preview-teaching-target-group {
        display: grid;
        gap: 4px;
    }

    .quick-preview-teaching-target-group > strong {
        color: rgba(246, 251, 253, 0.58);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .quick-preview-teaching-target-option {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 5px;
        min-width: 0;
        padding: 5px;
        border: 1px solid rgba(90, 214, 255, 0.18);
        border-radius: 5px;
        background: rgba(2, 18, 24, 0.56);
    }

    .quick-preview-teaching-target-option.is-active {
        border-color: rgba(206, 255, 0, 0.72);
        background: rgba(206, 255, 0, 0.08);
    }

    .quick-preview-teaching-target-option-main {
        display: grid;
        min-width: 0;
        border: 0;
        background: transparent;
        color: #f6fbfd;
        padding: 0;
        text-align: left;
        cursor: pointer;
    }

    .quick-preview-teaching-target-option-main strong,
    .quick-preview-teaching-target-option-main small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-preview-teaching-target-option-main strong {
        font-size: 11px;
        font-weight: 900;
    }

    .quick-preview-teaching-target-option-main small {
        color: rgba(246, 251, 253, 0.58);
        font-size: 10px;
        font-weight: 700;
    }

    .quick-preview-teaching-case input,
    .quick-preview-teaching-case textarea,
    .quick-preview-teaching-case select {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
        border: 1px solid rgba(158, 181, 193, 0.38);
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.28);
        color: #f6fbfd;
        padding: 5px 7px;
        font-size: 11px;
    }

    .quick-preview-teaching-case textarea {
        resize: vertical;
    }

    .quick-preview-teaching-case select,
    .quick-preview-teaching-case input[type="number"] {
        height: 30px;
    }

    .quick-preview-teaching-question-settings {
        display: grid;
        grid-template-columns: minmax(130px, 1fr) minmax(104px, 0.85fr) 72px repeat(5, 30px);
        align-items: end;
        gap: 6px;
    }

    .quick-preview-teaching-question-settings .quick-preview-toolbutton {
        width: 30px;
        height: 30px;
    }

    .quick-preview-quiz-results button {
        margin-left: 6px;
        vertical-align: middle;
    }

    .quick-preview-stage > .quick-preview-quiz-results {
        position: absolute;
        top: 58px;
        right: 14px;
        z-index: 126;
        display: none;
        width: min(430px, calc(100% - 28px));
        max-height: min(66%, 560px);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 12px;
        border: 1px solid rgba(90, 214, 255, 0.42);
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(6, 16, 22, 0.9), rgba(10, 23, 31, 0.96));
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(246, 251, 253, 0.07);
        backdrop-filter: blur(10px);
        text-align: left;
        pointer-events: auto;
    }

    .quick-preview-stage > .quick-preview-quiz-results.is-open {
        display: block;
    }

    .quick-preview-quiz-result-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .quick-preview-quiz-result-summary {
        display: grid;
        gap: 2px;
        min-width: 0;
    }

    .quick-preview-quiz-result-summary strong {
        color: #f6fbfd;
        font-size: 14px;
        font-weight: 900;
        line-height: 1.35;
    }

    .quick-preview-quiz-result-summary small {
        color: rgba(246, 251, 253, 0.68);
        font-size: 11px;
        font-weight: 800;
        line-height: 1.35;
    }

    .quick-preview-quiz-result-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }

    .quick-preview-quiz-result-actions .quick-preview-toolbutton,
    .quick-preview-quiz-results .quick-preview-toolbutton {
        margin-left: 0;
    }

    .quick-preview-quiz-result-list {
        display: grid;
        gap: 5px;
        margin-top: 8px;
        max-height: min(420px, 46vh);
        overflow: auto;
    }

    .quick-preview-quiz-result-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
        gap: 7px;
        min-width: 0;
        border: 1px solid rgba(158, 181, 193, 0.22);
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.22);
        color: rgba(246, 251, 253, 0.82);
        padding: 7px 8px;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.3;
        cursor: pointer;
        overflow-wrap: anywhere;
    }

    .quick-preview-quiz-result-row:hover {
        background: rgba(20, 45, 55, 0.58);
    }

    .quick-preview-quiz-result-row.is-correct {
        border-color: rgba(76, 255, 120, 0.42);
    }

    .quick-preview-quiz-result-row.is-wrong {
        border-color: rgba(255, 82, 82, 0.46);
    }

    .quick-preview-quiz-result-row.is-active {
        box-shadow: 0 0 0 1px rgba(90, 214, 255, 0.55);
        background: rgba(18, 54, 68, 0.7);
    }

    .quick-preview-quiz-result-index {
        color: rgba(246, 251, 253, 0.6);
        font-weight: 900;
    }

    .quick-preview-quiz-result-main {
        display: grid;
        gap: 2px;
        min-width: 0;
    }

    .quick-preview-quiz-result-main strong {
        color: #f6fbfd;
        font-size: 11px;
        font-weight: 900;
        line-height: 1.25;
    }

    .quick-preview-quiz-result-main small {
        color: rgba(246, 251, 253, 0.62);
        font-size: 10px;
        font-weight: 700;
        line-height: 1.25;
    }

    .quick-preview-quiz-result-badge {
        align-self: center;
        border-radius: 999px;
        padding: 2px 6px;
        font-size: 9px;
        font-weight: 900;
        text-transform: uppercase;
        color: #061016;
        background: rgba(158, 181, 193, 0.84);
    }

    .quick-preview-quiz-result-row.is-correct .quick-preview-quiz-result-badge {
        background: rgba(76, 255, 120, 0.92);
    }

    .quick-preview-quiz-result-row.is-wrong .quick-preview-quiz-result-badge {
        background: rgba(255, 82, 82, 0.92);
        color: #fff;
    }

    .quick-preview-teaching-case textarea {
        resize: vertical;
        min-height: 76px;
        max-height: 180px;
    }

    .quick-preview-teaching-options {
        min-height: 118px;
        font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
        line-height: 1.35;
    }

    .quick-preview-teaching-validation {
        display: none;
        min-width: 0;
        border: 1px solid rgba(255, 214, 102, 0.38);
        border-radius: 6px;
        background: rgba(46, 34, 6, 0.48);
        color: rgba(255, 238, 184, 0.95);
        padding: 7px 9px;
        font-size: 11px;
        font-weight: 800;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .quick-preview-teaching-validation.is-visible {
        display: block;
    }

    .quick-preview-teaching-validation.is-error {
        border-color: rgba(255, 82, 82, 0.52);
        background: rgba(75, 18, 22, 0.5);
        color: rgba(255, 205, 205, 0.96);
    }

    .quick-preview-teaching-validation.is-ok {
        border-color: rgba(76, 255, 120, 0.38);
        background: rgba(14, 54, 28, 0.42);
        color: rgba(204, 255, 213, 0.95);
    }

    .quick-preview-teaching-question-list {
        display: grid;
        align-content: start;
        gap: 6px;
        min-height: 196px;
        max-height: none;
        overflow: auto;
        padding-right: 2px;
    }

    .quick-preview-teaching-question-list:empty {
        display: none;
    }

    .quick-preview-teaching-question {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        align-items: center;
        gap: 5px;
        border: 1px solid rgba(158, 181, 193, 0.24);
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.18);
        padding: 6px;
    }

    .quick-preview-teaching-question.is-editing {
        border-color: rgba(238, 255, 65, 0.82);
        background: rgba(238, 255, 65, 0.08);
    }

    .quick-preview-teaching-question-main {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #f6fbfd;
        font-size: 10px;
        font-weight: 700;
    }

    .quick-preview-teaching-status {
        display: block;
        min-width: 0;
        overflow-wrap: anywhere;
        color: rgba(246, 251, 253, 0.66);
        font-size: 10px;
        line-height: 1.35;
        text-align: left;
    }

    @media (max-width: 760px) {
        .quick-preview-quiz-body.is-open {
            bottom: 14px;
            max-height: 56vh;
            padding: 10px;
        }

        .quick-preview-quiz-question {
            font-size: 14px;
        }

        .quick-preview-quiz-options {
            grid-template-columns: minmax(0, 1fr);
            gap: 7px;
        }

        .quick-preview-quiz-option {
            min-height: 44px;
            padding: 7px 12px;
            font-size: 12px;
        }

        .quick-preview-teaching-case.is-popout {
            top: 12px;
            bottom: 12px;
            max-height: none;
            transform: translateX(-50%);
        }

        .quick-preview-teaching-editor-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        .quick-preview-teaching-question-settings {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }

        .quick-preview-teaching-target-row {
            grid-template-columns: minmax(0, 1fr) repeat(3, 32px);
        }

        .quick-preview-teaching-question-settings button {
            width: 32px;
        }
    }

    .quick-preview-anatomy-layers {
        display: grid;
        gap: 5px;
        padding: 0 7px 7px;
        border-top: 1px solid rgba(90, 214, 255, 0.12);
    }

    .quick-preview-anatomy-layers-head,
    .quick-preview-anatomy-explode {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 5px;
        color: rgba(246, 251, 253, 0.72);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .quick-preview-anatomy-layer-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .quick-preview-anatomy-layer {
        display: grid;
        grid-template-columns: 13px minmax(0, 1fr) auto;
        align-items: center;
        gap: 5px;
        border: 1px solid rgba(158, 181, 193, 0.22);
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.18);
        color: #f6fbfd;
        padding: 4px 5px;
        font-size: 10px;
        text-align: left;
    }

    .quick-preview-anatomy-layer:not(.is-visible) {
        opacity: 0.48;
    }

    .quick-preview-anatomy-layer:disabled,
    .quick-preview-anatomy-layer.is-disabled {
        cursor: default;
        opacity: 0.42;
    }

    .quick-preview-anatomy-layers.is-mode-limited,
    .quick-preview-compare-panel.is-mode-limited {
        opacity: 0.92;
    }

    .quick-preview-anatomy-layer-swatch {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        box-shadow: 0 0 0 1px rgba(246, 251, 253, 0.52);
    }

    .quick-preview-anatomy-layer-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 800;
    }

    .quick-preview-anatomy-layer-count {
        color: rgba(246, 251, 253, 0.62);
        font-size: 9px;
    }

    .quick-preview-anatomy-explode {
        grid-template-columns: auto minmax(0, 1fr) 34px;
        text-transform: none;
    }

    .quick-preview-anatomy-explode input {
        min-width: 0;
        width: 100%;
    }

    .quick-preview-compare-panel {
        display: grid;
        gap: 5px;
        padding: 0 7px 7px;
        border-top: 1px solid rgba(90, 214, 255, 0.12);
    }

    .quick-preview-compare-head,
    .quick-preview-compare-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) repeat(6, auto);
        align-items: center;
        gap: 4px;
    }

    .quick-preview-compare-head span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgba(246, 251, 253, 0.72);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .quick-preview-compare-preview {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 5px;
    }

    .quick-preview-compare-source-list {
        display: grid;
        gap: 4px;
        max-height: 156px;
        overflow: auto;
        padding-right: 2px;
    }

    .quick-preview-compare-source {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) repeat(2, 24px);
        align-items: center;
        gap: 5px;
        min-width: 0;
        padding: 4px;
        border: 1px solid rgba(158, 181, 193, 0.18);
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.16);
    }

    .quick-preview-compare-source.is-current {
        border-color: rgba(238, 255, 65, 0.42);
        background: rgba(238, 255, 65, 0.06);
    }

    .quick-preview-compare-source-thumb {
        width: 38px;
        height: 28px;
        border-radius: 3px;
        object-fit: cover;
        background: #000;
    }

    .quick-preview-compare-source-text {
        min-width: 0;
        overflow: hidden;
        color: rgba(246, 251, 253, 0.78);
        font-size: 9px;
        font-weight: 800;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-preview-compare-source-meta {
        display: block;
        color: rgba(246, 251, 253, 0.48);
        font-size: 8px;
        font-weight: 700;
    }

    .quick-preview-compare-source button {
        width: 24px;
        height: 24px;
    }

    .quick-preview-compare-card.is-wide {
        grid-column: 1 / 3;
    }

    .quick-preview-compare-card.is-difference img {
        aspect-ratio: 16 / 8;
    }

    .quick-preview-compare-card {
        position: relative;
        min-width: 0;
        border: 1px solid rgba(158, 181, 193, 0.24);
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }

    .quick-preview-compare-card.is-empty::before {
        content: attr(data-placeholder);
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 22px;
        z-index: 1;
        display: grid;
        place-items: center;
        padding: 10px;
        background:
            linear-gradient(135deg, rgba(90, 214, 255, 0.12) 25%, transparent 25%) 0 0 / 18px 18px,
            linear-gradient(135deg, transparent 75%, rgba(238, 255, 65, 0.1) 75%) 0 0 / 18px 18px,
            radial-gradient(circle at 50% 50%, rgba(90, 214, 255, 0.16), rgba(0, 0, 0, 0.18) 56%, rgba(0, 0, 0, 0.58));
        color: rgba(246, 251, 253, 0.72);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0;
        text-align: center;
        text-transform: uppercase;
    }

    .quick-preview-compare-card.is-empty img {
        opacity: 0;
    }

    .quick-preview-compare-card.is-slot-a {
        border-color: rgba(238, 255, 65, 0.54);
        box-shadow: inset 0 0 0 1px rgba(238, 255, 65, 0.12);
    }

    .quick-preview-compare-card.is-slot-b {
        border-color: rgba(90, 214, 255, 0.54);
        box-shadow: inset 0 0 0 1px rgba(90, 214, 255, 0.12);
    }

    .quick-preview-compare-card img {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: contain;
        background: #000;
    }

    .quick-preview-slide-viewer {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: none;
        background: #000;
        touch-action: none;
    }

    .quick-preview-slide-viewer.DicomMicroscopyViewer .ol-overviewmap {
        position: absolute !important;
        display: inline-block !important;
        left: 10px !important;
        right: auto !important;
        top: auto !important;
        bottom: 46px !important;
        z-index: 12 !important;
        border: 2px solid rgba(0, 229, 255, 0.72);
        background: rgba(0, 0, 0, 0.72) !important;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 229, 255, 0.42);
        pointer-events: auto !important;
    }

    .quick-preview-slide-viewer.DicomMicroscopyViewer .ol-overviewmap-box {
        border: 2px solid #eeff41 !important;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95);
    }

    .quick-preview-slide-viewer.is-loading::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 20;
        width: 34px;
        height: 34px;
        margin: -34px 0 0 -17px;
        border: 3px solid rgba(246, 251, 253, 0.32);
        border-top-color: #00e5ff;
        border-radius: 50%;
        pointer-events: none;
        animation: quick-preview-spin .8s linear infinite;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
    }

    .quick-preview-slide-viewer.is-loading::after {
        content: "Tiles laden ...";
        position: absolute;
        left: 50%;
        top: calc(50% + 12px);
        z-index: 20;
        transform: translateX(-50%);
        padding: 5px 10px;
        border: 1px solid rgba(0, 229, 255, 0.52);
        border-radius: 4px;
        background: rgba(5, 12, 16, 0.82);
        color: #f6fbfd;
        font-size: 11px;
        font-weight: 800;
        pointer-events: none;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
    }

    .quick-preview-slide-viewer .navigator {
        border: 2px solid rgba(0, 229, 255, 0.72) !important;
        background: rgba(0, 0, 0, 0.72) !important;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 229, 255, 0.42);
        z-index: 12 !important;
        pointer-events: auto !important;
    }

    .quick-preview-slide-viewer .navigator .displayregion {
        border: 2px solid #eeff41 !important;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95), 0 0 14px rgba(238, 255, 65, 0.95) !important;
    }

    .quick-preview-compare-card span {
        display: block;
        padding: 4px 5px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgba(246, 251, 253, 0.72);
        font-size: 9px;
        font-weight: 700;
    }

    .quick-preview-before-after-view {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 10;
        background: #000;
        overflow: hidden;
    }

    .quick-preview-before-after-view img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform-origin: center center;
    }

    .quick-preview-before-after-current {
        clip-path: inset(0 50% 0 0);
    }

    .quick-preview-before-after-view.is-blend .quick-preview-before-after-current {
        clip-path: none;
        opacity: .5;
    }

    .quick-preview-before-after-view.is-blend .quick-preview-before-after-divider {
        display: none;
    }

    .quick-preview-compare-stage {
        position: absolute;
        inset: 0;
        z-index: 12;
        display: none;
        overflow: hidden;
        background: #000;
        pointer-events: none;
    }

    .quick-preview-compare-stage.is-visible {
        display: block;
        cursor: move;
        pointer-events: auto;
    }

    .quick-preview-compare-stage img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #000;
        pointer-events: none;
        user-select: none;
        -webkit-user-drag: none;
        transform-origin: center center;
    }

    .quick-preview-compare-stage-current {
        clip-path: inset(0 50% 0 0);
    }

    .quick-preview-compare-stage.is-blend .quick-preview-compare-stage-current {
        clip-path: none;
        opacity: .5;
    }

    .quick-preview-compare-stage-divider {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        background: #eeff41;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.78), 0 0 18px rgba(238, 255, 65, 0.72);
        pointer-events: none;
    }

    .quick-preview-compare-stage.is-blend .quick-preview-compare-stage-divider {
        display: none;
    }

    .quick-preview-compare-stage-label {
        position: absolute;
        left: 50%;
        top: 18px;
        z-index: 2;
        transform: translateX(-50%);
        max-width: min(760px, calc(100% - 40px));
        padding: 4px 10px;
        border: 1px solid rgba(238, 255, 65, 0.62);
        border-radius: 4px;
        background: rgba(4, 12, 16, 0.82);
        color: #eeff41;
        font-size: 11px;
        font-weight: 900;
        line-height: 1.15;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.96);
        pointer-events: none;
    }

    .quick-preview-compare-stage-control {
        position: absolute;
        left: 50%;
        bottom: 78px;
        z-index: 3;
        display: grid;
        grid-template-columns: auto minmax(180px, 360px) 42px auto;
        align-items: center;
        gap: 8px;
        transform: translateX(-50%);
        min-width: min(520px, calc(100% - 40px));
        padding: 7px 10px;
        border: 1px solid rgba(90, 214, 255, 0.54);
        border-radius: 5px;
        background: rgba(4, 12, 16, 0.82);
        color: #f6fbfd;
        font-size: 11px;
        font-weight: 900;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.44), 0 0 20px rgba(90, 214, 255, 0.16);
        pointer-events: auto;
    }

    .quick-preview-compare-stage-control input {
        min-width: 0;
        width: 100%;
    }

    .quick-preview-compare-stage-control button {
        width: 28px;
        height: 28px;
    }

    .quick-preview-compare-stage-percent {
        color: #eeff41;
        text-align: right;
    }

    .quick-preview-compare-align {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
        gap: 4px;
        align-items: center;
    }

    .quick-preview-compare-align label {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        align-items: center;
        gap: 4px;
        color: rgba(246, 251, 253, 0.66);
        font-size: 9px;
        font-weight: 900;
    }

    .quick-preview-compare-align input {
        min-width: 0;
        width: 100%;
    }

    .quick-preview-compare-align-reset {
        grid-row: 1 / 3;
        grid-column: 3;
    }

    .quick-preview-before-after-divider {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: rgba(238, 255, 65, 0.92);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65);
    }

    .quick-preview-before-after-control {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 36px;
        align-items: center;
        gap: 5px;
        color: rgba(246, 251, 253, 0.72);
        font-size: 10px;
        font-weight: 800;
    }

    .quick-preview-before-after-control input {
        min-width: 0;
        width: 100%;
    }

    .quick-preview-before-after-control span {
        display: inline;
        padding: 0;
        color: rgba(246, 251, 253, 0.72);
        font-size: 10px;
        font-weight: 800;
    }

    .quick-preview-compare-registration {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .quick-preview-compare-registration label {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 3px;
        color: rgba(246, 251, 253, 0.72);
        font-size: 9px;
        font-weight: 800;
    }

    .quick-preview-compare-registration input {
        min-width: 0;
        width: 100%;
        border: 1px solid rgba(158, 181, 193, 0.32);
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.28);
        color: #f6fbfd;
        padding: 3px 4px;
        font-size: 10px;
    }

    .quick-preview-compare-status {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgba(246, 251, 253, 0.66);
        font-size: 10px;
        text-align: right;
    }

    .quick-preview-collab-body {
        display: grid;
        gap: 6px;
    }

    .quick-preview-collab-session {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 5px;
        min-width: 0;
        padding: 5px 6px;
        border: 1px solid rgba(90, 214, 255, 0.22);
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.18);
    }

    .quick-preview-collab-session span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgba(246, 251, 253, 0.76);
        font-size: 10px;
        font-weight: 800;
    }

    .quick-preview-collab-list,
    .quick-preview-collab-chat-log {
        display: grid;
        gap: 4px;
        min-height: 34px;
        max-height: 120px;
        overflow: auto;
        padding: 4px;
        border: 1px solid rgba(158, 181, 193, 0.18);
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.16);
    }

    .quick-preview-collab-request-list {
        display: grid;
        gap: 5px;
        max-height: 108px;
        overflow: auto;
    }

    .quick-preview-collab-registry {
        display: grid;
        gap: 5px;
        padding: 5px;
        border: 1px solid rgba(90, 214, 255, 0.18);
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.14);
    }

    .quick-preview-collab-registry-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 5px;
        color: rgba(246, 251, 253, 0.78);
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .quick-preview-collab-session-list {
        display: grid;
        gap: 5px;
        max-height: 142px;
        overflow: auto;
    }

    .quick-preview-collab-session-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px;
        padding: 6px;
        border: 1px solid rgba(158, 181, 193, 0.20);
        border-radius: 5px;
        background: rgba(4, 18, 24, 0.62);
        color: rgba(246, 251, 253, 0.80);
        font-size: 9px;
        font-weight: 800;
    }

    .quick-preview-collab-session-main {
        display: grid;
        gap: 2px;
        min-width: 0;
    }

    .quick-preview-collab-session-title,
    .quick-preview-collab-session-meta {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-preview-collab-session-title {
        color: #f6fbfd;
        font-size: 10px;
    }

    .quick-preview-collab-session-meta {
        color: rgba(246, 251, 253, 0.58);
    }

    .quick-preview-collab-registry-status {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgba(246, 251, 253, 0.56);
        font-size: 9px;
        font-weight: 800;
    }

    .collab-global-registry {
        position: absolute;
        top: 42px;
        left: 248px;
        z-index: 80;
        display: none;
        width: min(460px, calc(100vw - 560px));
        min-width: 340px;
        max-height: min(580px, calc(100vh - 92px));
        padding: 8px;
        border: 1px solid rgba(90, 214, 255, 0.28);
        border-radius: 8px;
        background: rgba(8, 22, 30, 0.96);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255,255,255,0.04);
        color: rgba(246, 251, 253, 0.88);
    }

    .collab-global-registry.is-open {
        display: grid;
        gap: 7px;
    }

    .collab-global-registry-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 6px;
        padding-bottom: 5px;
        border-bottom: 1px solid rgba(90, 214, 255, 0.18);
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .collab-global-registry-body {
        display: grid;
        gap: 6px;
        max-height: min(482px, calc(100vh - 178px));
        overflow: auto;
    }

    @media only screen and (max-width: 900px) {
        .collab-global-registry {
            left: 8px;
            right: 8px;
            width: auto;
            min-width: 0;
        }
    }

    .quick-preview-collab-request {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 5px;
        padding: 5px 6px;
        border: 1px solid rgba(238, 255, 65, 0.46);
        border-radius: 6px;
        background: rgba(238, 255, 65, 0.08);
        color: #f6fbfd;
        font-size: 10px;
        font-weight: 800;
    }

    .quick-preview-collab-request button {
        min-width: 26px;
        min-height: 24px;
        padding: 0;
    }

    .quick-preview-collab-person,
    .quick-preview-collab-message {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 5px;
        min-width: 0;
        color: rgba(246, 251, 253, 0.78);
        font-size: 9px;
        font-weight: 800;
    }

    .quick-preview-collab-dot {
        width: 9px;
        height: 9px;
        border-radius: 999px;
        background: var(--collab-color, #5ad6ff);
        box-shadow: 0 0 8px var(--collab-color, rgba(90, 214, 255, 0.5));
    }

    .quick-preview-collab-person.is-host .quick-preview-collab-dot {
        background: var(--collab-color, #eeff41);
        box-shadow: 0 0 8px var(--collab-color, rgba(238, 255, 65, 0.55));
    }

    .quick-preview-collab-join-overlay {
        position: fixed;
        inset: 0;
        z-index: 2600;
        display: none;
        place-items: center;
        padding: 24px;
        background: rgba(0, 0, 0, 0.72);
        color: #f6fbfd;
    }

    .quick-preview-collab-join-overlay.is-open {
        display: grid;
    }

    .quick-preview-collab-join-card {
        width: min(520px, calc(100vw - 32px));
        padding: 18px;
        border: 1px solid rgba(238, 255, 65, 0.62);
        border-radius: 8px;
        background: rgba(7, 22, 29, 0.98);
        box-shadow: 0 26px 70px rgba(0, 0, 0, 0.62), inset 0 0 0 1px rgba(255,255,255,0.04);
    }

    .quick-preview-collab-join-card strong {
        display: block;
        margin-bottom: 8px;
        color: #eeff41;
        font-size: 17px;
    }

    .quick-preview-collab-join-card span {
        display: block;
        margin-bottom: 14px;
        color: rgba(246, 251, 253, 0.84);
        font-size: 13px;
        font-weight: 800;
    }

    .quick-preview-collab-join-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .quick-preview-collab-context-overlay {
        position: fixed;
        inset: 0;
        z-index: 2700;
        display: none;
        place-items: center;
        padding: 24px;
        background: rgba(0, 0, 0, 0.78);
        color: #f6fbfd;
    }

    .quick-preview-collab-context-overlay.is-open {
        display: grid;
    }

    .quick-preview-collab-context-card {
        display: grid;
        gap: 14px;
        width: min(560px, calc(100vw - 32px));
        padding: 20px;
        border: 1px solid rgba(90, 214, 255, 0.58);
        border-radius: 8px;
        background: #07151c;
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.68), inset 0 0 0 1px rgba(255, 255, 255, 0.045);
    }

    .quick-preview-collab-context-title {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #5ad6ff;
        font-size: 18px;
        font-weight: 900;
    }

    .quick-preview-collab-context-title .material-icons {
        font-size: 22px;
    }

    .quick-preview-collab-context-text {
        margin: 0;
        color: rgba(246, 251, 253, 0.84);
        font-size: 13px;
        font-weight: 800;
        line-height: 1.45;
    }

    .quick-preview-collab-context-list {
        display: grid;
        gap: 7px;
        padding: 10px;
        border: 1px solid rgba(158, 181, 193, 0.22);
        border-radius: 7px;
        background: rgba(0, 0, 0, 0.24);
    }

    .quick-preview-collab-context-row {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 10px;
        min-width: 0;
        font-size: 12px;
        font-weight: 800;
    }

    .quick-preview-collab-context-row span:first-child {
        color: rgba(158, 181, 193, 0.88);
        text-transform: uppercase;
        font-size: 10px;
        letter-spacing: 0;
    }

    .quick-preview-collab-context-row span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-preview-collab-context-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .quick-preview-collab-context-actions button {
        min-height: 32px;
        border: 1px solid rgba(158, 181, 193, 0.35);
        border-radius: 6px;
        background: #0b2530;
        color: #f6fbfd;
        padding: 0 12px;
        font-size: 11px;
        font-weight: 900;
        cursor: pointer;
    }

    .quick-preview-collab-context-actions button[data-action="accept"] {
        border-color: rgba(238, 255, 65, 0.72);
        background: #182515;
        color: #eeff41;
    }

    .quick-preview-collab-message.is-system {
        color: rgba(238, 255, 65, 0.72);
    }

    .quick-preview-collab-message-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-preview-collab-chat-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px;
    }

    .quick-preview-collab-chat-row input {
        min-width: 0;
        width: 100%;
        border: 1px solid rgba(158, 181, 193, 0.32);
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.28);
        color: #f6fbfd;
        padding: 5px 6px;
        font-size: 10px;
    }

    .quick-preview-collab-chat-log {
        display: none;
    }

    .quick-preview-collab-body > .quick-preview-collab-chat-row {
        display: none;
    }

    @media only screen and (max-width: 900px) {
        .quick-preview-collab-message-overlay {
            right: 12px;
            width: min(340px, calc(100vw - 24px));
        }

        .quick-preview-collab-end-floating {
            top: 70px;
            right: 10px;
        }
    }

    .quick-preview-vet-atlas-protocol {
        display: none;
        gap: 3px;
        padding: 5px 6px;
        border: 1px solid rgba(158, 181, 193, 0.18);
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.18);
    }

    .quick-preview-vet-atlas-protocol.is-visible {
        display: grid;
    }

    .quick-preview-vet-atlas-protocol-title {
        color: #eeff41;
        font-size: 9px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .quick-preview-vet-atlas-protocol-item {
        display: grid;
        grid-template-columns: 12px minmax(0, 1fr) auto;
        gap: 4px;
        align-items: start;
        width: 100%;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: rgba(246, 251, 253, 0.72);
        font-size: 9px;
        line-height: 1.25;
        text-align: left;
        cursor: pointer;
    }

    .quick-preview-vet-atlas-protocol-item::before {
        content: "";
        width: 5px;
        height: 5px;
        margin-top: 4px;
        border-radius: 50%;
        background: rgba(90, 214, 255, 0.88);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.72);
    }

    .quick-preview-vet-atlas-protocol-item:hover,
    .quick-preview-vet-atlas-protocol-item.is-active {
        background: rgba(90, 214, 255, 0.1);
        color: #f6fbfd;
    }

    .quick-preview-vet-atlas-protocol-item.is-done::before {
        background: #8df500;
    }

    .quick-preview-vet-atlas-protocol-count {
        color: rgba(238, 255, 65, 0.86);
        font-size: 9px;
        font-weight: 900;
    }

    .quick-preview-guided-tour-status,
    .quick-preview-quiz-status {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgba(246, 251, 253, 0.66);
        font-size: 10px;
        text-align: right;
    }

    .quick-preview-saved-view-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) repeat(4, 30px);
        align-items: center;
        gap: 4px;
        min-height: 34px;
        border: 1px solid rgba(158, 181, 193, 0.24);
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.18);
    }

    .quick-preview-saved-view-item.is-tour-active {
        border-color: rgba(238, 255, 65, 0.82);
        background: rgba(238, 255, 65, 0.08);
    }

    .quick-preview-saved-view-item.is-current {
        grid-template-columns: minmax(0, 1fr) auto;
        border-color: rgba(0, 188, 212, 0.72);
        background: rgba(0, 188, 212, 0.10);
    }

    .quick-preview-saved-view-badge {
        max-width: 92px;
        margin-right: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #d9ff00;
        font-size: 9px;
        font-weight: 800;
    }

    .quick-preview-saved-view-main {
        min-width: 0;
        border: 0;
        background: transparent;
        color: #f6fbfd;
        padding: 5px 7px;
        text-align: left;
        cursor: pointer;
    }

    .quick-preview-saved-view-main strong,
    .quick-preview-saved-view-main small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-preview-saved-view-main strong {
        font-size: 11px;
    }

    .quick-preview-saved-view-main small {
        margin-top: 2px;
        color: rgba(246, 251, 253, 0.58);
        font-size: 9px;
    }

    .quick-preview-measure-item {
        display: grid;
        grid-template-columns: repeat(4, 28px) minmax(0, 1fr);
        align-items: start;
        align-self: start;
        gap: 5px;
        width: 100%;
        box-sizing: border-box;
        min-height: 38px;
        padding: 6px;
        border: 1px solid rgba(158, 181, 193, 0.28);
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.22);
        color: #f6fbfd;
    }

    .quick-preview-measure-item.is-segment,
    .quick-preview-measure-item.is-distance,
    .quick-preview-measure-item[class*="is-label-category-"] {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 4px;
        min-height: 0;
    }

    .quick-preview-measure-item.is-measure,
    .quick-preview-measure-item.is-mpr-measure {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        grid-auto-columns: 28px;
        align-items: center;
        min-height: 30px;
        padding: 5px 6px;
    }

    .quick-preview-measure-item.is-selected {
        border-color: #5ad6ff;
        background: rgba(90, 214, 255, 0.14);
    }

    .quick-preview-measure-item.is-hidden {
        opacity: 0.62;
    }

    .quick-preview-measure-item.is-hidden .quick-preview-measure-item-title {
        color: rgba(246, 251, 253, 0.62);
    }

    .quick-preview-measure-item-main {
        grid-column: 1 / -1;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        text-align: left;
        cursor: pointer;
    }

    .quick-preview-measure-item.is-measure .quick-preview-measure-item-main,
    .quick-preview-measure-item.is-mpr-measure .quick-preview-measure-item-main {
        grid-column: 1;
        grid-row: 1;
    }

    .quick-preview-measure-item.is-segment .quick-preview-measure-item-main,
    .quick-preview-measure-item.is-distance .quick-preview-measure-item-main,
    .quick-preview-measure-item[class*="is-label-category-"] .quick-preview-measure-item-main {
        flex: 1 1 100%;
        width: 100%;
        grid-column: auto;
    }

    .quick-preview-measure-item-title {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        white-space: normal;
        line-height: 1.15;
        font-size: 12px;
        font-weight: 700;
    }

    .quick-preview-measure-item-sub {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-height: 1.15;
        color: rgba(246, 251, 253, 0.58);
        font-size: 10px;
        font-weight: 600;
    }

    .quick-preview-measure-item.is-measure .quick-preview-measure-item-sub,
    .quick-preview-measure-item.is-mpr-measure .quick-preview-measure-item-sub {
        -webkit-line-clamp: 1;
    }

    .quick-preview-measure-origin {
        display: block;
        white-space: normal;
        overflow-wrap: anywhere;
        color: #bdd4df;
        font-size: 11px;
        line-height: 1.3;
        margin-top: 3px;
    }

    .quick-preview-measure-item-delete {
        width: 28px;
        min-width: 28px;
        height: 28px;
        margin-right: 0;
    }

    .quick-preview-measure-item.is-measure .quick-preview-measure-item-delete,
    .quick-preview-measure-item.is-mpr-measure .quick-preview-measure-item-delete {
        grid-column: auto;
        grid-row: 1;
        align-self: center;
    }

    .quick-preview-measure-item.is-segment .quick-preview-measure-item-delete,
    .quick-preview-measure-item.is-distance .quick-preview-measure-item-delete,
    .quick-preview-measure-item[class*="is-label-category-"] .quick-preview-measure-item-delete {
        flex: 0 0 28px;
    }

    .quick-preview-3d-canvas {
        position: absolute;
        inset: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        background: #000;
        cursor: grab;
        touch-action: none;
        pointer-events: auto;
    }

    .quick-preview-3d-canvas.is-rotating {
        cursor: grabbing;
    }

    .quick-preview-3d-canvas.is-panning {
        cursor: move;
    }

    .quick-preview-3d-canvas.is-zooming {
        cursor: ns-resize;
    }

    .quick-preview-mpr-grid {
        position: absolute;
        inset: 0;
        z-index: 4;
        display: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);
        gap: 8px;
        padding: 12px;
        background: #000;
    }

    .quick-preview-overlay.is-mixed .quick-preview-3d-canvas {
        right: var(--quick-preview-mixed-mpr-width, min(330px, 24vw));
        /* Keep layout independent of the adaptive canvas backing resolution. */
        width: max(1px, calc(100% - var(--quick-preview-mixed-mpr-width, min(330px, 24vw))));
    }

    .quick-preview-overlay.is-mixed .quick-preview-3d-cube {
        right: calc(var(--quick-preview-mixed-mpr-width, min(330px, 24vw)) + 14px);
    }

    .quick-preview-overlay.is-mixed .quick-preview-mpr-grid {
        left: auto;
        right: 0;
        width: var(--quick-preview-mixed-mpr-width, min(330px, 24vw));
        bottom: 28px;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, minmax(0, 1fr));
        background: rgba(0, 0, 0, 0.92);
    }

    .quick-preview-mpr-grid.is-oblique-enabled {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .quick-preview-overlay.is-mixed .quick-preview-mpr-grid.is-oblique-enabled {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(0, 1fr));
    }

    .quick-preview-overlay.is-mixed.is-mixed-grid .quick-preview-3d-canvas {
        top: 120px;
        left: 24px;
        right: auto;
        bottom: auto;
        width: max(1px, calc(var(--quick-preview-mixed-split-x, 50%) - 16px));
        height: max(1px, calc(var(--quick-preview-mixed-split-y, 50%) - 112px));
        z-index: 4;
        border: 1px solid rgba(95, 168, 190, 0.45);
        border-radius: 4px;
        box-sizing: border-box;
    }

    .quick-preview-overlay.is-mixed.is-mixed-grid .quick-preview-measure-layer {
        z-index: 7;
    }

    .quick-preview-overlay.is-mixed.is-mixed-grid .quick-preview-mpr-grid,
    .quick-preview-overlay.is-mixed.is-mixed-grid .quick-preview-mpr-grid.is-oblique-enabled {
        left: 12px;
        right: 12px;
        top: 108px;
        bottom: 42px;
        width: auto;
        grid-template-columns: minmax(180px, calc(var(--quick-preview-mixed-split-x, 50%) - 16px)) minmax(180px, 1fr);
        grid-template-rows: minmax(140px, calc(var(--quick-preview-mixed-split-y, 50%) - 112px)) minmax(140px, 1fr);
        background: transparent;
        pointer-events: none;
        z-index: 6;
    }

    .quick-preview-overlay.is-mixed.is-mixed-grid .quick-preview-mpr-cell {
        pointer-events: auto;
    }

    .quick-preview-overlay.is-mixed.is-mixed-grid .quick-preview-mpr-cell:nth-child(1) {
        grid-column: 2;
        grid-row: 1;
    }

    .quick-preview-overlay.is-mixed.is-mixed-grid .quick-preview-mpr-cell:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .quick-preview-overlay.is-mixed.is-mixed-grid .quick-preview-mpr-cell:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    .quick-preview-overlay.is-mixed.is-mixed-grid .quick-preview-mpr-cell.is-oblique {
        display: none !important;
    }

    .quick-preview-overlay.is-mixed.is-mixed-grid .quick-preview-3d-cube {
        right: calc(100% - var(--quick-preview-mixed-split-x, 50%) + 20px);
        bottom: calc(100% - var(--quick-preview-mixed-split-y, 50%) + 20px);
    }

    .quick-preview-mixed-splitter {
        position: absolute;
        left: 12px;
        right: 12px;
        top: 108px;
        bottom: 42px;
        z-index: 8;
        display: none;
        pointer-events: none;
    }

    .quick-preview-overlay.is-mixed.is-mixed-grid .quick-preview-mixed-splitter {
        display: block;
    }

    .quick-preview-mixed-splitter::before,
    .quick-preview-mixed-splitter::after {
        content: none;
        position: absolute;
        background: rgba(95, 168, 190, 0.55);
        box-shadow: 0 0 10px rgba(48, 202, 242, 0.22);
    }

    .quick-preview-mixed-splitter::before {
        top: 0;
        bottom: 0;
        left: calc(var(--quick-preview-mixed-split-x, 50%) - 12px);
        width: 1px;
    }

    .quick-preview-mixed-splitter::after {
        left: 0;
        right: 0;
        top: calc(var(--quick-preview-mixed-split-y, 50%) - 108px);
        height: 1px;
    }

    .quick-preview-mixed-splitter-handle {
        position: absolute;
        left: calc(var(--quick-preview-mixed-split-x, 50%) - 14px);
        top: calc(var(--quick-preview-mixed-split-y, 50%) - 110px);
        width: 28px;
        height: 28px;
        border: 1px solid rgba(125, 227, 255, 0.85);
        border-radius: 4px;
        background: rgba(5, 20, 27, 0.9);
        color: #d8f9ff;
        display: grid;
        place-items: center;
        cursor: move;
        pointer-events: auto;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
        touch-action: none;
    }

    .quick-preview-mixed-splitter-handle .material-icons {
        font-size: 18px;
        line-height: 1;
    }

    .quick-preview-mpr-cell {
        position: relative;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        border: 1px solid rgba(95, 168, 190, 0.45);
        border-radius: 4px;
        background: #000;
    }

    .quick-preview-mpr-cell.is-panning .quick-preview-mpr-canvas,
    .quick-preview-mpr-cell.is-panning .quick-preview-mpr-gpu-canvas {
        cursor: move;
    }

    .quick-preview-mpr-cell.is-zooming .quick-preview-mpr-canvas,
    .quick-preview-mpr-cell.is-zooming .quick-preview-mpr-gpu-canvas {
        cursor: ns-resize;
    }

    .quick-preview-mpr-gpu-canvas,
    .quick-preview-mpr-canvas {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .quick-preview-mpr-gpu-canvas {
        pointer-events: none;
        z-index: 0;
    }

    .quick-preview-mpr-canvas {
        cursor: crosshair;
        touch-action: none;
        z-index: 1;
    }

    .quick-preview-mpr-label {
        position: absolute;
        left: 8px;
        top: 6px;
        max-width: calc(100% - 100px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 2px 5px;
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.54);
        color: #7de3ff;
        font-size: 12px;
        font-weight: 700;
        pointer-events: none;
        z-index: 2;
    }

    .quick-preview-mpr-quality {
        position: absolute;
        right: 8px;
        top: 6px;
        max-width: 84px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 2px 5px;
        border: 1px solid rgba(125, 227, 255, 0.42);
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.64);
        color: #7de3ff;
        font-size: 11px;
        font-weight: 700;
        pointer-events: none;
        z-index: 2;
    }

    .quick-preview-mpr-quality[data-state="streaming"] {
        border-color: rgba(238, 255, 65, 0.58);
        color: #eeff41;
    }

    .quick-preview-mpr-quality[data-state="detail"] {
        border-color: rgba(105, 240, 174, 0.58);
        color: #69f0ae;
    }

    .quick-preview-mpr-cell.is-windowing .quick-preview-mpr-canvas {
        cursor: ew-resize;
    }

    .quick-preview-mpr-cell.is-oblique {
        border-color: rgba(238, 255, 65, 0.62);
    }

    .quick-preview-mpr-cell.is-oblique .quick-preview-mpr-label {
        color: #eeff41;
    }

    .quick-preview-oblique-panel {
        display: grid;
        gap: 3px;
        margin-top: 7px;
        padding-top: 8px;
        border-top: 1px solid rgba(238, 255, 65, 0.22);
    }

    .quick-preview-oblique-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 30px;
        color: #f6fbfd;
        font-size: 12px;
    }

    .quick-preview-oblique-toggle input {
        width: 18px;
        height: 18px;
        accent-color: #eeff41;
    }

    .quick-preview-oblique-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: flex-end;
    }

    .quick-preview-oblique-actions .quick-preview-toolbutton {
        min-width: 34px;
        padding: 0 7px;
    }

    .quick-preview-oblique-actions .quick-preview-toolbutton span {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0;
        line-height: 1;
    }

    .quick-preview-oblique-plane {
        fill: rgba(238, 255, 65, 0.08);
        stroke: rgba(238, 255, 65, 0.94);
        stroke-width: 1.7;
        stroke-dasharray: 7 4;
        vector-effect: non-scaling-stroke;
        pointer-events: none;
    }

    .quick-preview-3d-plan-line {
        stroke: #fbbf24;
        stroke-width: 5;
        stroke-linecap: round;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));
        pointer-events: stroke;
        cursor: pointer;
    }

    .quick-preview-3d-plan-outline {
        stroke: rgba(251, 191, 36, 0.42);
        stroke-width: 11;
        stroke-linecap: round;
        vector-effect: non-scaling-stroke;
        pointer-events: none;
    }

    .quick-preview-3d-plan-point {
        fill: #071015;
        stroke: #fbbf24;
        stroke-width: 2.2;
        vector-effect: non-scaling-stroke;
    }

    .quick-preview-3d-plan.is-selected .quick-preview-3d-plan-line,
    .quick-preview-3d-plan.is-selected .quick-preview-3d-plan-point {
        stroke: #5ad6ff;
    }

    .quick-preview-3d-plan-label {
        fill: #fbbf24;
        paint-order: stroke;
        stroke: rgba(0, 0, 0, 0.92);
        stroke-width: 4px;
        stroke-linejoin: round;
        font-size: 12px;
        font-weight: 800;
        pointer-events: none;
    }

    .quick-preview-3d-segment-distance-line {
        stroke: #7dd3fc;
        stroke-width: 2;
        stroke-dasharray: 5 4;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
        pointer-events: none;
    }

    .quick-preview-3d-segment-distance-point {
        fill: #071015;
        stroke: #7dd3fc;
        stroke-width: 2;
        vector-effect: non-scaling-stroke;
        pointer-events: none;
    }

    .quick-preview-3d-segment-distance-label {
        fill: #bae6fd;
        paint-order: stroke;
        stroke: rgba(0, 0, 0, 0.92);
        stroke-width: 4px;
        stroke-linejoin: round;
        font-size: 12px;
        font-weight: 800;
        pointer-events: none;
    }

    .quick-preview-3d-segment-centerline {
        stroke: #fbbf24;
        stroke-width: 2.4;
        vector-effect: non-scaling-stroke;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
        pointer-events: none;
    }

    .quick-preview-3d-segment-centerline-point {
        fill: #071015;
        stroke: #fbbf24;
        stroke-width: 2;
        vector-effect: non-scaling-stroke;
        pointer-events: none;
    }

    .quick-preview-3d-segment-centerline-label {
        fill: #fde68a;
        paint-order: stroke;
        stroke: rgba(0, 0, 0, 0.92);
        stroke-width: 4px;
        stroke-linejoin: round;
        font-size: 12px;
        font-weight: 800;
        pointer-events: none;
    }

    .quick-preview-orthogonal-slice-plane {
        fill: rgba(125, 227, 255, 0.045);
        stroke-width: 1.35;
        stroke-dasharray: 5 5;
        vector-effect: non-scaling-stroke;
        pointer-events: none;
        mix-blend-mode: screen;
    }

    .quick-preview-orthogonal-slice-plane.is-axial {
        fill: rgba(255, 86, 78, 0.055);
        stroke: rgba(255, 86, 78, 0.78);
    }

    .quick-preview-orthogonal-slice-plane.is-coronal {
        fill: rgba(30, 213, 107, 0.05);
        stroke: rgba(30, 213, 107, 0.74);
    }

    .quick-preview-orthogonal-slice-plane.is-sagittal {
        fill: rgba(247, 221, 45, 0.05);
        stroke: rgba(247, 221, 45, 0.78);
    }

    .quick-preview-crop-panel {
        display: none;
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px solid rgba(158, 181, 193, 0.22);
    }

    .quick-preview-3d-panel.is-cropping .quick-preview-crop-panel {
        display: block;
    }

    .quick-preview-segment-panel {
        display: none;
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px solid rgba(45, 212, 191, 0.24);
    }

    .quick-preview-3d-panel.is-segmenting .quick-preview-segment-panel {
        display: grid;
        gap: 3px;
    }

    .quick-preview-segment-panel input[type="color"] {
        width: 44px;
        height: 26px;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .quick-preview-3d-cube {
        position: fixed;
        right: 14px;
        bottom: 50px;
        z-index: 5;
        width: 152px;
        height: 152px;
        box-sizing: border-box;
        border: 0;
        background: transparent;
        box-shadow: none;
        cursor: grab;
        pointer-events: auto;
        touch-action: none;
    }

    .quick-preview-3d-cube:hover {
        background: transparent;
    }

    .quick-preview-3d-cube:focus-visible {
        outline: 2px solid #7de3ff;
        outline-offset: 2px;
    }

    .quick-preview-3d-cube.is-dragging {
        cursor: grabbing;
        background: transparent;
    }

    .quick-preview-3d-panel {
        position: absolute;
        z-index: 9;
        right: 18px;
        top: 62px;
        display: none;
        width: min(340px, calc(100% - 36px));
        max-height: calc(100% - 92px);
        overflow: auto;
        overscroll-behavior: contain;
        padding: 10px 10px 12px;
        border: 1px solid rgba(95, 168, 190, 0.58);
        border-radius: 6px;
        background: rgba(5, 14, 20, 0.96);
        color: #f6fbfd;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
        backdrop-filter: blur(10px);
        pointer-events: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(125, 227, 255, 0.45) rgba(255, 255, 255, 0.05);
    }

    .quick-preview-3d-panel::-webkit-scrollbar {
        width: 8px;
    }

    .quick-preview-3d-panel::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 999px;
    }

    .quick-preview-3d-panel::-webkit-scrollbar-thumb {
        background: rgba(125, 227, 255, 0.42);
        border-radius: 999px;
    }

    .quick-preview-3d-panel.is-open {
        display: block;
    }

    @media (min-width: 900px) {
        .quick-preview-overlay.is-mixed .quick-preview-3d-panel {
            right: 18px;
        }
    }

    @media (min-width: 1180px) {
        .quick-preview-overlay.is-mixed .quick-preview-3d-panel {
            left: auto;
            right: 18px;
        }
    }

    .quick-preview-3d-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: -2px 0 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(95, 168, 190, 0.28);
        color: rgba(246, 251, 253, 0.92);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0;
    }

    .quick-preview-3d-panel-head .quick-preview-toolbutton {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
    }

    .quick-preview-3d-panel-row {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr) 38px;
        align-items: center;
        gap: 6px;
        min-height: 28px;
        font-size: 11px;
        line-height: 1.15;
    }

    .quick-preview-3d-panel-row.is-wide {
        grid-template-columns: 92px minmax(0, 1fr);
    }
    .quick-preview-projection-slab-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .quick-preview-projection-slab-buttons button {
        min-width: 44px;
        min-height: 44px;
    }
    #quick_preview_3d_projection {
        min-height: 44px;
    }
    .quick-preview-3d-panel-row.is-lighting,
    .quick-preview-3d-panel-row.is-lighting input,
    .quick-preview-3d-panel-row.is-depth-cue,
    .quick-preview-3d-panel-row.is-depth-cue input {
        min-height: 44px;
    }
    .quick-preview-3d-panel-row.is-lighting input[type="checkbox"] {
        width: 44px;
        margin: 0;
        accent-color: #d6ef13;
    }

    .quick-preview-3d-panel-row.is-lighting {
        grid-template-columns: 92px minmax(0, 1fr) max-content;
    }

    .quick-preview-3d-panel-row.is-preset-custom {
        grid-template-columns: 92px minmax(0, 1fr) auto;
    }

    .quick-preview-3d-panel-row.is-angle {
        grid-template-columns: 92px minmax(0, 1fr) 56px;
    }

    .quick-preview-3d-panel-row > span:first-child {
        color: rgba(246, 251, 253, 0.88);
        overflow-wrap: anywhere;
    }

    .quick-preview-3d-panel-row input[type="range"] {
        width: 100%;
        min-width: 0;
    }

    .quick-preview-3d-panel-row select {
        width: 100%;
        min-width: 0;
        height: 26px;
        border: 1px solid rgba(158, 181, 193, 0.42);
        border-radius: 4px;
        background: #05090c;
        color: #f6fbfd;
        font-size: 12px;
    }

    .quick-preview-3d-panel-row input[type="text"] {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        height: 26px;
        border: 1px solid rgba(158, 181, 193, 0.42);
        border-radius: 4px;
        background: #05090c;
        color: #f6fbfd;
        font-size: 12px;
        padding: 0 8px;
    }

    .quick-preview-fusion-controls {
        margin: 4px 0;
        padding: 8px 0;
        border-top: 1px solid rgba(95, 168, 190, 0.28);
        border-bottom: 1px solid rgba(95, 168, 190, 0.28);
    }

    .quick-preview-fusion-body {
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
        align-items: center;
    }

    .quick-preview-fusion-body select {
        grid-column: 1;
    }

    .quick-preview-fusion-body .quick-preview-toolbutton {
        grid-column: 2;
        width: 28px;
        height: 28px;
    }

    .quick-preview-fusion-actions {
        grid-column: 2;
        display: flex;
        gap: 4px;
    }

    .quick-preview-fusion-manual {
        grid-column: 1 / -1;
        display: grid;
        gap: 6px;
        padding: 7px;
        border: 1px solid rgba(95, 168, 190, 0.28);
        border-radius: 6px;
        background: rgba(5, 18, 25, 0.52);
    }

    .quick-preview-fusion-manual textarea {
        box-sizing: border-box;
        width: 100%;
        min-height: 76px;
        resize: vertical;
        border: 1px solid rgba(117, 179, 198, 0.4);
        border-radius: 4px;
        padding: 6px;
        background: rgba(1, 10, 15, 0.84);
        color: #f6fbfd;
        font: 11px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
    }

    .quick-preview-fusion-manual-direction,
    .quick-preview-fusion-manual-review,
    .quick-preview-fusion-manual-status {
        color: rgba(246, 251, 253, 0.78);
        font-size: 10px;
        line-height: 1.35;
    }

    .quick-preview-fusion-manual-review {
        display: flex;
        align-items: flex-start;
        gap: 6px;
    }

    .quick-preview-fusion-manual-buttons {
        display: flex;
        gap: 6px;
    }

    .quick-preview-fusion-manual-action {
        min-height: 28px;
        border: 1px solid rgba(117, 179, 198, 0.4);
        border-radius: 4px;
        padding: 3px 9px;
        background: rgba(25, 52, 64, 0.82);
        color: #f6fbfd;
        cursor: pointer;
    }

    .quick-preview-fusion-manual-action:disabled {
        opacity: 0.45;
        cursor: default;
    }

    .quick-preview-fusion-manual-status[data-kind="error"] {
        color: #ff9d9d;
    }

    .quick-preview-fusion-landmarks {
        display: grid;
        gap: 6px;
        margin-top: 4px;
        padding-top: 8px;
        border-top: 1px solid rgba(95, 168, 190, 0.24);
    }

    .quick-preview-fusion-landmark-row,
    .quick-preview-fusion-landmark-limits {
        display: grid;
        grid-template-columns: auto repeat(3, minmax(0, 1fr));
        gap: 4px;
        align-items: center;
    }

    .quick-preview-fusion-landmark-row input,
    .quick-preview-fusion-landmark-limits input {
        min-width: 0;
        height: 26px;
        box-sizing: border-box;
        border: 1px solid rgba(117, 179, 198, 0.4);
        border-radius: 4px;
        padding: 2px 4px;
        background: rgba(1, 10, 15, 0.84);
        color: #f6fbfd;
        font: 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
    }

    .quick-preview-fusion-landmark-limits {
        grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .quick-preview-fusion-landmark-summary {
        color: rgba(246, 251, 253, 0.82);
        font-size: 10px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .quick-preview-fusion-landmark-summary[data-kind="candidate"] {
        color: #ffd66b;
    }

    .quick-preview-fusion-landmark-summary[data-kind="verified"] {
        color: #9ee8ae;
    }

    .quick-preview-fusion-landmark-summary[data-kind="error"] {
        color: #ff9d9d;
    }

    .quick-preview-fusion-source-mpr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .quick-preview-fusion-source-mpr[hidden] {
        display: none;
    }

    .quick-preview-fusion-source-mpr-view {
        --cross-x: 50%;
        --cross-y: 50%;
        position: relative;
        min-width: 0;
        aspect-ratio: 1;
        overflow: hidden;
        border: 1px solid rgba(117, 179, 198, 0.4);
        border-radius: 4px;
        background: #000;
        cursor: crosshair;
        touch-action: none;
    }

    .quick-preview-wsi-workspace {
        position: absolute;
        z-index: 18;
        top: 12px;
        left: 12px;
        width: min(320px, calc(100% - 24px));
        max-height: min(52vh, 420px);
        overflow: auto;
        padding: 10px;
        border: 1px solid rgba(0, 229, 255, 0.48);
        border-radius: 8px;
        background: rgba(5, 14, 20, 0.92);
        color: #f6fbfd;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.48);
        pointer-events: auto;
    }

    .quick-preview-wsi-workspace[hidden] { display: none; }

    .quick-preview-wsi-workspace-title {
        display: block;
        margin-bottom: 8px;
        color: #eeff41;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .quick-preview-wsi-path {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 92px;
        gap: 8px;
        align-items: center;
        min-height: 36px;
        font-size: 12px;
    }

    .quick-preview-wsi-path > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-preview-wsi-path input[type="range"] { width: 92px; }

    .quick-preview-wsi-focal {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 108px;
        gap: 8px;
        align-items: center;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        font-size: 12px;
    }

    .quick-preview-wsi-analysis {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .quick-preview-wsi-analysis-title {
        margin-bottom: 3px;
        color: rgba(246, 251, 253, 0.82);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .quick-preview-wsi-status {
        margin-top: 7px;
        color: rgba(246, 251, 253, 0.72);
        font-size: 11px;
    }

    .quick-preview-fusion-source-mpr-view:focus-visible {
        outline: 2px solid #d8ff20;
        outline-offset: 1px;
    }

    .quick-preview-fusion-source-mpr-view canvas {
        width: 100%;
        height: 100%;
        display: block;
    }

    .quick-preview-fusion-source-mpr-view::before,
    .quick-preview-fusion-source-mpr-view::after {
        content: "";
        position: absolute;
        z-index: 2;
        pointer-events: none;
        background: rgba(216, 255, 32, 0.78);
    }

    .quick-preview-fusion-source-mpr-view::before {
        left: var(--cross-x);
        top: 0;
        bottom: 0;
        width: 1px;
    }

    .quick-preview-fusion-source-mpr-view::after {
        top: var(--cross-y);
        left: 0;
        right: 0;
        height: 1px;
    }

    .quick-preview-fusion-source-mpr-label {
        position: absolute;
        z-index: 3;
        top: 2px;
        left: 3px;
        color: #d8ff20;
        font-size: 9px;
        line-height: 1;
        pointer-events: none;
        text-shadow: 0 1px 2px #000;
    }

    .quick-preview-fusion-enabled,
    .quick-preview-fusion-status,
    .quick-preview-fusion-probe,
    .quick-preview-fusion-note {
        grid-column: 1 / -1;
    }

    .quick-preview-fusion-enabled {
        display: flex;
        align-items: center;
        min-height: 44px;
        cursor: pointer;
        gap: 6px;
        color: rgba(246, 251, 253, 0.88);
    }

    .quick-preview-overlay.is-picking3d #quick_preview_3d_canvas {
        cursor: progress !important;
    }

    .quick-preview-fusion-status {
        min-height: 15px;
        color: #b9e9f5;
        overflow-wrap: anywhere;
    }

    .quick-preview-fusion-probe {
        min-height: 15px;
        color: rgba(246, 251, 253, 0.86);
        font-variant-numeric: tabular-nums;
        overflow-wrap: anywhere;
    }

    .quick-preview-fusion-probe[data-kind="outside"],
    .quick-preview-fusion-probe[data-kind="error"] {
        color: #ffd59a;
    }

    .quick-preview-fusion-status[data-kind="busy"] {
        color: #f7dc72;
    }

    .quick-preview-fusion-status[data-kind="blocked"] {
        color: #ff9d9d;
    }

    .quick-preview-fusion-note {
        color: rgba(246, 251, 253, 0.58);
        font-size: 10px;
        line-height: 1.3;
    }

    .quick-preview-3d-panel-value {
        color: rgba(246, 251, 253, 0.78);
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

    .quick-preview-transfer-editor {
        min-width: 0;
        display: grid;
        gap: 6px;
    }

    .quick-preview-transfer-canvas {
        width: 100%;
        height: 148px;
        display: block;
        border: 1px solid rgba(95, 168, 190, 0.42);
        border-radius: 4px;
        background: #020609;
        touch-action: none;
        cursor: crosshair;
    }

    .quick-preview-transfer-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    .quick-preview-transfer-actions .quick-preview-toolbutton {
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
    }

    .quick-preview-transfer-point-controls {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 34px;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    .quick-preview-transfer-history .quick-preview-toolbutton { width: auto; min-width: 44px; padding: 0 10px; gap: 4px; }
    .quick-preview-transfer-legacy { margin: 10px 0; border: 1px solid #38505c; border-radius: 4px; padding: 0 8px; }
    .quick-preview-transfer-legacy summary { min-height: 44px; align-content: center; cursor: pointer; font-size: 12px; }
    .quick-preview-transfer-legacy p { font-size: 12px; line-height: 1.4; margin: 0 0 10px; }
    .quick-preview-transfer-legacy fieldset { min-width: 0; margin: 6px 0 10px; padding: 6px; border: 1px solid #38505c; }
    .quick-preview-transfer-legacy legend { width: auto; margin: 0; font-size: 12px; color: inherit; }
    .quick-preview-transfer-legacy label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 6px; font-size: 12px; margin: 0; }
    .quick-preview-transfer-legacy input { grid-column: 1 / -1; width: 100%; min-width: 44px; height: 44px; margin: 0; }
    .quick-preview-transfer-legacy output { overflow-wrap: anywhere; text-align: right; }
    .quick-preview-transfer-legend { margin: 10px 0; padding: 8px; min-width: 0; border: 1px solid #38505c; border-radius: 4px; }
    .quick-preview-transfer-legend figcaption, .quick-preview-transfer-legend output { display: block; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
    .quick-preview-transfer-legend canvas { display: block; width: 100%; height: 24px; margin: 6px 0; background: repeating-conic-gradient(#243139 0% 25%, #101a20 0% 50%) 0 / 12px 12px; }
    .quick-preview-transfer-legend input { display: block; width: 100%; height: 44px; margin: 0; }
    .quick-preview-transfer-legend .quick-preview-transfer-axis > span { max-width: 34%; overflow-wrap: anywhere; }
    .quick-preview-transfer-window { margin: 10px 0; min-width: 0; padding: 8px; border: 1px solid #38505c; border-radius: 4px; }
    .quick-preview-transfer-window legend { width: auto; font-size: 12px; color: inherit; margin: 0; }
    .quick-preview-transfer-window .quick-preview-transfer-field { grid-template-columns: 80px minmax(0, 1fr); }
    .quick-preview-transfer-window .quick-preview-transfer-field > span { overflow-wrap: anywhere; }
    .quick-preview-transfer-window input[type="number"] { color-scheme: dark; background: #101a20; color: #f6fbfd; border: 1px solid #526975; border-radius: 4px; padding: 0 8px; font-variant-numeric: tabular-nums; }
    .quick-preview-transfer-window input:focus-visible { outline: 2px solid #eeff41; outline-offset: 2px; }
    .quick-preview-transfer-window input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: #eeff41; }

    .quick-preview-transfer-point-controls input[type="color"] {
        width: 44px;
        height: 44px;
        padding: 1px;
        border: 1px solid rgba(158, 181, 193, 0.42);
        border-radius: 4px;
        background: #05090c;
    }

    .quick-preview-transfer-readout {
        min-width: 0;
        color: rgba(246, 251, 253, 0.72);
        font-size: 12px;
        font-variant-numeric: tabular-nums;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .quick-preview-transfer-axis {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        font-size: 12px;
        font-variant-numeric: tabular-nums;
    }
    .quick-preview-transfer-axis span { min-width: 0; overflow-wrap: anywhere; }
    .quick-preview-transfer-axis span:last-child { text-align: right; }
    .quick-preview-transfer-field {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
    }
    .quick-preview-transfer-field select, .quick-preview-transfer-field input,
    .quick-preview-transfer-point-controls input[type="range"] {
        box-sizing: border-box;
        min-width: 0;
        min-height: 44px;
        width: 100%;
    }

    .quick-preview-overlay:not(.is-3d) .quick-preview-3d-only {
        display: none !important;
    }

    .quick-preview-overlay-info,
    .quick-preview-window-info {
        position: absolute;
        z-index: 4;
        max-width: min(560px, calc(100% - 24px));
        padding: 8px 10px;
        border: 1px solid rgba(158, 181, 193, 0.35);
        border-radius: 4px;
        background: rgba(3, 8, 12, 0.62);
        color: rgba(246, 251, 253, 0.92);
        font-size: 12px;
        line-height: 1.35;
        pointer-events: none;
        text-shadow: 0 1px 2px rgba(0,0,0,.8);
    }

    .quick-preview-overlay-info {
        left: 8px;
        top: 8px;
        width: fit-content;
        max-width: min(360px, calc(100% - 16px));
        padding: 0;
        overflow: hidden;
        border-color: rgba(95, 168, 190, 0.62);
        background: rgba(4, 13, 18, 0.74);
    }

    .quick-preview-patient-main {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        padding: 5px 7px 4px;
        border-bottom: 1px solid rgba(158, 181, 193, 0.22);
    }

    .quick-preview-patient-name {
        min-width: 0;
        max-width: 235px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 700;
    }

    .quick-preview-patient-id {
        padding: 1px 5px;
        border: 1px solid rgba(174, 234, 0, 0.28);
        border-radius: 3px;
        background: rgba(174, 234, 0, 0.12);
        color: #eeff41;
        font-size: 10px;
        font-weight: 700;
    }

    .quick-preview-patient-row {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        max-width: 100%;
        padding: 4px 7px 5px;
        color: rgba(246, 251, 253, 0.86);
    }

    .quick-preview-patient-chip {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 1px 5px;
        border: 1px solid rgba(158, 181, 193, 0.22);
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.055);
        font-size: 11px;
        white-space: nowrap;
    }

    .quick-preview-patient-study {
        flex-basis: auto;
        max-width: 340px;
        color: rgba(246, 251, 253, 0.72);
    }

    .quick-preview-window-info {
        right: 10px;
        top: 10px;
        text-align: right;
    }

    .quick-preview-overlay.is-3d:not(.is-mpr) .quick-preview-window-info {
        display: none !important;
    }

    .quick-preview-diagnostic-warning {
        position: absolute;
        z-index: 6;
        top: 3px;
        left: 50%;
        transform: translateX(-50%);
        padding: 1px 6px;
        border-radius: 3px;
        background: rgba(3, 8, 12, 0.54);
        color: rgba(246, 251, 253, 0.76);
        font-size: 9px;
        line-height: 1.2;
        letter-spacing: 0;
        pointer-events: none;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .quick-preview-overlay-info {
        top: 18px;
    }

    .quick-preview-stack-controls {
        position: absolute;
        z-index: 5;
        left: 50%;
        bottom: 12px;
        display: none;
        align-items: center;
        gap: 8px;
        transform: translateX(-50%);
        padding: 5px 8px;
        border: 1px solid rgba(158, 181, 193, 0.45);
        border-radius: 4px;
        background: rgba(3, 8, 12, 0.72);
        color: #f6fbfd;
        pointer-events: auto;
    }

    .quick-preview-stack-controls.is-visible {
        display: flex;
    }

    .quick-preview-stack-label {
        min-width: 76px;
        text-align: center;
        font-size: 12px;
        font-weight: 700;
    }

    .quick-preview-filmstrip {
        position: absolute;
        z-index: 10;
        left: 50%;
        bottom: 25px;
        display: none;
        width: min(720px, calc(100% - 28px));
        transform: translateX(-50%);
        padding: 0;
        border: 0;
        border-radius: 7px;
        background: transparent;
        box-shadow: none;
        pointer-events: auto;
        backdrop-filter: none;
    }

    .quick-preview-filmstrip.is-visible {
        display: block;
        animation: quick-preview-filmstrip-in 180ms ease-out;
    }

    @keyframes quick-preview-filmstrip-in {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(10px) scale(0.98);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0) scale(1);
        }
    }

    .quick-preview-filmstrip-controls {
        display: grid;
        grid-template-columns: auto minmax(140px, 1fr);
        align-items: center;
        gap: 8px;
        margin-top: 1px;
        color: #f6fbfd;
        font-size: 11px;
        font-weight: 700;
    }

    .quick-preview-filmstrip-counter {
        min-width: 52px;
        color: #eeff41;
        text-align: center;
        white-space: nowrap;
    }

    .quick-preview-filmstrip-hint {
        display: none;
    }

    .quick-preview-filmstrip-slider {
        width: 100%;
        accent-color: #eeff41;
        cursor: pointer;
        height: 12px;
        margin: 0;
    }

    .quick-preview-filmstrip-track {
        position: relative;
        height: 102px;
        overflow: visible;
        cursor: grab;
        perspective: 760px;
        perspective-origin: center center;
        touch-action: pan-y;
        user-select: none;
    }

    .quick-preview-filmstrip.is-dragging .quick-preview-filmstrip-track {
        cursor: grabbing;
    }

    .quick-preview-filmstrip-item {
        position: absolute;
        left: 50%;
        top: 18px;
        width: 96px;
        min-width: 96px;
        height: 70px;
        margin-left: -48px;
        padding: 3px;
        border: 0;
        border-radius: 4px;
        background: rgba(21, 36, 44, 0.58);
        color: #f6fbfd;
        cursor: pointer;
        font: inherit;
        text-align: left;
        user-select: none;
        transform: translateX(0) translateY(0) rotateY(0) rotateZ(0) scale(1);
        transform-origin: center bottom;
        transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 190ms ease, opacity 220ms ease, filter 220ms ease, background 180ms ease;
        will-change: transform;
    }

    .quick-preview-filmstrip-item:nth-child(3n) {
        --quick-preview-card-tilt: 2deg;
    }

    .quick-preview-filmstrip-item:nth-child(3n + 1) {
        --quick-preview-card-tilt: -2.5deg;
    }

    .quick-preview-filmstrip-item:nth-child(3n + 2) {
        --quick-preview-card-tilt: 1.2deg;
    }

    .quick-preview-filmstrip-item:hover,
    .quick-preview-filmstrip-item:focus,
    .quick-preview-filmstrip-item.is-interacting {
        outline: none;
        filter: brightness(1.18);
        background: rgba(30, 50, 58, 0.74);
    }

    .quick-preview-filmstrip-item.is-active {
        background: rgba(28, 42, 48, 0.86);
        box-shadow: 0 0 0 2px rgba(238, 255, 65, 0.88) inset, 0 10px 26px rgba(0, 0, 0, 0.42), 0 0 18px rgba(238, 255, 65, 0.22);
        filter: brightness(1.08);
    }

    .quick-preview-filmstrip-thumb {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100%;
        height: 52px;
        overflow: hidden;
        border-radius: 3px;
        background: rgba(246, 251, 253, 0.08);
        color: rgba(246, 251, 253, 0.72);
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
    }

    .quick-preview-filmstrip-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: 0;
        transform: scale(1.04);
        transition: opacity 140ms ease, transform 180ms ease, filter 180ms ease;
        user-select: none;
        -webkit-user-drag: none;
    }

    .quick-preview-filmstrip-thumb img.is-loaded {
        opacity: 1;
    }

    .quick-preview-filmstrip-compare-actions {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 3;
        display: inline-flex;
        gap: 1px;
        opacity: 1;
        transform: translateY(0) scale(1);
        transition: transform 150ms ease, background-color 150ms ease;
        pointer-events: auto;
        padding: 1px;
        border-radius: 3px;
        background: rgba(3, 12, 16, 0.9);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.42);
    }

    .quick-preview-filmstrip-item:hover .quick-preview-filmstrip-compare-actions,
    .quick-preview-filmstrip-item:focus .quick-preview-filmstrip-compare-actions,
    .quick-preview-filmstrip-item.is-interacting .quick-preview-filmstrip-compare-actions {
        background: rgba(3, 12, 16, 0.98);
        transform: scale(1);
        pointer-events: auto;
    }

    .quick-preview-filmstrip-compare-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border: 1px solid rgba(246, 251, 253, 0.74);
        border-radius: 3px;
        background: rgba(4, 12, 16, 0.96);
        color: #f6fbfd;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.38);
        cursor: pointer;
        font-size: 9px;
        font-weight: 1000;
        line-height: 1;
        user-select: none;
        transform: translateZ(0);
        transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
    }

    .quick-preview-filmstrip-compare-action:hover,
    .quick-preview-filmstrip-compare-action:focus {
        background: rgba(21, 38, 45, 1);
        transform: scale(1.08);
        outline: none;
    }

    .quick-preview-filmstrip-compare-action:active {
        transform: scale(0.94);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.44);
    }

    .quick-preview-filmstrip-compare-action.is-a {
        border-color: rgba(238, 255, 65, 0.72);
        color: #eeff41;
    }

    .quick-preview-filmstrip-compare-action.is-b {
        border-color: rgba(90, 214, 255, 0.72);
        color: #5ad6ff;
    }

    .quick-preview-filmstrip-item.is-active .quick-preview-filmstrip-thumb img {
        transform: scale(1.09);
        filter: contrast(1.06) brightness(1.05);
    }

    .quick-preview-filmstrip-item:hover .quick-preview-filmstrip-thumb img,
    .quick-preview-filmstrip-item:focus .quick-preview-filmstrip-thumb img,
    .quick-preview-filmstrip-item.is-interacting .quick-preview-filmstrip-thumb img {
        transform: scale(1.13);
        filter: contrast(1.08) brightness(1.08);
    }

    .quick-preview-filmstrip-label {
        display: block;
        margin-top: 2px;
        overflow: hidden;
        color: rgba(246, 251, 253, 0.88);
        font-size: 10px;
        font-weight: 700;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-preview-filmstrip-item.is-active .quick-preview-filmstrip-label {
        color: #eeff41;
    }

    .quick-preview-filmstrip-item.is-gap {
        width: 34px;
        min-width: 34px;
        cursor: default;
        text-align: center;
        opacity: 0.72;
    }

    @media (max-width: 760px) {
        .quick-preview-layout-grid {
            inset: 42px 8px 104px;
            gap: 5px;
        }

        .quick-preview-measure-panel {
            left: 8px;
            right: auto;
            width: min(300px, calc(100% - 16px));
            max-height: 38vh;
        }

        .quick-preview-3d-quickbar {
            top: 20px;
            left: 8px;
            right: auto;
            width: calc(100vw - 28px);
            max-width: calc(100vw - 28px);
            min-width: 0;
            box-sizing: border-box;
            gap: 5px;
            transform: none;
        }

        .quick-preview-overlay.is-mixed .quick-preview-3d-quickbar {
            left: 8px;
            right: auto;
            width: calc(100vw - 28px);
            max-width: calc(100vw - 28px);
            min-width: 0;
            transform: none;
        }

        .quick-preview-3d-quickbar-label {
            display: none;
        }

        .quick-preview-3d-quickbar input[type="range"] {
            width: 0;
            min-width: 0;
        }

        .quick-preview-3d-quickbar-value {
            width: 30px;
        }

        .quick-preview-3d-quickbar select {
            width: 72px;
            min-width: 72px;
        }

        .quick-preview-2d-orientation-bar {
            left: 8px;
            right: auto;
            bottom: 18px;
            width: auto;
            max-width: calc(100vw - 28px);
            min-width: 0;
            box-sizing: border-box;
            gap: 7px;
        }

        .quick-preview-2d-orientation-dial-wrap {
            width: 104px;
            height: 104px;
        }

        .quick-preview-2d-orientation-dial {
            width: 104px;
            height: 104px;
        }

        .quick-preview-2d-arc-button {
            width: 28px;
            height: 38px;
        }

        .quick-preview-2d-orientation-reset {
            width: 31px;
            height: 31px;
        }

        .quick-preview-2d-mirror-block {
            grid-template-columns: 36px;
            grid-template-rows: repeat(2, 36px);
            gap: 6px;
            padding: 0;
        }

        .quick-preview-2d-mirror-button {
            width: 36px;
            height: 36px;
        }

        .quick-preview-2d-orientation-warning {
            top: 18px;
            max-width: calc(100vw - 28px);
        }

        .quick-preview-3d-endoscopy-bar,
        .quick-preview-overlay.is-mixed .quick-preview-3d-endoscopy-bar {
            top: 50px;
            left: 8px;
            right: auto;
            max-width: calc(100vw - 28px);
            transform: none;
        }

        .quick-preview-active-tool,
        .quick-preview-overlay.is-3d .quick-preview-active-tool,
        .quick-preview-overlay.is-mixed .quick-preview-active-tool {
            top: 50px;
            left: 8px;
            right: auto;
            max-width: calc(100vw - 28px);
            transform: none;
        }

        .quick-preview-overlay.is-3d .quick-preview-overlay-info {
            top: 62px;
        }

        .quick-preview-overlay.is-mixed .quick-preview-3d-canvas {
            display: none !important;
        }

        .quick-preview-overlay.is-mixed .quick-preview-overlay-info {
            display: none !important;
        }

        .quick-preview-overlay.is-mixed .quick-preview-mpr-grid {
            left: 0;
            bottom: 0;
            right: auto;
            width: calc(100vw - 20px);
            box-sizing: border-box;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(3, minmax(0, 1fr));
            gap: 4px;
            padding: 4px;
        }

        .quick-preview-overlay.is-mixed .quick-preview-mpr-grid.is-oblique-enabled {
            grid-template-rows: repeat(4, minmax(0, 1fr));
        }

        .quick-preview-overlay.is-mixed.is-mixed-grid .quick-preview-3d-canvas {
            display: block !important;
            inset: 92px 8px auto 8px;
            height: 34vh;
        }

        .quick-preview-overlay.is-mixed.is-mixed-grid .quick-preview-mpr-grid,
        .quick-preview-overlay.is-mixed.is-mixed-grid .quick-preview-mpr-grid.is-oblique-enabled {
            left: 0;
            right: auto;
            top: calc(92px + 34vh + 6px);
            bottom: 0;
            width: calc(100vw - 20px);
            grid-template-columns: 1fr;
            grid-template-rows: repeat(3, minmax(0, 1fr));
        }

        .quick-preview-overlay.is-mixed.is-mixed-grid .quick-preview-mpr-cell:nth-child(1),
        .quick-preview-overlay.is-mixed.is-mixed-grid .quick-preview-mpr-cell:nth-child(2),
        .quick-preview-overlay.is-mixed.is-mixed-grid .quick-preview-mpr-cell:nth-child(3) {
            grid-column: auto;
            grid-row: auto;
        }

        .quick-preview-segment-editor {
            left: 8px;
            width: calc(100vw - 28px);
            max-width: calc(100vw - 28px);
            box-sizing: border-box;
        }

        .quick-preview-3d-cube {
            right: 8px;
            left: auto;
            bottom: 104px;
            width: 132px;
            height: 132px;
        }

        .quick-preview-3d-preset-menu {
            right: -4px;
            width: min(270px, calc(100vw - 24px));
        }

        .quick-preview-3d-panel {
            top: auto;
            left: auto;
            right: 8px;
            bottom: 8px;
            width: calc(100% - 16px);
            max-height: 52vh;
            box-sizing: border-box;
            overflow-y: auto;
        }

        .quick-preview-overlay.is-mixed .quick-preview-3d-panel {
            left: auto;
            right: 8px;
        }

        .quick-preview-filmstrip {
            width: calc(100% - 12px);
            bottom: 10px;
        }

        .quick-preview-filmstrip-controls {
            grid-template-columns: auto 1fr;
        }

        .quick-preview-filmstrip-hint {
            display: none;
        }

        .quick-preview-filmstrip-item {
            width: 76px;
            min-width: 76px;
            height: 62px;
            margin-left: -38px;
            top: 20px;
        }

        .quick-preview-filmstrip-thumb {
            height: 45px;
        }

        .quick-preview-toolbar {
            min-width: 0;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }

        .quick-preview-toolbar::-webkit-scrollbar {
            display: none;
        }

        .quick-preview-title {
            flex: 0 0 auto;
            max-width: 34vw;
        }

        .quick-preview-collab-end-floating,
        .quick-preview-collab-follow-floating,
        .quick-preview-collab-status-pill {
            min-height: 30px;
            padding: 0 7px;
            font-size: 9px;
        }

        .quick-preview-collab-end-floating span,
        .quick-preview-collab-follow-floating span {
            max-width: 92px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .quick-preview-collab-status-pill {
            max-width: 112px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .quick-preview-collab-message-overlay {
            top: auto;
            right: 0;
            bottom: 0;
            width: min(420px, 100vw);
            height: min(360px, 58vh);
            border-right: 0;
            border-bottom: 0;
            border-radius: 8px 0 0 0;
            transform: translateX(calc(100% - 34px));
        }

        .quick-preview-collab-message-overlay.is-expanded {
            transform: translateX(0);
        }

        .quick-preview-collab-chat-compose input {
            min-height: 34px;
            font-size: 12px;
        }

        .quick-preview-measure-panel {
            top: auto;
            left: 6px;
            right: 6px;
            bottom: 86px;
            width: auto;
            max-height: 44vh;
            max-width: none;
            border-radius: 7px;
        }

        .quick-preview-measure-panel.is-collapsed {
            width: 42px;
            right: auto;
            bottom: 112px;
        }

        .quick-preview-measure-panel-head {
            position: sticky;
            top: 0;
            z-index: 1;
            background: rgba(5, 13, 18, 0.94);
        }

        .quick-preview-overlay-info {
            left: 6px;
            top: 48px;
            max-width: calc(100vw - 12px);
        }
    }

    .quick-preview-message {
        position: absolute;
        left: 50%;
        top: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        max-width: min(620px, calc(100% - 40px));
        transform: translate(-50%, -50%);
        padding: 18px 20px;
        border: 1px solid rgba(158, 181, 193, 0.35);
        border-radius: 6px;
        background: rgba(21, 36, 44, 0.92);
        color: #f6fbfd;
        text-align: center;
        line-height: 1.45;
    }

    .quick-preview-message.is-loading::before {
        content: "";
        width: 18px;
        height: 18px;
        min-width: 18px;
        border: 2px solid rgba(246, 251, 253, 0.28);
        border-top-color: #eeff41;
        border-radius: 50%;
        animation: quick-preview-spin 0.85s linear infinite;
    }

    .quick-preview-message.has-progress {
        flex-direction: column;
        align-items: stretch;
        min-width: min(520px, calc(100% - 40px));
        gap: 10px;
        padding: 16px 18px;
    }

    .quick-preview-message.has-progress::before {
        display: none;
    }

    .quick-preview-message-progress-label {
        overflow: hidden;
        color: #f6fbfd;
        font-size: 13px;
        font-weight: 800;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-preview-message-progress-track {
        width: 100%;
        height: 8px;
        overflow: hidden;
        border: 1px solid rgba(90, 214, 255, 0.38);
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.34);
    }

    .quick-preview-message-progress-bar {
        width: 0%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #29b6f6, #eeff41);
        transition: width 120ms linear;
    }

    .quick-preview-message-progress-percent {
        color: rgba(246, 251, 253, 0.72);
        font-size: 11px;
        font-weight: 800;
        text-align: right;
    }

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

    .element-status-overlay {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 0.5px;
        pointer-events: none;
        z-index: 20;
        text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    }

    .element-status-overlay--delete {
        background: rgba(249, 125, 0, 0.71);
    }

    .element-status-overlay--move {
        background: rgba(249, 134, 0, 0.71);
    }

        .gallery-frame:not(.is-tag-open) > .gallery-figcaption-right {
            position: absolute;
            top: 0px;
            right: 0px;
            width: var(--tile-tag-rail-width);
            min-width: var(--tile-tag-rail-width);
            margin-top: 0;
            margin-left: 0;
        }

        .gallery-frame.is-tag-open {
            grid-column: span 2;
            display: flex;
            align-items: stretch;
            width: max-content;
            max-width: 100%;
            border-color: rgba(213,248,0,.55);
            box-shadow: 0 14px 34px rgba(0,0,0,.42);
        }

            .gallery-frame.is-tag-open > .gallery-main-content {
                flex: 0 0 auto;
            }

            .gallery-frame.is-tag-open > .gallery-figcaption-right {
                position: relative;
                top: 0;
                right: 0;
                margin: 0;
                width: calc(var(--tile-tag-rail-width) + 260px);
                min-width: calc(var(--tile-tag-rail-width) + 260px);
                display: flex;
            }

            .gallery-frame.is-tag-open .tile-tag-shell {
                width: 100%;
            }

            .gallery-frame.is-tag-open .tile-tag-panel {
                display: block;
                width: 260px;
                padding: 10px;
                box-shadow: -12px 0 24px rgba(0,0,0,.34);
            }

    #div_patient_data .gallery-figcaption-top,
    #div_patient_data .gallery-figcaption-bottom {
        display: flex;
        align-items: center;
        gap: 6px;
        box-sizing: border-box;
        color: rgba(246,251,253,.9);
    }

    #div_patient_data .gallery-figcaption-top {
        border-bottom: 1px solid rgba(255,255,255,.05);
        background: rgba(12,18,22,.18);
    }

    #div_patient_data .gallery-figcaption-bottom {
        border-top: 1px solid rgba(255,255,255,.05);
        background: rgba(12,18,22,.16);
    }

    #div_patient_data .gallery-figcaption-top > div:first-child {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
    }

    #div_patient_data .gallery-figcaption-top > div:nth-child(2) {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 0 !important;
    }

    #div_patient_data .gallery-figcaption-top .mdl-button {
        width: 28px;
        min-width: 28px;
        height: 28px;
        margin-top: 0 !important;
        color: rgba(246,251,253,.9);
    }

    #div_patient_data .gallery-img {
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    }

    .tagging-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 40;
        display: none;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 12px;
        overflow: hidden;
        background: rgba(8, 14, 18, 0.22);
    }

    .tagging-modal-shell {
        position: absolute;
        top: 72px;
        left: 120px;
        width: min(960px, calc(100vw - 48px));
        min-width: 760px;
        max-width: calc(100vw - 24px);
        max-height: min(82vh, 840px);
        display: grid;
        grid-template-rows: auto 1fr auto;
        border: 1px solid rgba(93, 129, 150, 0.55);
        border-radius: 14px;
        overflow: hidden;
        background: linear-gradient(0deg, #1f2a33 0%, #162028 100%);
        color: #f4f7f8;
        box-shadow: 0 26px 70px rgba(0, 0, 0, 0.45);
    }

    .tagging-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 12px;
        background: #4c6776;
        cursor: move;
    }

    .tagging-header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .tagging-header-actions .tagging-button {
            min-height: 38px;
            padding: 0 14px;
            border-radius: 10px;
        }

    .tagging-modal-title {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0;
        text-transform: none;
    }

    .tagging-modal-subtitle {
        display: none;
    }

    .tagging-modal-close {
        min-width: 30px;
        width: 30px;
        height: 30px;
        border: none;
        border-radius: 8px;
        background: #d9ef2c;
        color: #1b252c;
        font-size: 20px;
        font-weight: 700;
        cursor: pointer;
    }

    .tagging-close-confirm-backdrop {
        position: absolute;
        inset: 0;
        z-index: 7;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(6, 10, 13, 0.55);
    }

    .tagging-close-confirm {
        width: min(360px, calc(100% - 32px));
        padding: 16px;
        border: 1px solid rgba(93, 129, 150, 0.55);
        border-radius: 14px;
        background: linear-gradient(0deg, #1f2a33 0%, #162028 100%);
        color: #f4f7f8;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    }

    .tagging-close-confirm-title {
        font-size: 15px;
        font-weight: 700;
        color: #f4f7f8;
    }

    .tagging-close-confirm-message {
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.45;
        color: rgba(255, 255, 255, 0.82);
    }

    .tagging-close-confirm-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 16px;
    }

    .tagging-modal-body {
        display: grid;
        grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
        gap: 0;
        padding: 0;
        overflow: hidden;
    }

    .tagging-tree-panel,
    .tagging-search-panel {
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .tagging-tree-panel {
        border-right: 1px solid rgba(85, 113, 132, 0.35);
        background: rgba(10, 18, 24, 0.28);
    }

    .tagging-search-panel {
        padding: 0 0 16px;
    }

    .tagging-panel {
        min-height: 0;
        border: 1px solid rgba(85, 113, 132, 0.55);
        border-radius: 16px;
        background: rgba(10, 18, 24, 0.35);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .tagging-section-title {
        padding: 14px 16px 10px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #d7e4ea;
    }

    .tagging-target-line {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 16px 12px;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.76);
    }

    .tagging-target-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(238, 255, 65, 0.12);
        color: #ecff41;
        font-weight: 700;
    }

    .tagging-toolbar,
    .tagging-manager-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.7fr) auto auto;
        gap: 10px;
        padding: 0 16px 14px;
    }

    .tagging-toolbar {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 10px;
    }

    .tagging-manager-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .tagging-search-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px;
        padding: 0 16px 12px;
    }

    .tagging-quick-card {
        min-width: 0;
        padding: 10px 12px;
        border: 1px solid rgba(85, 113, 132, 0.55);
        border-radius: 14px;
        background: rgba(52, 69, 80, 0.52);
    }

    .tagging-quick-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 700;
        color: #d7e4ea;
    }

    .tagging-quick-card-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 8px;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.72);
    }

    .tagging-input,
    .tagging-select {
        width: 100%;
        min-height: 40px;
        border: 1px solid rgba(112, 146, 168, 0.45);
        border-radius: 12px;
        background: rgba(13, 24, 31, 0.85);
        color: #f7fafb;
        padding: 0px 0px 0px 5px;
        font-size: 14px;
    }

        .tagging-input.tagging-input-compact {
            min-height: 42px;
            padding: 0px 0px 0px 3px;
            background: rgba(128, 167, 189, 0.2);
            border-color: rgba(130, 170, 193, 0.3);
        }

    .tagging-button {
        min-width: 46px;
        min-height: 46px;
        padding: 0 16px;
        border: 1px solid rgba(112, 146, 168, 0.4);
        border-radius: 12px;
        background: rgba(55, 71, 79, 0.78);
        color: #f6fbfd;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }

    .tagging-button-accent {
        background: #ecff41;
        color: #182126;
        border-color: rgba(236, 255, 65, 0.8);
    }

    .tagging-button-danger {
        background: rgba(117, 46, 46, 0.72);
        border-color: rgba(172, 79, 79, 0.55);
    }

    .tagging-assigned-wrap {
        padding: 0 16px 14px;
    }

    .tagging-chip-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .tagging-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        min-height: 28px;
        padding: 4px 9px;
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        font-size: 12px;
        font-weight: 700;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    }

    .tagging-chip-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tagging-chip-muted {
        background: rgba(46, 62, 72, 0.65);
        color: rgba(255, 255, 255, 0.68);
        border-style: dashed;
    }

    .search-tag-filter-box {
        margin: 8px 0 18px;
        padding: 10px 0 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .search-tag-filter-banner-inline {
        display: none;
        align-items: center;
        gap: 6px;
        margin-left: 10px;
        padding: 2px 8px;
        border-radius: 4px;
        background: rgba(183, 234, 0, 0.9);
        color: #151f25;
        font-size: 11px;
        font-weight: 700;
        vertical-align: middle;
    }

    .search-tag-filter-banner-inline.is-visible {
        display: inline-flex;
    }

    .search-tag-filter-banner-text {
        white-space: nowrap;
    }

    .search-tag-filter-banner-close-inline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 999px;
        background: rgba(33, 40, 45, 0.88);
        color: #fff;
        cursor: pointer;
        border: none;
        padding: 0;
    }

    .search-tag-filter-label {
        margin: 0 0 8px;
        font-size: 11px;
        color: #9f9f9f;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .search-tag-filter-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .search-tag-filter-list {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: wrap;
        gap: 8px;
        min-height: 42px;
        padding: 2px 0;
    }

    .search-tag-filter-placeholder {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        color: #9f9f9f;
        font-size: 15px;
    }

    .search-tag-open {
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 999px;
        background: rgba(55, 71, 79, 0.78);
        color: #fff;
        cursor: pointer;
        flex: 0 0 auto;
    }

    .search-tag-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 30px;
        max-width: 100%;
        padding: 3px 9px;
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        font-size: 12px;
        font-weight: 700;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    }

        .search-tag-chip button {
            width: 22px;
            height: 22px;
            border: none;
            border-radius: 999px;
            background: rgba(33, 40, 45, 0.94);
            color: #ffffff;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        }

    /* --- Filter / Tags toggle buttons in toolbar --- */
    .toolbar_top_toggle {
        position: relative;
        display: inline-block;
    }

    .toolbar_top_toggle.is-active .material-icons {
        color: #aeea00;
    }

    .patient-filter-banner {
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 7px 14px;
        background: rgba(183, 234, 0, 0.92);
        color: #151f25;
        font-size: 13px;
        font-weight: 700;
    }

    .patient-filter-banner.is-visible {
        display: flex;
    }

    .patient-filter-banner-close {
        width: 24px;
        height: 24px;
        border: none;
        border-radius: 999px;
        background: rgba(33, 40, 45, 0.88);
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Multi-select filter chips --- */
    .ms-filter-group {
        margin-bottom: 4px;
    }

    .ms-combo {
        position: relative;
        margin-bottom: 8px;
    }

    .ms-combo-input {
        width: 100%;
        padding: 8px 32px 8px 8px;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,0.3);
        background: transparent;
        color: #e0e0e0;
        font-size: 14px;
        outline: none;
        box-sizing: border-box;
    }

    .ms-combo-input:focus {
        border-bottom-color: #aeea00;
    }

    .ms-combo-input::placeholder {
        color: #888;
    }

    .ms-combo-arrow {
        position: absolute;
        right: 4px;
        top: 4px;
        color: #888;
        pointer-events: none;
        font-size: 20px;
    }

    .ms-combo-list {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 100;
        max-height: 200px;
        overflow-y: auto;
        background: #323232;
        border: 1px solid #455a64;
        border-radius: 0 0 6px 6px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    }

    .ms-combo.is-open .ms-combo-list {
        display: block;
    }

    .ms-combo-option {
        display: block;
        width: 100%;
        padding: 8px 10px;
        border: 0;
        border-bottom: 1px solid #455a64;
        background: #323232;
        color: #ffffff;
        font-size: 13px;
        text-align: left;
        cursor: pointer;
    }

    .ms-combo-option:hover {
        background: #546e7a;
    }

    .ms-combo-label {
        font-size: 11px;
        color: #aeea00;
        margin-bottom: 2px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .ms-chip-area {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        min-height: 0;
        padding: 4px 0 0;
    }

    .ms-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 6px 3px 8px;
        border-radius: 4px;
        color: #fff;
        font-size: 11px;
        font-weight: 600;
    }

    .ms-chip-remove {
        width: 16px;
        height: 16px;
        border: none;
        border-radius: 999px;
        background: rgba(255,255,255,0.12);
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .ms-chip-remove .material-icons {
        font-size: 12px;
    }

    .search-options-panel {
        padding: 0 18px 10px;
    }

        .search-options-panel .search-tag-filter-box {
            margin: 6px 0 12px;
            padding: 8px 0 10px;
            border-bottom-color: rgba(210, 230, 238, 0.28);
        }

        .search-options-panel .search-tag-filter-label {
            margin-bottom: 5px;
            color: rgba(214, 228, 235, 0.78);
            font-size: 10px;
            line-height: 1.2;
        }

        .search-options-panel .search-tag-filter-row {
            align-items: center;
            gap: 8px;
        }

        .search-options-panel .search-tag-filter-list {
            min-height: 32px;
            gap: 6px;
            padding: 0;
        }

        .search-options-panel .search-tag-filter-placeholder {
            min-height: 30px;
            color: rgba(224, 236, 242, 0.86);
            font-size: 13px;
        }

        .search-options-panel .search-tag-open {
            width: 32px;
            height: 32px;
        }

        .search-options-panel .ms-filter-group {
            margin-bottom: 2px;
        }

        .search-options-panel .ms-combo {
            margin-bottom: 5px;
        }

        .search-options-panel .ms-combo-label {
            margin-bottom: 0;
            font-size: 10px;
            line-height: 14px;
        }

        .search-options-panel .ms-combo-input {
            min-height: 30px;
            padding: 5px 28px 5px 8px;
            border-bottom-color: rgba(220, 235, 242, 0.48);
            color: rgba(246, 251, 253, 0.95);
            font-size: 13px;
            line-height: 18px;
        }

        .search-options-panel .ms-combo-input::placeholder {
            color: rgba(224, 236, 242, 0.72);
        }

        .search-options-panel .ms-combo-arrow {
            top: 2px;
            color: rgba(224, 236, 242, 0.72);
            font-size: 19px;
        }

        .search-options-panel .ms-combo-option {
            padding: 7px 9px;
            font-size: 12px;
            line-height: 16px;
        }

        .search-options-panel .ms-chip-area {
            gap: 4px;
            padding-top: 2px;
        }

        .search-options-panel .ms-chip {
            padding: 2px 5px 2px 7px;
            font-size: 10px;
            line-height: 16px;
        }

        .search-options-panel .mdl-date-textfield {
            height: 42px;
            padding: 14px 0 4px;
        }

        .search-options-panel .mdl-date-textfield__input {
            min-height: 20px;
            padding: 2px 28px 2px 0;
            border-bottom-color: rgba(220, 235, 242, 0.42);
            color: rgba(246, 251, 253, 0.95);
            font-size: 13px;
            line-height: 18px;
        }

        .search-options-panel .mdl-date-textfield__label {
            top: 17px;
            color: rgba(224, 236, 242, 0.7);
            font-size: 13px;
            line-height: 18px;
        }

        .search-options-panel .mdl-date-textfield--floating-label.is-focused .mdl-date-textfield__label,
        .search-options-panel .mdl-date-textfield--floating-label.is-dirty .mdl-date-textfield__label,
        .search-options-panel .mdl-date-textfield--floating-label.has-placeholder .mdl-date-textfield__label {
            top: 0;
            font-size: 10px;
        }

        .search-options-panel .mdl-selectfield__icon {
            top: 13px;
            bottom: auto;
            color: rgba(224, 236, 242, 0.74);
            padding: 0;
        }

        .search-options-panel .mdl-selectfield__icon > i {
            font-size: 20px;
        }

    @media only screen and (max-width: 900px) {
        .search-options-panel {
            padding: 0 14px 10px;
        }

            .search-options-panel .search-tag-filter-box {
                margin-bottom: 12px;
                padding-bottom: 11px;
            }

            .search-options-panel .search-tag-open {
                width: 34px;
                height: 34px;
            }

            .search-options-panel .ms-combo-input {
                min-height: 34px;
                padding-top: 7px;
                padding-bottom: 7px;
            }

            .search-options-panel .ms-combo-arrow {
                top: 4px;
            }

            .search-options-panel .mdl-date-textfield {
                height: 44px;
                padding-top: 15px;
            }
    }

    /* --- Context menu for sorting --- */
    .sort-context-menu {
        display: none;
        position: fixed;
        z-index: 9999;
        min-width: 220px;
        padding: 6px 0;
        background: #2a2f33;
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 6px;
        box-shadow: 0 6px 24px rgba(0,0,0,0.5);
        color: #f0f0f0;
        font-size: 13px;
    }

    .sort-context-menu.is-open {
        display: block;
    }

    .sort-context-menu-item {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 8px 16px;
        border: none;
        background: none;
        color: inherit;
        font-size: inherit;
        cursor: pointer;
        text-align: left;
    }

    .sort-context-menu-item:hover {
        background: rgba(174, 234, 0, 0.18);
    }

    .sort-context-menu-item.is-active {
        color: #aeea00;
    }

    .sort-context-menu-divider {
        height: 1px;
        margin: 4px 12px;
        background: rgba(255,255,255,0.12);
    }

    .sort-context-menu-title {
        padding: 6px 16px 4px;
        font-size: 11px;
        color: #9f9f9f;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .tagging-list {
        flex: 1 1 auto;
        min-height: 220px;
        margin: 0 16px 16px;
        border: 1px solid rgba(85, 113, 132, 0.35);
        border-radius: 14px;
        background: rgba(9, 15, 21, 0.6);
        overflow: auto;
    }

    .tagging-search-panel.is-compact {
        padding-bottom: 0;
    }

        .tagging-search-panel.is-compact .tagging-list {
            margin-top: 8px;
            margin-bottom: 0;
            border-radius: 0;
            border-left: none;
            border-right: none;
            border-bottom: none;
            background: rgba(17, 23, 29, 0.42);
        }

    .tagging-modal-shell.is-search-mode {
        width: min(900px, calc(100vw - 48px));
    }

        .tagging-modal-shell.is-search-mode .tagging-tree-panel {
            background: rgba(18, 22, 26, 0.18);
            border-right-color: rgba(112, 146, 168, 0.22);
        }

        .tagging-modal-shell.is-search-mode .tagging-tree {
            padding-top: 6px;
        }

        .tagging-modal-shell.is-search-mode .tagging-section-title {
            padding-top: 12px;
            padding-bottom: 8px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.82);
        }

        .tagging-modal-shell.is-search-mode .tagging-tree-row {
            min-height: 32px;
            gap: 6px;
            padding: 0 10px;
            color: rgba(255, 255, 255, 0.86);
        }

            .tagging-modal-shell.is-search-mode .tagging-tree-row:hover {
                background: rgba(255, 255, 255, 0.04);
            }

            .tagging-modal-shell.is-search-mode .tagging-tree-row.is-active {
                background: rgba(255, 255, 255, 0.12);
                color: #ffffff;
                box-shadow: none;
            }

        .tagging-modal-shell.is-search-mode .tagging-tree-toggle {
            width: 18px;
            height: 18px;
            border-radius: 4px;
            background: transparent;
            color: rgba(255, 255, 255, 0.85);
            font-size: 15px;
        }

            .tagging-modal-shell.is-search-mode .tagging-tree-toggle.is-spacer {
                width: 18px;
                height: 18px;
            }

        .tagging-modal-shell.is-search-mode .tagging-tree-icon {
            font-size: 15px;
            color: #f2ff57;
        }

        .tagging-modal-shell.is-search-mode .tagging-tree-label {
            font-size: 12px;
            font-weight: 600;
        }

    .tagging-list-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        align-items: center;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

        .tagging-list-row:last-child,
        .tagging-manager-row:last-child {
            border-bottom: none;
        }

        .tagging-list-row.is-assigned {
            background: rgba(236, 255, 65, 0.08);
        }

    .tagging-tag-result {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 5px 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        background: transparent;
    }

        .tagging-tag-result:hover {
            background: rgba(255, 255, 255, 0.03);
        }

    .tagging-tag-pill {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 30px;
        max-width: min(100%, 420px);
        padding: 3px 9px;
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        font-size: 12px;
        font-weight: 700;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    }

    .tagging-tag-icon-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border: none;
        border-radius: 999px;
        background: rgba(33, 40, 45, 0.94);
        color: #ffffff;
        cursor: pointer;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    .tagging-tag-result.is-assigned {
        background: rgba(255, 255, 255, 0.045);
        box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.18);
    }

    .tagging-list-name {
        font-size: 14px;
        font-weight: 700;
        color: #f4f7f8;
    }

    .tagging-list-meta {
        margin-top: 4px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.62);
    }

    .tagging-empty {
        padding: 18px 14px;
        color: rgba(255, 255, 255, 0.65);
        font-size: 13px;
    }

    .tagging-manager-layout {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        min-height: 0;
        height: 100%;
    }

    .tagging-folder-wrap {
        padding: 0 16px 14px;
    }

    .tagging-tree {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

    .tagging-tree-list {
        list-style: none;
        margin: 0;
        padding: 8px 0;
    }

    .tagging-tree-node {
        margin: 0;
        padding: 0;
    }

    .tagging-tree-row {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: 8px;
        align-items: center;
        min-height: 38px;
        padding: 0 12px;
        width: 100%;
        box-sizing: border-box;
        color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
    }

        .tagging-tree-row:hover {
            background: rgba(76, 103, 118, 0.22);
        }

        .tagging-tree-row.is-active {
            background: rgba(236, 255, 65, 0.12);
            color: #ecff41;
        }

        .tagging-tree-row.is-selected {
            box-shadow: inset 4px 0 0 #ecff41;
        }

    .tagging-tree-indent {
        width: 14px;
        height: 1px;
    }

    .tagging-tree-toggle {
        width: 24px;
        height: 24px;
        border: none;
        border-radius: 8px;
        background: rgba(55, 71, 79, 0.5);
        color: #fff;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
    }

        .tagging-tree-toggle.is-spacer {
            background: transparent;
            cursor: default;
        }

    .tagging-tree-icon {
        font-size: 17px;
        color: #ecff41;
    }

    .tagging-tree-label {
        display: block;
        min-width: 0;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tagging-manager-list {
        margin: 0 16px 16px;
        border: 1px solid rgba(85, 113, 132, 0.35);
        border-radius: 14px;
        background: rgba(9, 15, 21, 0.6);
        overflow: auto;
    }

    .tagging-manager-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        cursor: pointer;
    }

        .tagging-manager-row.is-selected {
            background: rgba(76, 103, 118, 0.38);
            box-shadow: inset 4px 0 0 #ecff41;
        }

        .tagging-manager-row.is-folder .tagging-list-name::before {
            content: "folder";
            font-family: "Material Icons";
            font-size: 16px;
            vertical-align: middle;
            margin-right: 6px;
            color: #ecff41;
        }

    .tagging-manager-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 16px 16px;
    }

    .tagging-inline-editor-backdrop {
        position: absolute;
        inset: 0;
        z-index: 4;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        background: #070c10;
    }

    .tagging-manager-overlay {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        background: #070c10;
    }

    .tagging-manager-shell {
        width: min(1120px, 100%);
        max-height: min(72vh, 720px);
        display: grid;
        grid-template-rows: auto 1fr;
        border: 1px solid rgba(112, 146, 168, 0.42);
        border-radius: 16px;
        overflow: hidden;
        background: linear-gradient(0deg, #27343d 0%, #1a252d 100%);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
    }

    .tagging-modal-shell.is-manager-standalone {
        min-width: 920px;
        grid-template-rows: 1fr;
        background: transparent;
        border: none;
        box-shadow: none;
    }

        .tagging-modal-shell.is-manager-standalone .tagging-modal-header,
        .tagging-modal-shell.is-manager-standalone .tagging-modal-body,
        .tagging-modal-shell.is-manager-standalone .tagging-modal-footer,
        .tagging-modal-shell.is-manager-standalone .tagging-modal-resize-handle {
            display: none;
        }

        .tagging-modal-shell.is-manager-standalone .tagging-manager-overlay {
            position: relative;
            inset: auto;
            z-index: auto;
            display: flex;
            padding: 0;
            background: transparent;
        }

        .tagging-modal-shell.is-manager-standalone .tagging-manager-shell {
            width: 100%;
            max-height: min(82vh, 760px);
        }

    .tagging-manager-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(112, 146, 168, 0.28);
        background: rgba(76, 103, 118, 0.26);
    }

    .tagging-manager-content {
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    }

    .tagging-manager-tree-panel {
        min-height: 0;
        display: grid;
        grid-template-rows: auto 1fr auto;
        border-right: 1px solid rgba(112, 146, 168, 0.2);
        background: rgba(9, 15, 21, 0.24);
    }

    .tagging-manager-main {
        min-height: 0;
        display: grid;
        grid-template-rows: auto 1fr auto;
    }

    .tagging-manager-tree-footer {
        padding: 12px 16px;
        border-top: 1px solid rgba(112, 146, 168, 0.16);
        background: rgba(76, 103, 118, 0.24);
        font-size: 13px;
        color: rgba(255, 255, 255, 0.76);
    }

    .tagging-manager-tree {
        min-height: 0;
        overflow: auto;
    }

        .tagging-manager-tree .tagging-tree-row.is-active {
            background: rgba(134, 168, 186, 0.2);
            color: #ffffff;
        }

    .tagging-manager-list {
        margin: 0 16px 16px;
        border: 1px solid rgba(85, 113, 132, 0.35);
        border-radius: 14px;
        background: rgba(9, 15, 21, 0.6);
        overflow: auto;
    }

    .tagging-manager-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        margin: 10px;
        padding: 14px 14px 12px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        cursor: pointer;
        transition: transform 0.12s ease, box-shadow 0.12s ease;
    }

        .tagging-manager-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
        }

        .tagging-manager-card.is-selected {
            box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.8), 0 10px 18px rgba(0, 0, 0, 0.18);
        }

    .tagging-manager-card-title {
        font-size: 16px;
        font-weight: 700;
        color: inherit;
    }

    .tagging-manager-card-subtitle {
        margin-top: 6px;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.84);
    }

    .tagging-manager-card-meta {
        margin-top: 4px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.72);
    }

    .tagging-manager-card-actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .tagging-manager-card-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border: none;
        border-radius: 999px;
        background: rgba(29, 36, 43, 0.88);
        color: #f7fbfd;
        cursor: pointer;
    }

    .tagging-manager-empty {
        padding: 20px 16px;
        color: rgba(255, 255, 255, 0.7);
        font-size: 13px;
    }

    .tagging-manager-actionbar {
        display: flex;
        justify-content: flex-end;
        gap: 14px;
        padding: 14px 16px 16px;
        border-top: 1px solid rgba(112, 146, 168, 0.16);
        background: rgba(76, 103, 118, 0.22);
    }

    .tagging-round-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border: none;
        border-radius: 999px;
        background: #b7ea00;
        color: #152026;
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22);
        cursor: pointer;
    }

        .tagging-round-action.is-danger {
            background: #ff5a57;
            color: #ffffff;
        }

    .tagging-inline-editor {
        width: min(480px, 100%);
        display: grid;
        gap: 12px;
        padding: 18px;
        border: 1px solid rgba(112, 146, 168, 0.42);
        border-radius: 16px;
        background: linear-gradient(0deg, #27343d 0%, #1a252d 100%);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
    }

    .tagging-inline-title {
        font-size: 18px;
        font-weight: 800;
        color: #f4f7f8;
    }

    .tagging-inline-subtitle {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.72);
    }

    .tagging-inline-label {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #d7e4ea;
    }

    .tagging-inline-editor-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding-top: 4px;
    }

    .tagging-modal-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 14px;
        border-top: 1px solid rgba(85, 113, 132, 0.28);
        background: rgba(11, 18, 22, 0.72);
    }

    .tagging-footer-status {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.72);
    }

    .tagging-footer-actions {
        display: flex;
        gap: 10px;
    }

    .tagging-modal-shell.is-dragging,
    .tagging-modal-shell.is-resizing {
        user-select: none;
    }

    .tagging-modal-resize-handle {
        position: absolute;
        top: 48px;
        right: 0;
        bottom: 0;
        width: 10px;
        cursor: ew-resize;
        background: linear-gradient(270deg, transparent 0%, rgba(112, 146, 168, 0.2) 100%);
    }

    @media (max-width: 1100px) {
        .tagging-modal-body {
            grid-template-columns: 280px minmax(0, 1fr);
            overflow: auto;
        }

        .tagging-modal-shell {
            max-height: 92vh;
        }
    }

    @media (max-width: 700px) {
        .tagging-modal-overlay {
            padding: 10px;
        }

        .tagging-modal-shell {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            width: 100% !important;
            min-width: 0;
            max-width: none;
            max-height: calc(100vh - 20px);
        }

        .tagging-modal-shell.is-manager-standalone {
            min-width: 0;
        }

        .tagging-modal-body,
        .tagging-toolbar,
        .tagging-manager-toolbar {
            grid-template-columns: 1fr;
        }

        .tagging-modal-header,
        .tagging-modal-footer {
            padding: 12px;
        }

        .tagging-tree-panel {
            max-height: 230px;
            border-right: none;
            border-bottom: 1px solid rgba(85, 113, 132, 0.35);
        }

        .tagging-footer-actions {
            width: 100%;
        }

            .tagging-footer-actions .tagging-button {
                flex: 1 1 auto;
            }

        .tagging-modal-resize-handle {
            display: none;
        }

        .tagging-manager-content {
            grid-template-columns: 1fr;
        }

        .tagging-manager-tree-panel {
            border-right: none;
            border-bottom: 1px solid rgba(112, 146, 168, 0.2);
            max-height: 260px;
        }

        .tagging-manager-actionbar {
            justify-content: center;
            flex-wrap: wrap;
        }
    }

    .menuiconfix {
        vertical-align: middle;
        margin-right: 5px;
    }
    /* Style the caret/arrow */
    .caret {
        cursor: pointer;
        user-select: none; /* Prevent text selection */
        margin-left: 10px;
        -webkit-appearance: none;
    }

        /* Create the caret/arrow with a unicode, and style it */
        .caret::before {
            content: "\25B6";
            color: rgb(255 255 255 / 87%);
            background: none;
            display: inline-block;
            margin-right: 6px;
            -webkit-appearance: none;
            /*            border: solid black;
                border-width: 0 3px 3px 0;
                padding: 3px;*/
        }

    /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
    .caret-down::before {
        transform: rotate(90deg);
        -webkit-transform: rotate(-90deg);
    }

    /* Hide the nested list */
    .nested {
        display: none;
    }

        /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
        .nested.active {
            display: block;
        }

    .favorite-menu {
        display: none;
        position: fixed;
        width: min(480px, calc(100vw - 24px));
        max-height: calc(100vh - 96px);
        box-sizing: border-box;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 10px;
        margin: 0;
        background: #29353a;
        border: 1px solid rgba(255,255,255,.12);
        box-shadow: 0 18px 48px rgba(0,0,0,.46);
        color: rgba(255,255,255,.92);
    }

    .favorite-menu.favorite-menu-open {
        display: block;
        opacity: 1 !important;
        z-index: 120001 !important;
        clip: auto !important;
    }

    .mdl-menu__container:has(#favorites_menu) {
        z-index: 120000 !important;
        overflow: visible !important;
    }

    .mdl-menu__container:has(#favorites_menu).is-visible,
    .mdl-menu__container.favorite-menu-container-open {
        position: fixed !important;
        visibility: visible !important;
        z-index: 120000 !important;
    }

    .mdl-menu__container:has(#favorites_menu) .mdl-menu__outline {
        background: transparent;
        box-shadow: none;
    }

    #favorites_menu.is-visible,
    .favorite-menu-container-open #favorites_menu {
        opacity: 1 !important;
        z-index: 120001 !important;
        clip: auto !important;
    }

    .favorite-menu,
    .favorite-menu ul {
        list-style: none;
    }

    .favorite-menu ul {
        margin: 0;
        padding-left: 18px;
        border-left: 1px solid rgba(255,255,255,.08);
    }

    .favorite-menu li {
        min-height: 0;
    }

    .favorite-menu-action {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 0 10px;
        border-radius: 6px;
        border-bottom: 1px solid rgba(205,220,57,.38);
        cursor: pointer;
        font-weight: 600;
    }

    .favorite-menu-action:hover {
        background: rgba(205,220,57,.12);
    }

    .favorite-menu-search {
        position: sticky;
        top: -10px;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 8px 0 10px;
        padding: 8px 10px;
        border-radius: 6px;
        background: #1b272d;
        border: 1px solid rgba(255,255,255,.12);
    }

    .favorite-menu-search .material-icons {
        color: #d5f800;
        font-size: 20px;
    }

    .favorite-menu-search input {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: white;
        font-size: 14px;
    }

    .favorite-menu-search input::placeholder {
        color: rgba(255,255,255,.48);
    }

    .favorite-folder-row {
        width: 100%;
        min-height: 40px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: rgba(255,255,255,.9);
        text-align: left;
        font: inherit;
    }

    .favorite-folder-row:hover {
        background: rgba(255,255,255,.08);
    }

    .favorite-folder-row::before {
        display: none;
        content: none;
    }

    .favorite-folder-main {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        justify-self: start;
    }

    .favorite-folder-icon {
        color: #d5f800;
        font-size: 18px;
        width: 22px;
        flex: 0 0 22px;
        text-align: center;
    }

    .favorite-folder-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
    }

    .favorite-folder-count {
        flex: 0 0 auto;
        min-width: 24px;
        padding: 2px 7px;
        border-radius: 999px;
        background: rgba(255,255,255,.1);
        color: rgba(255,255,255,.72);
        font-size: 12px;
        text-align: center;
    }

    .favorite-patient-card {
        width: 100%;
        display: grid;
        gap: 4px;
        margin: 3px 0 6px;
        padding: 8px 10px;
        border: 1px solid rgba(255,255,255,.1);
        border-left: 3px solid #d5f800;
        border-radius: 6px;
        background: #425a63;
        color: white;
        text-align: left;
        cursor: pointer;
        font: inherit;
        box-shadow: 0 8px 18px rgba(0,0,0,.18);
    }

    .favorite-patient-card:hover,
    .favorite-patient-card:focus {
        background: #4e6973;
        border-color: rgba(213,248,0,.72);
        outline: 0;
    }

    .favorite-patient-id {
        color: #ffffff;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.15;
    }

    .favorite-patient-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgba(255,255,255,.82);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
    }

    .favorite-patient-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
        color: rgba(255,255,255,.82);
        font-size: 12px;
        line-height: 1.2;
    }

    .favorite-patient-meta span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-width: 0;
    }

    .favorite-patient-comment {
        display: block;
        padding-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgba(255,255,255,.7);
        font-size: 12px;
        line-height: 1.25;
    }

    .favorite-patient-sex {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

    .favorite-empty-node {
        padding: 7px 10px 9px 34px;
        color: rgba(255,255,255,.44);
        font-size: 12px;
    }

    .favorite-search-hidden {
        display: none !important;
    }

    @media (max-width: 640px) {
        .mdl-menu__container:has(#favorites_menu).is-visible,
        .mdl-menu__container.favorite-menu-container-open {
            position: fixed !important;
            left: 0 !important;
            top: 42px !important;
            right: auto !important;
            bottom: auto !important;
            width: 100vw !important;
            height: calc(100vh - 42px) !important;
            z-index: 120000 !important;
        }

        #favorites_menu.favorite-menu {
            position: fixed !important;
            right: auto !important;
            width: 100% !important;
            height: calc(100vh - 42px) !important;
            max-height: calc(100vh - 42px) !important;
            border-radius: 0 0 10px 10px;
            padding: 12px 12px 72px;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }

        #favorites_menu.favorite-menu ul {
            padding-left: 8px;
        }

        .favorite-menu-action,
        .favorite-folder-row {
            min-height: 48px;
        }

        .favorite-patient-card {
            min-height: 60px;
            padding: 10px;
        }
    }



    #div_currentpatient {
    }

    #div_header {
    }

    #div_klinik {
    }

    #div_fallnummer {
    }

    #result {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        border-top: 1px solid rgba(255,255,255, 0.12);
    }


    #div_header2 {
        height: 30px;
    }

    #div_option_text {
    }



    #div_checkup {
    }


    .fileupload-buttonbar {
        margin-left: 0px;
    }

    .files {
    }

    .template-download1 {
        width: 90px;
    }

    .template-download2 {
    }

    .template-download3 {
    }

    .template-download4 {
    }





    :root {
        --mdc-theme-primary: #4F9593; /* this changes the color of all buttons */
        --mdc-theme-on-primary: #ffffff; /* this is the text color on the buttons */
        --mdc-theme-accent: rgb(238,255,65);
        --mdc-theme-secondary: #ffffff;
        --mdc-theme-primary, #6200ee);
    }

    label.mdc-floating-label {
        color: #808080;
    }

    label.mdc-floating-label--float-above {
        color: #808080;
    }

    label.mdc-floating-label--shake {
        color: #808080;
    }



    ul {
        list-style: none; /* Remove default bullets */
        color: white;
    }

        ul li::before {
            color: white;
        }


    .patientresults {
        /*height: 45px;*/
        width: inherit;
        left: 0px;
        position: relative;
        z-index: 1;
        top: 0;
        overflow-x: hidden;
        padding-bottom: 6px;
        padding-top: 6px;
        padding-left: 10px;
        margin-left: 2px;
        margin-top: 0px;
        margin-right: 2px;
        margin-bottom: 0px;
        background-color: #323232;
        color: white;
        border-bottom-color: #455a64;
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }

    .div_patientheader {
        display: inline-flex;
        align-items: center;
    }



    .patientresults:hover {
        /*opacity: .5;*/
        background-color: #546e7a;
    }

    .patientresultselementssearch {
        width: 50px;
        display: inline-block;
        font-size: 0.85rem;
    }

    #div_patient_results .patientresults,
    #div_patient_results .patientresultselementssearch,
    #div_patient_results .patientresults .material-icons {
        cursor: pointer;
    }

    #div_patient_results .patientresults.is-selected {
        background:
            linear-gradient(270deg, rgba(27, 220, 235, .22) 0%, rgba(25, 51, 67, .96) 42%, rgba(18, 32, 44, .96) 100%);
        box-shadow: inset 4px 0 0 #21ddeb, inset 0 0 0 1px rgba(33, 221, 235, .24);
        color: #f7fcff;
    }

    #div_patient_results .patientresults.is-selected .patientresultselementssearch,
    #div_patient_results .patientresults.is-selected .material-icons {
        color: #f7fcff;
        font-weight: 700;
    }


    .gallery-figcaption-right:hover {
        /*        background-color: rgb(238 255 65);*/
        cursor: pointer;
    }



    #fader {
        opacity: 0.5;
        background: black;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: none;
        z-index: 1;
    }

    #fadertext {
        z-index: 3;
        color: white;
        font-size: 18px;
    }



    .tag-item {
        background-color: rgb(238 255 65);
        color: black;
        border-radius: 2px;
        height: 20px;
        width: 103px;
        margin-left: 5px;
        padding: 3px;
    }

    .notvis {
        display: none;
    }

    .security-admin-grid {
        display: grid;
        grid-template-columns: clamp(248px, 19vw, 310px) minmax(0, 1fr);
        gap: 10px;
        height: 100%;
        min-height: 0;
        min-width: 0;
    }

    .security-card {
        background: #2f2f2f;
        border: 1px solid #546e7a;
        border-radius: 6px;
        color: #fff;
        min-width: 0;
        padding: 12px;
        scrollbar-gutter: stable;
    }

    .security-title {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .email-template-editor {
        min-height: 620px;
    }

    .email-template-editor__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 16px;
    }

    .email-template-editor__form,
    .email-template-editor__side {
        border: 1px solid #455a64;
        border-radius: 6px;
        background: #263238;
        padding: 16px;
    }

    .email-template-editor__actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 16px;
    }

    .email-template-editor__hint {
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.74);
    }

    .email-template-editor__placeholder-list {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .email-template-editor__placeholder-item {
        padding: 12px;
        border: 1px solid #455a64;
        border-radius: 6px;
        background: #1c252b;
    }

    .email-template-editor__placeholder-token {
        font-family: "Consolas", "Courier New", monospace;
        font-size: 12px;
        font-weight: 700;
        color: #efff41;
    }

    .email-template-editor__placeholder-description {
        margin-top: 6px;
        font-size: 12px;
        line-height: 1.45;
        color: rgba(255, 255, 255, 0.8);
    }

    @media (max-width: 1100px) {
        .email-template-editor__grid {
            grid-template-columns: 1fr;
        }
    }

    .security-groups-list {
        max-height: 455px;
        overflow-y: auto;
        border: 1px solid #455a64;
        border-radius: 4px;
        background: #263238;
    }

    .security-group-row {
        padding: 8px 10px;
        border-bottom: 1px solid #455a64;
        cursor: pointer;
        font-size: 13px;
    }

        .security-group-row:hover {
            background: #455a64;
        }

        .security-group-row.active {
            background: #4F9593;
            color: #fff;
        }

    .security-group-sub {
        opacity: 0.8;
        font-size: 11px;
    }

    .security-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 12px;
        width: 100%;
    }

    .security-form-grid .mdl-textfield {
        display: flex;
        flex-direction: column;
        margin: 0;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
        padding: 0;
        width: 100%;
    }

    .security-form-grid .mdl-textfield__label {
        color: rgba(255, 255, 255, 0.72);
        font-size: 12px;
        line-height: 1.2;
        order: -1;
        overflow: hidden;
        padding-bottom: 4px;
        position: static;
        text-overflow: ellipsis;
        transform: none !important;
        white-space: nowrap;
        width: 100%;
    }

    .security-form-grid .mdl-textfield__label:after {
        display: none;
    }

    .security-form-grid .mdl-textfield__input {
        border-bottom-color: rgba(255, 255, 255, 0.24);
        box-sizing: border-box;
        color: #fff;
        min-width: 0;
        padding: 6px 0;
        width: 100%;
    }

    .security-rights-list {
        margin-top: 8px;
        max-height: 300px;
        overflow-y: auto;
        border: 1px solid #455a64;
        border-radius: 4px;
        background: #263238;
        padding: 8px;
    }

    .security-right-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 4px;
        border-bottom: 1px solid #37474f;
    }

        .security-right-row:last-child {
            border-bottom: none;
        }

    .security-right-key {
        min-width: 180px;
        font-size: 12px;
        opacity: 0.9;
    }

    .security-right-desc {
        font-size: 12px;
        opacity: 0.8;
    }

    .security-actions {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .ui-dialog.security-management-dialog {
        box-sizing: border-box;
        min-width: 0 !important;
        z-index: 1200 !important;
    }

    .security-management-dialog .ui-dialog-content {
        box-sizing: border-box;
        min-height: 0 !important;
        overflow: hidden;
        padding: 10px;
    }

    .security-management-dialog .ui-dialog-titlebar {
        background: #4f6973;
        color: #fff;
    }

    .security-management-dialog .ui-dialog-titlebar-close {
        background: rgb(238,255,65) !important;
        color: #111 !important;
        border-radius: 8px;
    }

    .security-management-dialog .security-admin-grid {
        height: 100%;
        min-height: 0;
        max-height: none;
        overflow: hidden;
    }

    .security-management-dialog .security-card {
        min-height: 0;
        overflow: auto;
    }

    .security-management-dialog .security-card:first-child {
        max-width: 310px;
    }

    .security-management-dialog .security-object-card {
        display: flex;
        flex-direction: column;
    }

    .security-management-dialog .security-object-card .security-groups-list {
        flex: 1 1 auto;
        max-height: none;
        min-height: 180px;
    }

    .security-management-dialog .security-editor-card {
        overscroll-behavior: contain;
    }

    .security-editor-card > .security-form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .security-user-admin-section {
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid rgba(84, 110, 122, 0.55);
    }

    details.security-collapse.security-user-admin-section {
        border-top: none;
        padding-top: 0;
    }

    details.security-collapse {
        border: 1px solid #455a64;
        border-radius: 6px;
        background: #2f2f2f;
        padding: 0;
    }

    details.security-collapse[open] {
        padding-bottom: 12px;
    }

    details.security-collapse > summary.security-collapse-summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        color: #ffffff;
        user-select: none;
    }

    details.security-collapse > summary.security-collapse-summary::-webkit-details-marker {
        display: none;
    }

    details.security-collapse > summary.security-collapse-summary:hover {
        background: rgba(69, 90, 100, 0.35);
    }

    .security-collapse-chevron {
        font-size: 22px;
        line-height: 1;
        transition: transform 160ms ease;
        color: rgba(255, 255, 255, 0.78);
    }

    details.security-collapse[open] > summary .security-collapse-chevron {
        transform: rotate(180deg);
        color: rgb(238, 255, 65);
    }

    .security-collapse-title {
        font-size: 15px;
        font-weight: 600;
        flex: 1;
    }

    .security-collapse-hint {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.55);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    details.security-collapse > .security-user-admin-grid {
        padding: 12px 14px 0;
    }

    .security-user-admin-grid {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        min-width: 0;
    }

    .security-user-panel {
        border: 1px solid #455a64;
        border-radius: 4px;
        background: #263238;
        min-width: 0;
        padding: 10px;
    }

    .security-user-toolbar {
        display: flex;
        gap: 8px;
        margin-bottom: 10px;
    }

    .security-user-toolbar .mdl-textfield__input {
        border-bottom-color: rgba(176, 190, 197, 0.38);
        color: #fff;
        height: 36px;
        padding: 6px 8px;
    }

    .security-local-user-list {
        max-height: 260px;
        overflow-y: auto;
        border: 1px solid #37474f;
        border-radius: 4px;
        background: rgba(14, 23, 28, 0.8);
    }

    .security-local-user-row {
        padding: 10px 12px;
        border-bottom: 1px solid rgba(69, 90, 100, 0.75);
        cursor: pointer;
    }

    .security-local-user-row:last-child {
        border-bottom: none;
    }

    .security-local-user-row.active {
        background: rgba(236, 255, 65, 0.12);
        box-shadow: inset 0 0 0 1px rgba(236, 255, 65, 0.38);
    }

    .security-local-user-title {
        font-weight: 600;
        color: #fff;
    }

    .security-local-user-sub {
        margin-top: 4px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.68);
    }

    .security-local-user-meta {
        margin-top: 6px;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.56);
    }

    .security-local-user-details {
        margin-top: 10px;
        padding: 10px 12px;
        border: 1px solid #455a64;
        border-radius: 4px;
        background: rgba(18, 29, 35, 0.82);
        min-height: 86px;
        font-size: 12px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.88);
    }

    .security-local-user-link {
        display: block;
        margin-top: 6px;
        color: #ecff41;
        word-break: break-all;
    }

    .security-local-user-toggle-row {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        margin-top: 8px;
        margin-bottom: 8px;
        color: rgba(255, 255, 255, 0.82);
    }

    .security-local-user-toggle-row label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
    }

    .twofactor-actions {
        flex-wrap: wrap;
        margin-top: 14px;
    }

    .twofactor-actions .mdl-button,
    .twofactor-actions .mdl-button.mdl-button--raised {
        background: #607d8b !important;
        color: #ffffff !important;
        border: 1px solid #78909c !important;
        box-shadow: none !important;
        opacity: 1 !important;
        font-weight: 600;
    }

    .twofactor-actions .mdl-button:hover,
    .twofactor-actions .mdl-button.mdl-button--raised:hover {
        background: #6f8c98 !important;
        color: #ffffff !important;
    }

    .twofactor-actions .twofactor-button-primary,
    .twofactor-actions .twofactor-button-primary.mdl-button--raised {
        background: rgb(238,255,65) !important;
        color: #1f2a30 !important;
        border-color: rgb(238,255,65) !important;
        font-weight: 700;
    }

    .twofactor-actions .twofactor-button-primary:hover,
    .twofactor-actions .twofactor-button-primary.mdl-button--raised:hover {
        background: #f3ff73 !important;
        color: #1f2a30 !important;
    }

    .twofactor-actions .twofactor-button-danger,
    .twofactor-actions .twofactor-button-danger.mdl-button--raised {
        background: #8a4141 !important;
        color: #ffffff !important;
        border-color: #a65555 !important;
    }

    .twofactor-actions .twofactor-button-danger:hover,
    .twofactor-actions .twofactor-button-danger.mdl-button--raised:hover {
        background: #9a4a4a !important;
        color: #ffffff !important;
    }

    .twofactor-actions .twofactor-button-secondary,
    .twofactor-actions .twofactor-button-secondary.mdl-button--raised {
        background: #4f6672 !important;
        color: #ffffff !important;
        border-color: #6f8792 !important;
    }

    .twofactor-actions .twofactor-button-secondary:hover,
    .twofactor-actions .twofactor-button-secondary.mdl-button--raised:hover {
        background: #5d7480 !important;
        color: #ffffff !important;
    }

    .twofactor-actions .mdl-button[disabled],
    .twofactor-actions .mdl-button.mdl-button--disabled,
    .twofactor-actions .mdl-button.mdl-button--disabled:hover {
        background: #3a464d !important;
        color: #99a8af !important;
        border-color: #53646d !important;
        opacity: 0.55;
        cursor: not-allowed;
    }

    .security-local-auth {
        margin-top: 14px;
        padding: 12px;
        border: 1px solid #455a64;
        border-radius: 6px;
        background: #263238;
    }

    .security-local-auth-status {
        font-size: 12px;
        line-height: 1.6;
        opacity: 0.92;
    }

    .security-local-auth-status strong {
        color: rgb(238,255,65);
    }

    .twofactor-shell {
        color: #ffffff;
    }

    .twofactor-status {
        padding: 12px;
        border-radius: 6px;
        border: 1px solid #455a64;
        background: #263238;
        line-height: 1.55;
        margin-bottom: 12px;
    }

    .twofactor-status strong {
        color: rgb(238,255,65);
    }

    .twofactor-setup {
        display: grid;
        grid-template-columns: 210px 1fr;
        gap: 16px;
        align-items: start;
    }

    .twofactor-qr-wrap {
        border: 1px solid #455a64;
        border-radius: 6px;
        background: #1f2a30;
        padding: 12px;
        text-align: center;
    }

    .twofactor-qr-wrap img {
        width: 100%;
        max-width: 180px;
        height: auto;
        border-radius: 4px;
        background: #ffffff;
        padding: 8px;
    }

    .twofactor-key {
        margin-top: 10px;
        padding: 10px;
        border-radius: 6px;
        background: #11181d;
        border: 1px dashed #546e7a;
        font-family: Consolas, monospace;
        font-size: 13px;
        letter-spacing: 0.08em;
        word-break: break-word;
    }

    .twofactor-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .twofactor-note {
        font-size: 12px;
        opacity: 0.82;
        line-height: 1.55;
    }

    .twofactor-recovery {
        margin-top: 16px;
        padding: 14px;
        border-radius: 8px;
        border: 1px solid #455a64;
        background: #1a242b;
    }

    .twofactor-recovery-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
    }

    .twofactor-recovery-count {
        font-size: 12px;
        color: rgb(238,255,65);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .quick-preview-dynamic-time[hidden], .quick-preview-dynamic-time:not([open]) > .quick-preview-dynamic-time-panel { display: none; }
    .quick-preview-dynamic-time summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; list-style: none; cursor: pointer; border: 1px solid #718096; border-radius: 4px; }
    .quick-preview-dynamic-time summary::-webkit-details-marker { display: none; }
    .quick-preview-dynamic-time summary:focus-visible { outline: 2px solid #63b3ed; outline-offset: 2px; }
    .quick-preview-dynamic-time-panel { position: fixed; z-index: 160; top: 54px; right: 12px; width: min(380px, calc(100vw - 24px)); padding: 12px; display: grid; gap: 8px; background: #17212b; color: #f6fbfd; border: 1px solid #718096; border-radius: 4px; box-sizing: border-box; }
    .quick-preview-dynamic-time-panel input[type="range"] { width: 100%; min-height: 44px; margin: 0; }
    .quick-preview-dynamic-time-panel output { font-size: 14px; overflow-wrap: anywhere; }
    .quick-preview-dynamic-time-panel button, .quick-preview-dynamic-time-panel select { min-height: 44px; }
    .quick-preview-dynamic-time-panel button { color: #f6fbfd; background: #263241; border: 1px solid #718096; border-radius: 4px; }
    .quick-preview-dynamic-time-panel button:focus-visible { outline: 2px solid #63b3ed; outline-offset: 2px; }
    .quick-preview-dynamic-time-panel { max-height: calc(100dvh - 66px); overflow-y: auto; }
    #quick_preview_dynamic_curve_result svg { width: 100%; height: 130px; background: #101923; }
    #quick_preview_dynamic_curve_result table { width: 100%; font-size: 12px; text-align: right; }
    #quick_preview_dynamic_curve_result p { font-size: 13px; overflow-wrap: anywhere; }
    @media (max-width: 900px) { body:has(.quick-preview-overlay.is-open) .portal-footer { display: none; } }
    .quick-preview-dynamic-loop { display: flex; align-items: center; gap: 8px; min-height: 44px; }
    .quick-preview-dynamic-volume { display: flex; align-items: center; gap: 6px; max-width: 100%; }
    .quick-preview-dynamic-volume[hidden] { display: none; }
    #quick_preview_nifti_group, #quick_preview_gpu_retry { min-width: 44px; min-height: 44px; }
    #quick_preview_centerline { min-width: 44px; min-height: 44px; }
    .quick-preview-centerline-panel { position:absolute; right:12px; top:56px; z-index:95; width:300px; max-width:calc(100% - 24px); max-height:calc(100% - 68px); box-sizing:border-box; overflow:auto; padding:10px; border:1px solid #506778; border-radius:8px; background:#172330; color:#eef5fa; box-shadow:0 3px 12px #0008; }
    .quick-preview-centerline-panel[hidden] { display:none; }
    .quick-preview-centerline-panel { overflow-anchor:none; }
    .quick-preview-centerline-panel > .quick-preview-centerline-actions:first-child { position:sticky; top:-10px; z-index:2; background:#172330; padding:6px 0; }
    .quick-preview-centerline-actions { display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
    .quick-preview-centerline-actions strong { flex:1; }
    .quick-preview-centerline-panel button { min-width:44px; min-height:44px; background:#263c4f; color:inherit; border:1px solid #658097; border-radius:5px; padding:5px 9px; }
    .quick-preview-centerline-panel button[aria-pressed="true"] { border-color:#7de3ff; background:#315971; }
    .quick-preview-centerline-panel button:disabled { opacity:.45; }
    .quick-preview-centerline-panel select { box-sizing:border-box; width:100%; min-height:44px; background:#172330; color:inherit; margin-bottom:6px; }
    .quick-preview-centerline-panel select[size] { min-height:88px; }
    .quick-preview-centerline-panel p { margin:6px 0; font-size:12px; line-height:1.4; }
    .quick-preview-cpr-controls label { display:flex; align-items:center; justify-content:space-between; gap:6px; margin:6px 0; }
    .quick-preview-cpr-controls input, .quick-preview-cpr-controls select { box-sizing:border-box; width:130px; min-height:44px; background:#172330; color:inherit; border:1px solid #658097; border-radius:4px; padding:5px; margin:0; }
    .quick-preview-cpr-canvas { display:block; height:auto; max-width:100%; margin:8px auto; background:#080c12; cursor:crosshair; }
    .quick-preview-cpr-canvas[hidden] { display:none; }
    .quick-preview-centerline-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:32; }
    .quick-preview-nifti-selection { box-sizing: border-box; width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; color: #edf2f7; background: #202936; border: 1px solid #718096; border-radius: 8px; padding: 20px; }
    .quick-preview-nifti-selection::backdrop { background: rgba(0, 0, 0, .65); }
    .quick-preview-nifti-selection h2 { margin: 0 0 12px; font-size: 20px; }
    .quick-preview-nifti-selection label { display: grid; grid-template-columns: 1fr 90px 1fr; align-items: center; gap: 10px; margin: 10px 0; }
    .quick-preview-nifti-selection input, .quick-preview-nifti-selection button { box-sizing: border-box; min-height: 44px; min-width: 44px; color: inherit; background: #283748; border: 1px solid #a0aec0; border-radius: 4px; padding: 8px; font: inherit; }
    .quick-preview-nifti-selection input { width: 90px; }
    .quick-preview-nifti-selection button:disabled { opacity: .45; }
    .quick-preview-nifti-selection :focus-visible { outline: 2px solid #63b3ed; outline-offset: 2px; }
    .quick-preview-nifti-selection-actions { display: flex; justify-content: flex-end; gap: 12px; }
    .quick-preview-dynamic-volume select { min-height: 44px; max-width: min(360px, 55vw); color: inherit; background: #202936; border: 1px solid #718096; border-radius: 4px; }
    .quick-preview-dynamic-volume select:focus-visible { outline: 2px solid #63b3ed; outline-offset: 2px; }
    .quick-preview-dynamic-volume label, .quick-preview-dynamic-volume [role="status"] { font-size: 12px; }

    .quick-preview-geometry-warning {
        position: absolute;
        z-index: 13;
        top: 28px;
        left: 50%;
        width: min(620px, calc(100% - 32px));
        transform: translateX(-50%);
        border: 1px solid rgba(255, 193, 7, 0.72);
        border-radius: 5px;
        background: rgba(35, 27, 4, 0.94);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
        color: #fff4c2;
    }

    .quick-preview-geometry-warning.is-critical {
        border-color: rgba(255, 82, 82, 0.86);
        background: rgba(52, 10, 12, 0.95);
        color: #ffe2e2;
    }

    .quick-preview-geometry-warning-toggle {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 34px;
        gap: 8px;
        padding: 5px 9px;
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
        font: inherit;
        font-size: 11px;
        font-weight: 800;
        text-align: left;
    }

    .quick-preview-geometry-warning-toggle .material-icons {
        font-size: 18px;
    }

    .quick-preview-geometry-warning-toggle::after {
        content: "";
        margin-left: auto;
        width: 7px;
        height: 7px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
    }

    .quick-preview-geometry-warning-toggle[aria-expanded="true"]::after {
        transform: rotate(225deg);
    }

    .quick-preview-geometry-warning-details {
        display: grid;
        gap: 6px;
        padding: 7px 10px 10px 35px;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
        font-size: 11px;
        line-height: 1.35;
    }

    .quick-preview-geometry-warning-details[hidden] {
        display: none;
    }

    .quick-preview-geometry-warning-item strong {
        display: block;
        color: #fff;
    }

    .quick-preview-geometry-warning-safety {
        color: rgba(255, 255, 255, 0.72);
        font-style: italic;
    }

    .twofactor-recovery-codes {
        width: 100%;
        min-height: 148px;
        margin-top: 10px;
        border-radius: 6px;
        border: 1px dashed #607d8b;
        background: #11181d;
        color: #ffffff;
        padding: 12px;
        resize: vertical;
        font-family: Consolas, monospace;
        font-size: 13px;
        line-height: 1.55;
    }

    @media only screen and (max-width: 900px) {
        .twofactor-setup {
            grid-template-columns: 1fr;
        }
    }

    .security-ad-toolbar {
        display: grid;
        grid-template-columns: 1fr 150px auto;
        gap: 8px;
        align-items: center;
        margin-bottom: 8px;
    }

    .security-ad-select {
        width: 100%;
        height: 36px;
        background: #263238;
        color: #ffffff;
        border: 1px solid #455a64;
        border-radius: 4px;
        padding: 0 8px;
    }

    .security-ad-results {
        margin-bottom: 10px;
        max-height: 170px;
        overflow-y: auto;
        border: 1px solid #455a64;
        border-radius: 4px;
        background: #263238;
    }

    .security-ad-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        align-items: center;
        padding: 8px 10px;
        border-bottom: 1px solid #37474f;
        cursor: pointer;
    }

        .security-ad-row:last-child {
            border-bottom: none;
        }

        .security-ad-row:hover {
            background: #34454f;
        }

    .security-ad-main {
        font-size: 13px;
        line-height: 1.25;
    }

    .security-ad-sub {
        opacity: 0.75;
        font-size: 11px;
    }

    .security-ad-empty {
        padding: 8px 10px;
        opacity: 0.85;
        font-size: 12px;
    }

    .security-ad-tag {
        display: inline-block;
        min-width: 56px;
        text-align: center;
        font-size: 11px;
        border-radius: 3px;
        padding: 2px 6px;
        margin-right: 6px;
        background: #455a64;
        color: #ffffff;
        text-transform: uppercase;
    }

        .security-ad-tag.user {
            background: #4F9593;
        }

    .security-ad-apply,
    #security_btn_ad_search {
        background: rgb(238,255,65) !important;
        color: #111111 !important;
        border: 1px solid rgba(238, 255, 65, 0.8) !important;
        min-width: 78px;
    }

        .security-ad-apply:hover,
        .security-ad-apply:focus,
        #security_btn_ad_search:hover,
        #security_btn_ad_search:focus {
            background: rgb(230,245,61) !important;
            color: #000000 !important;
        }

    .security-management-dialog .mdl-button {
        min-height: 38px;
        line-height: 1.2;
        white-space: normal;
    }

    .security-management-dialog :is(button, input, select, summary):focus-visible {
        outline: 2px solid rgb(238, 255, 65);
        outline-offset: 2px;
    }

    @media only screen and (max-width: 1200px) {
        .security-admin-grid {
            grid-template-columns: 230px minmax(0, 1fr);
            gap: 8px;
        }

        .security-editor-card > .security-form-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .security-user-admin-grid {
            grid-template-columns: 1fr;
        }

        .security-local-user-list {
            min-height: 0;
            max-height: 220px;
        }
    }

    @media only screen and (max-width: 820px) {
        .security-admin-grid {
            grid-template-columns: 1fr;
            grid-template-rows: minmax(145px, 28vh) minmax(0, 1fr);
        }

        .security-management-dialog .security-card:first-child {
            max-width: none;
        }

        .security-management-dialog .security-object-card .security-groups-list {
            min-height: 100px;
        }

        .security-management-dialog .security-editor-card {
            overflow-x: hidden;
            overflow-y: auto;
        }

        .security-ad-toolbar {
            grid-template-columns: minmax(0, 1fr) 145px;
        }

        .security-ad-toolbar #security_btn_ad_search {
            grid-column: 1 / -1;
        }

        .security-collapse-hint {
            max-width: 42%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    @media only screen and (max-width: 640px) {
        .ui-dialog.security-management-dialog {
            box-sizing: border-box;
            left: 6px !important;
            margin: 0 !important;
            max-height: calc(100dvh - 12px) !important;
            max-width: calc(100dvw - 12px) !important;
            min-width: 0 !important;
            position: fixed !important;
            top: 6px !important;
            width: calc(100dvw - 12px) !important;
        }

        .security-management-dialog .ui-dialog-titlebar {
            min-height: 42px;
            padding: 9px 10px;
        }

        .security-management-dialog .ui-dialog-title {
            max-width: calc(100dvw - 80px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .security-management-dialog .ui-dialog-content {
            overflow-x: hidden;
            overflow-y: auto;
            padding: 6px;
        }

        .security-management-dialog .security-admin-grid {
            display: flex;
            flex-direction: column;
            height: auto;
            max-height: none;
            overflow: visible;
        }

        .security-management-dialog .security-card,
        .security-management-dialog .security-editor-card {
            overflow: visible;
            padding: 10px;
        }

        .security-management-dialog .security-object-card {
            flex: 0 0 auto;
        }

        .security-management-dialog .security-object-card .security-groups-list {
            flex: none;
            max-height: 160px;
            min-height: 96px;
        }

        .security-editor-card > .security-form-grid,
        .security-form-grid,
        .security-user-admin-grid {
            grid-template-columns: 1fr;
        }

        .security-ad-toolbar {
            grid-template-columns: 1fr;
        }

        .security-ad-toolbar #security_btn_ad_search {
            grid-column: auto;
        }

        .security-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            width: 100%;
        }

        .security-actions .mdl-button {
            min-width: 0;
            width: 100%;
        }

        details.security-collapse > summary.security-collapse-summary {
            gap: 6px;
            min-height: 44px;
            padding: 8px 10px;
        }

        details.security-collapse > .security-user-admin-grid {
            padding: 8px 8px 0;
        }

        .security-collapse-hint {
            display: none;
        }

        .security-collapse-title {
            font-size: 14px;
        }

        .security-local-user-toggle-row {
            align-items: flex-start;
            flex-direction: column;
            gap: 10px;
        }

    }

    @media only screen and (max-width: 380px) {
        .security-actions {
            grid-template-columns: 1fr;
        }
    }

    /* Zugriffsverwaltung: klare Master-Detail-Struktur ohne verschachtelte Verwaltung. */
    .security-management-dialog .security-admin-grid {
        grid-template-columns: clamp(290px, 24vw, 360px) minmax(0, 1fr);
        gap: 12px;
    }

    .security-management-dialog .security-card:first-child {
        max-width: 360px;
    }

    .security-section-heading {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
    }

    .security-section-heading .security-title {
        margin-bottom: 3px;
    }

    .security-section-subtitle {
        color: rgba(226, 238, 243, .68);
        font-size: 12px;
        line-height: 1.45;
    }

    .security-identity-toolbar {
        display: grid;
        gap: 8px;
        margin-bottom: 10px;
    }

    .security-compact-field {
        display: grid;
        gap: 4px;
        color: rgba(226, 238, 243, .7);
        font-size: 11px;
    }

    .security-compact-field input,
    .security-right-filter input {
        box-sizing: border-box;
        width: 100%;
        height: 36px;
        padding: 6px 10px;
        border: 1px solid #526b77;
        border-radius: 5px;
        background: #17242b;
        color: #fff;
    }

    .security-management-dialog .security-object-card .security-groups-list {
        min-height: 180px;
    }

    .security-sidebar-actions {
        display: grid;
        margin-top: 10px;
    }

    .security-sidebar-actions .mdl-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        width: 100%;
    }

    .security-directory-add {
        margin-top: 10px;
        border: 1px solid #455a64;
        border-radius: 5px;
        background: #233139;
    }

    .security-directory-add > summary {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        box-sizing: border-box;
        padding: 8px 10px;
        cursor: pointer;
        list-style: none;
        font-size: 12px;
        font-weight: 600;
    }

    .security-directory-add > summary::-webkit-details-marker {
        display: none;
    }

    .security-directory-add > summary .material-icons {
        color: #efff41;
        font-size: 19px;
    }

    .security-directory-add-body {
        padding: 0 8px 8px;
        border-top: 1px solid rgba(84, 110, 122, .5);
    }

    .security-directory-add .security-ad-toolbar {
        grid-template-columns: 1fr;
        margin-top: 8px;
    }

    .security-directory-add .security-ad-results {
        max-height: 210px;
        margin-bottom: 0;
    }

    .security-group-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 8px;
        width: 100%;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        background: transparent;
        color: inherit;
        font-family: inherit;
        text-align: left;
        padding: 10px;
    }

    .security-group-name {
        overflow: hidden;
        font-size: 13px;
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .quick-preview-rwvm-selector {
        display: none;
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        padding: 7px 8px;
        border-bottom: 1px solid rgba(90, 214, 255, 0.18);
        background: rgba(3, 13, 18, 0.9);
    }

    .quick-preview-rwvm-selector.is-visible {
        display: grid;
    }

    .quick-preview-rwvm-selector label {
        color: rgba(246, 251, 253, 0.88);
        font-size: 11px;
        font-weight: 700;
    }

    .quick-preview-rwvm-selector select {
        width: 100%;
        min-width: 0;
        height: 32px;
        box-sizing: border-box;
        border: 1px solid rgba(238, 255, 65, 0.5);
        border-radius: 4px;
        outline: none;
        background: #071116;
        color: #f2f8fa;
        font-size: 11px;
    }

    .quick-preview-rwvm-selector select:focus-visible {
        border-color: #eeff41;
        box-shadow: 0 0 0 2px rgba(238, 255, 65, 0.2);
    }

    .quick-preview-rwvm-status {
        min-height: 14px;
        color: #eeff41;
        font-size: 10px;
        line-height: 1.35;
    }

    .quick-preview-rwvm-status.is-selected {
        color: rgba(213, 229, 235, 0.72);
    }

    .security-group-sub {
        grid-column: 1 / -1;
    }

    .security-identity-badge,
    .security-list-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 20px;
        padding: 1px 7px;
        border: 1px solid #607d8b;
        border-radius: 999px;
        background: #334650;
        color: rgba(241, 248, 251, .9);
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

    .security-list-badge.local,
    .security-identity-badge.local {
        border-color: rgba(238, 255, 65, .5);
        background: rgba(238, 255, 65, .12);
        color: #efff41;
    }

    .security-view-mode {
        padding: 2px 7px;
        border-radius: 999px;
        background: rgba(255, 193, 7, .14);
        color: #ffd978;
        font-size: 10px;
        font-weight: 700;
    }

    .quick-preview-voi-menu {
        min-width: 270px;
    }

    .quick-preview-voi-value {
        margin-left: auto;
        color: rgba(246, 251, 253, 0.62);
        font-size: 10px;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .quick-preview-voi-menu .quick-preview-toolbutton.is-active .quick-preview-voi-value {
        color: #eeff41;
    }

    .quick-preview-voi-section {
        margin: 6px 8px 3px;
        padding-top: 6px;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        color: rgba(246, 251, 253, 0.66);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .08em;
    }

    .quick-preview-voi-menu .quick-preview-toolbutton:disabled {
        cursor: not-allowed;
        opacity: .52;
    }

    .security-editor-card {
        position: relative;
        padding: 0;
        background: #202b31;
    }

    .security-editor-empty {
        display: flex;
        min-height: 100%;
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 28px;
        color: rgba(224, 237, 243, .64);
        text-align: center;
    }

    .security-editor-empty .material-icons {
        color: rgba(238, 255, 65, .75);
        font-size: 46px;
    }

    .security-editor-empty strong {
        color: #fff;
        font-size: 16px;
    }

    .security-editor-content {
        min-height: 100%;
    }

    .security-identity-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        border-bottom: 1px solid #455a64;
        background: #263840;
    }

    .security-identity-icon {
        display: grid;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        place-items: center;
        border-radius: 50%;
        background: rgba(238, 255, 65, .12);
        color: #efff41;
    }

    .security-identity-heading {
        min-width: 0;
    }

    .security-identity-heading-line {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .security-identity-heading h2 {
        max-width: 100%;
        margin: 0;
        overflow: hidden;
        color: #fff;
        font-size: 18px;
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .security-editor-section,
    .security-technical-details,
    .security-local-auth {
        margin: 12px 14px 0;
        padding: 13px;
        border: 1px solid #455a64;
        border-radius: 6px;
        background: #263238;
    }

    .security-technical-details > summary {
        cursor: pointer;
        color: rgba(232, 241, 245, .76);
        font-size: 12px;
        font-weight: 600;
    }

    .security-technical-details[open] > summary {
        margin-bottom: 12px;
    }

    .security-account-form,
    .security-technical-details .security-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .security-permissions-section {
        margin-bottom: 14px;
    }

    .security-right-filter {
        display: grid;
        grid-template-columns: auto minmax(150px, 240px);
        align-items: center;
        gap: 6px;
    }

    .security-right-filter .material-icons {
        color: rgba(232, 241, 245, .66);
        font-size: 19px;
    }

    .security-rights-list {
        max-height: none;
        margin-top: 0;
        padding: 0;
        border: none;
        background: transparent;
        overflow: visible;
    }

    .security-right-group {
        margin-top: 8px;
        border: 1px solid #455a64;
        border-radius: 5px;
        background: #1c282e;
        overflow: hidden;
    }

    .security-right-group-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 10px;
        border-bottom: 1px solid #455a64;
        color: #efff41;
        font-size: 12px;
        font-weight: 700;
    }

    .security-right-group-count {
        color: rgba(230, 240, 244, .56);
        font-size: 10px;
        font-weight: 500;
    }

    .security-right-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 9px;
        padding: 7px 10px;
    }

    .security-right-key {
        min-width: 0;
        color: #f4f8fa;
        font-weight: 600;
    }

    .security-right-technical {
        display: block;
        margin-top: 2px;
        color: rgba(224, 237, 243, .45);
        font-family: Consolas, monospace;
        font-size: 9px;
        font-weight: 400;
    }

    .security-local-auth {
        margin-bottom: 14px;
    }

    .security-danger-action {
        border-color: rgba(225, 104, 104, .55) !important;
        color: #ffc6c6 !important;
    }

    .security-management-dialog .security-requires-edit:disabled {
        cursor: not-allowed;
        opacity: .45;
    }

    .clinic-filter-management-dialog .ui-dialog-content {
        overflow: hidden;
        padding: 10px;
    }

    .clinic-filter-admin-grid {
        display: grid;
        grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
        gap: 12px;
        height: 100%;
        min-height: 0;
    }

    .clinic-filter-list-card,
    .clinic-filter-editor-card {
        min-height: 0;
        overflow: auto;
    }

    .clinic-filter-list-card {
        display: flex;
        flex-direction: column;
    }

    .clinic-filter-list-card .security-local-user-list {
        min-height: 180px;
        max-height: none;
        flex: 1 1 auto;
    }

    .clinic-filter-new {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 10px;
    }

    .clinic-filter-explanation {
        max-width: 720px;
        margin-bottom: 18px;
    }

    .clinic-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media only screen and (max-width: 1000px) {
        .security-management-dialog .security-admin-grid {
            grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
        }

        .security-right-row { grid-template-columns: auto minmax(0, 1fr); }
    }

    @media only screen and (max-width: 820px) {
        .security-management-dialog .security-admin-grid {
            grid-template-columns: 1fr;
            grid-template-rows: minmax(200px, 38vh) minmax(0, 1fr);
        }

        .security-management-dialog .security-card:first-child {
            max-width: none;
        }

        .security-directory-add {
            position: relative;
        }

        .clinic-filter-admin-grid {
            grid-template-columns: 1fr;
            grid-template-rows: minmax(180px, 36vh) minmax(0, 1fr);
        }
    }

    @media only screen and (max-width: 640px) {
        .security-account-form,
        .security-technical-details .security-form-grid,
        .clinic-filter-form {
            grid-template-columns: 1fr;
        }

        .security-section-heading {
            align-items: stretch;
            flex-direction: column;
        }

        .security-right-filter {
            grid-template-columns: auto minmax(0, 1fr);
        }

        .security-identity-header {
            padding: 11px;
        }

        .security-editor-section,
        .security-technical-details,
        .security-local-auth {
            margin-right: 8px;
            margin-left: 8px;
            padding: 10px;
        }

        .clinic-filter-management-dialog .ui-dialog-content {
            overflow-y: auto;
            padding: 6px;
        }

        .clinic-filter-admin-grid {
            display: flex;
            height: auto;
            flex-direction: column;
        }
    }

    .fl-admin-grid {
        display: grid;
        grid-template-columns: 420px 1fr;
        gap: 12px;
        min-height: 560px;
    }

    .fl-card {
        background: #2f2f2f;
        border: 1px solid #546e7a;
        border-radius: 6px;
        color: #fff;
        padding: 12px;
    }

    .fl-toolbar {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 8px;
    }

    .fl-tree {
        border: 1px solid #455a64;
        border-radius: 4px;
        background: #263238;
        max-height: 500px;
        overflow-y: auto;
        padding: 8px;
    }

        .fl-tree ul {
            list-style: none;
            padding-left: 16px;
            margin: 0;
        }

    .fl-node-row {
        cursor: pointer;
        padding: 8px 10px;
        border-bottom: 1px solid #455a64;
        border-radius: 0;
        background: #323232;
        font-size: 13px;
        margin-bottom: 0;
    }

        .fl-node-row:hover {
            background: #546e7a;
        }

        .fl-node-row.active {
            background: #4F9593;
            color: #fff;
        }

    .fl-actions {
        margin-top: 8px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .fl-link-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        align-items: center;
    }

    .teaching-admin-case-row {
        display: grid;
        grid-template-columns: 28px 1fr;
        width: 100%;
        color: #fff;
        border: 0;
        border-bottom: 1px solid #455a64;
        text-align: left;
        align-items: center;
    }

    .teaching-admin-case-main {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }

    .teaching-admin-case-main strong,
    .teaching-admin-case-main small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .teaching-admin-case-main small {
        color: #cfd8dc;
        font-size: 12px;
    }

    .quick-preview-3d-panel-row input[type="number"] {
        width: 100%;
        min-width: 0;
        height: 26px;
        border: 1px solid rgba(158, 181, 193, 0.42);
        border-radius: 4px;
        background: #05090c;
        color: #f6fbfd;
        font-size: 12px;
        font-variant-numeric: tabular-nums;
        text-align: right;
        padding: 0 5px;
    }

    .quick-preview-oblique-angle-input {
        box-sizing: border-box;
        appearance: textfield;
    }

    .quick-preview-oblique-angle-input::-webkit-outer-spin-button,
    .quick-preview-oblique-angle-input::-webkit-inner-spin-button {
        margin: 0;
    }

    .fl-empty {
        padding: 14px;
        color: #cfd8dc;
        font-size: 13px;
    }

    .teaching-admin-version-summary {
        border: 1px solid #455a64;
        border-radius: 4px;
        background: #263238;
        color: #cfd8dc;
        font-size: 12px;
        line-height: 1.45;
        margin-bottom: 12px;
        padding: 8px 10px;
    }

    .worklistentry-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .worklistentry-wide {
        grid-column: 1 / -1;
    }

    .worklistentry-actions {
        margin-top: 10px;
        display: flex;
        gap: 8px;
    }

    #div_worklistentrymodal,
    #div_worklistentrymodal .worklistentry-grid,
    #div_worklistentrymodal .mdl-textfield,
    #div_worklistentrymodal .mdl-textfield__input {
        box-sizing: border-box;
    }

    #div_worklistentrymodal .mdl-textfield {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        overflow: visible;
    }

    #div_worklistentrymodal .mdl-textfield__input {
        color: #ffffff;
        width: 100%;
        position: relative;
        z-index: 2;
        pointer-events: auto;
    }

    #div_worklistentrymodal select.mdl-textfield__input option {
        background: #323232;
        color: #ffffff;
    }

    #div_worklistentrymodal .worklistentry-actions .material-icons {
        margin-right: 6px;
        font-size: 20px;
        line-height: 1;
        vertical-align: middle;
    }

    @media only screen and (max-width: 640px) {
        .ui-dialog.worklistentry-dialog-shell {
            width: min(336px, calc(100vw - 56px)) !important;
            max-width: min(336px, calc(100vw - 56px)) !important;
            max-height: calc(100vh - 16px) !important;
            left: 50% !important;
            right: auto;
            transform: translateX(-50%);
            box-sizing: border-box;
        }

        .ui-dialog.worklistentry-dialog-shell .ui-dialog-titlebar {
            min-height: 40px;
            padding: 8px 10px;
        }

        .ui-dialog.worklistentry-dialog-shell .ui-dialog-title {
            max-width: calc(100vw - 82px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ui-dialog.worklistentry-dialog-shell .ui-dialog-content {
            max-height: calc(100vh - 70px) !important;
            padding: 8px 10px 10px;
            overflow-y: auto;
            overflow-x: hidden;
            box-sizing: border-box;
        }

        #div_worklistentrymodal .worklistentry-grid {
            grid-template-columns: 1fr;
            gap: 10px;
            padding-bottom: 72px;
        }

        #div_worklistentrymodal .worklistentry-wide {
            min-width: 0;
        }

        #div_worklistentrymodal .worklistentry-note {
            font-size: 12px;
            line-height: 1.35;
        }

        #div_worklistentrymodal .worklistentry-section-title {
            margin-top: 4px;
            font-size: 12px;
            font-weight: 700;
        }

        #div_worklistentrymodal .mdl-textfield {
            display: flex;
            flex-direction: column;
            min-height: 0;
            overflow: visible;
            padding: 0 0 2px;
        }

        #div_worklistentrymodal .mdl-textfield__input {
            display: block;
            height: 36px;
            font-size: 13px;
            line-height: 20px;
            min-height: 36px;
            padding: 7px 0 7px;
            position: relative;
            z-index: 2;
        }

        #div_worklistentrymodal select.mdl-textfield__input {
            appearance: auto;
            background-color: #2f2f2f;
            color: #ffffff;
            cursor: pointer;
            line-height: 20px;
            padding-right: 24px;
        }

        #div_worklistentrymodal .worklistentry-grid .mdl-textfield:nth-last-child(2) {
            margin-bottom: 14px;
        }

        #div_worklistentrymodal .mdl-textfield__label,
        #div_worklistentrymodal .mdl-textfield.is-dirty .mdl-textfield__label,
        #div_worklistentrymodal .mdl-textfield.is-focused .mdl-textfield__label,
        #div_worklistentrymodal .mdl-textfield.has-placeholder .mdl-textfield__label {
            order: -1;
            position: static !important;
            width: 100%;
            color: rgba(255, 255, 255, 0.64);
            font-size: 11px;
            line-height: 1.2;
            overflow: hidden;
            padding: 0 0 3px;
            pointer-events: none;
            text-overflow: ellipsis;
            transform: none !important;
            white-space: nowrap;
            visibility: visible;
        }

        #div_worklistentrymodal .mdl-textfield__label::after,
        #div_worklistentrymodal .mdl-textfield.is-focused .mdl-textfield__label::after {
            display: none;
        }

        #div_worklistentrymodal textarea.mdl-textfield__input {
            height: auto;
            min-height: 54px;
            resize: vertical;
        }

        #div_worklistentrymodal .worklistentry-actions {
            position: sticky;
            bottom: 0;
            z-index: 5;
            display: grid;
            grid-template-columns: repeat(2, minmax(44px, 1fr));
            gap: 6px;
            margin: 4px 0 0;
            padding: 8px 0 0;
            background: #2f2f2f;
            border-top: 1px solid rgba(84, 110, 122, 0.45);
        }

        #div_worklistentrymodal .worklistentry-actions .mdl-button {
            width: 100%;
            min-width: 0;
            height: 36px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0;
        }

        #div_worklistentrymodal .worklistentry-actions .material-icons {
            margin: 0;
            font-size: 22px;
        }

        #div_worklistentrymodal .worklistentry-action-label {
            display: none;
        }
    }

    .internal-worklist-list {
        border: 1px solid #455a64;
        border-radius: 6px;
        background: #263238;
        max-height: 520px;
        overflow: auto;
        color: #fff;
    }

    .internal-worklist-header,
    .internal-worklist-row {
        display: grid;
        grid-template-columns: 96px 224px 168px minmax(180px, 1fr);
        gap: 12px;
        align-items: center;
        padding: 10px 12px;
        font-size: 13px;
    }

    .internal-worklist-header {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #31424b;
        color: #dce8ef;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        border-bottom: 1px solid #455a64;
    }

    .internal-worklist-row {
        background: #323232;
        border-bottom: 1px solid #37474f;
        cursor: pointer;
    }

        .internal-worklist-row:hover {
            background: #546e7a;
        }

        .internal-worklist-row.active {
            position: relative;
            background: #4F9593;
            box-shadow: inset 4px 0 0 rgb(238,255,65);
        }

            .internal-worklist-row.active .internal-worklist-col-id strong,
            .internal-worklist-row.active .internal-worklist-col-date strong {
                color: #ffffff;
            }

            .internal-worklist-row.active .internal-worklist-col-meta {
                color: #f3fbff;
                font-weight: 700;
            }

            .internal-worklist-row.active .internal-worklist-col-result {
                color: #ffffff;
            }

        .internal-worklist-row:last-child {
            border-bottom: none;
        }

        .internal-worklist-row.is-empty {
            display: block;
            cursor: default;
            color: #d5e2ee;
        }

            .internal-worklist-row.is-empty:hover {
                background: transparent;
            }

    .internal-worklist-col-id,
    .internal-worklist-col-date,
    .internal-worklist-col-meta {
        white-space: nowrap;
    }

    .internal-worklist-col-date {
        font-variant-numeric: tabular-nums;
    }

    .internal-worklist-col-result {
        min-width: 0;
        color: #dbe7ee;
    }

    .internal-worklist-actions {
        margin-top: 12px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

        .internal-worklist-actions .mdl-button {
            min-width: 126px;
            border-radius: 8px;
            border: 1px solid #455a64;
            background: #3a4349;
            color: #eef8ff;
            font-weight: 700;
            letter-spacing: 0.02em;
        }

            .internal-worklist-actions .mdl-button:hover,
            .internal-worklist-actions .mdl-button:focus {
                background: #445057;
            }

    #internal_worklist_retry,
    #internal_worklist_refresh {
        border-color: rgba(79, 149, 147, 0.7);
        background: #4f6772;
        color: #ffffff;
    }

        #internal_worklist_retry:hover,
        #internal_worklist_retry:focus,
        #internal_worklist_refresh:hover,
        #internal_worklist_refresh:focus {
            background: #5b7682;
        }

    #internal_worklist_delete {
        border-color: rgba(191, 97, 97, 0.7);
        background: #5a3232;
        color: #ffd9d9;
    }

        #internal_worklist_delete:hover,
        #internal_worklist_delete:focus {
            background: #6a3a3a;
        }

    #internal_worklist_close {
        border-color: rgba(238, 255, 65, 0.7);
        background: rgb(238,255,65);
        color: #111111;
    }

        #internal_worklist_close:hover,
        #internal_worklist_close:focus {
            background: rgb(230,245,61);
        }

    .internal-worklist-actions .mdl-button[disabled] {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .ui-dialog.internal-worklist-dialog {
        border: 1px solid #546e7a;
        border-radius: 10px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
        background: #2f2f2f;
    }

        .ui-dialog.internal-worklist-dialog .ui-dialog-titlebar {
            min-height: 46px;
            padding: 12px 14px;
            border: none;
            border-bottom: 1px solid #546e7a;
            background: #4f6772;
            color: #ffffff;
        }

        .ui-dialog.internal-worklist-dialog .ui-dialog-title {
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: #ffffff;
        }

        .ui-dialog.internal-worklist-dialog .ui-dialog-content {
            padding: 12px;
            background: #2f2f2f;
            color: #ffffff;
        }

        .ui-dialog.internal-worklist-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
            top: 8px;
            right: 8px;
        }

    @media only screen and (max-width: 900px) {
        .fl-admin-grid {
            grid-template-columns: 1fr;
        }

        .worklistentry-grid {
            grid-template-columns: 1fr;
        }

        .internal-worklist-header,
        .internal-worklist-row {
            grid-template-columns: 88px 1fr;
        }

        .internal-worklist-col-meta,
        .internal-worklist-col-result {
            grid-column: 1 / -1;
            white-space: normal;
        }

        .internal-worklist-actions .mdl-button {
            flex: 1 1 calc(50% - 8px);
            min-width: 0;
        }
    }



    .patient_header {
        /*  height: 53px;*/
        display: flex;
        width: auto;
        left: 0;
        position: sticky;
        top: 0;
        overflow-x: visible;
        background-color: #455a64;
        color: white;
        padding-right: 0px;
        z-index: 3;
        /*         padding-top: 6px;
            padding-bottom: 6px; */
        /*    box-shadow: 2px 2px 20px black; */
    }

        .patient_header:hover {
            /*opacity: .5;*/
            z-index: 10;
            background-color: #455a64;
            color: white;
        }

    .study_header {
        /*    height: 30px;*/
        display: flex;
        width: auto;
        left: 0px;
        position: relative;
        top: 0;
        overflow-x: visible;
        /*   margin: 5px;*/
        /*   margin-top: 15px;*/
        background-color: #607d8b;
        color: black;
        /*   padding-left: 19px;*/
        /*         padding-top: 5px;
            padding-bottom: 5px; */
        padding-right: 0px;
        /*    box-shadow: 2px 2px 20px black; */
    }

        .study_header:hover {
            background-color: #455a64;
            color: white;
        }


    .series_header {
        display: flex;
        /*    height: 30px;*/
        width: inherit;
        left: 0px;
        position: relative;
        top: 0;
        overflow-x: visible;
        /*   margin: 5px;*/
        /*margin-left: 25px;*/
        /*   margin-top: 15px;*/
        background-color: #b0bec5;
        color: black;
        /*   padding-left: 10px;*/
        /*         padding-top: 5px;
            padding-bottom: 5px; */
        padding-right: 0px;
        /*   border-radius: 5px;*/
        /*         box-shadow: 2px 2px 20px black; */
    }

        .series_header:hover {
            background-color: #455a64;
            color: white;
        }

    /* First the Grid */
    .gallery-grid {
        display: grid;
        justify-items: left;
        /*        margin: 0;
                padding: 0;
                left: 0px;
                margin-left: 0px;
                margin-top: 0px;
                margin-right: 5px;*/
        margin-bottom: 5px;
    }

    /* The Picture Frame */
    .gallery-frame {
        /*padding: .1rem;*/
        margin-bottom: 0px;
        font-size: 0.8rem;
        text-align: center;
        background-color: #333;
        color: #d9d9d9;
        box-shadow: 2px 2px 20px black;
    }








    .patientresultselements {
        width: auto;
        display: inline-block;
        font-size: 0.85rem;
    }

    .gallery-frame:hover {
        /*       box-shadow: 0px 0px 20px #AEEA00;*/
        background-color: #455a64;
        color: white;
    }





    .accordion {
        overflow: hidden;
        border-radius: 0px;
    }



    .accpanel {
        font-family: Sans-serif;
        font-size: 14px;
        color: #ffffff;
        background: #303030;
        text-decoration: none;
        font-weight: 400;
        font-style: normal;
        padding: 0px 20px 15px 20px;
        overflow: visible;
        display: none;
    }

    .accpanelcomm {
        padding: 10px 10px;
    }


    .accpanel p {
        padding: 0px;
        margin: 0px;
    }





    .left {
        left: 0;
        background-color: #303030;
    }

    .leftside {
        height: 100%;
    }

    .middle {
        right: 0;
        background-color: #455a64;
    }

    .right {
        right: 0;
        background-color: #303030;
    }


    .leftcontainer_outer {
        right: 0;
    }

    .leftcontainer_inner {
        margin: 0px 0px 0px 10px;
        background-color: #303030;
        max-width: 640px;
    }

    .patient-results-shell {
        position: relative;
        min-height: 220px;
    }

    .patient-results-loading {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 5;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
        box-sizing: border-box;
        background: rgba(22, 29, 34, 0.86);
        pointer-events: auto;
    }

    .patient-results-loading__content {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border: 1px solid rgba(112, 146, 168, 0.35);
        border-radius: 12px;
        background: rgba(13, 24, 31, 0.92);
        color: #f6fbfd;
        font-size: 13px;
        font-weight: 600;
    }

    .patient-data-loading {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 20;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(22, 29, 34, 0.86);
        pointer-events: auto;
    }

    .patient-data-loading__content {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border: 1px solid rgba(112, 146, 168, 0.35);
        border-radius: 12px;
        background: rgba(13, 24, 31, 0.92);
        color: #f6fbfd;
        font-size: 13px;
        font-weight: 600;
    }

    .patient-load-message {
        margin: 16px;
        padding: 12px 14px;
        border: 1px solid rgba(112, 146, 168, 0.35);
        border-radius: 10px;
        background: rgba(13, 24, 31, 0.65);
        color: #f6fbfd;
        font-size: 13px;
    }



    .searchbox {
    }

    .patient_data {
        background-color: #303030;
        position: absolute;
        overflow-x: hidden;
        overflow-y: scroll;
        height: calc(100% - 55px);
        width: 100%;
        /*  min-height: calc(100% + 1px);*/
        -webkit-overflow-scrolling: touch;
        /*   min-height: -webkit-fill-available;*/
        /*top: 60px;*/
        /* margin-top: 60px; */
        /*overflow-x: scroll;
               */
    }




    .toolbar_top {
        height: 40px;
        width: inherit;
        left: 0;
        position: relative;
        top: 0;
        /* Eigener Stacking-Context, damit Dropdown-Menus (account-menu-popup, favoriten)
           nicht vom später im DOM stehenden div_patient_data überlagert werden. */
        z-index: 20;
        overflow-x: visible;
        margin: 0px;
        background-color: #212121;
        color: white;
        padding-left: 5px;
        padding-top: 10px;
        padding-right: 0px;
        padding-bottom: 0px;
        border-radius: 0px;
    }

    .toolbar_top_buttons {
        margin: 0 !important;
        border-right: 1px solid white !important;
        border-radius: 0 !important;
        padding-left: 30px !important;
        padding-right: 20px !important;
    }

    .toolbar_top_buttons--compact {
        padding-left: 20px !important;
        padding-right: 16px !important;
    }

    .toolbar_top_buttons--user {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 12px !important;
        width: auto !important;
    }

    .account-menu-anchor {
        position: relative;
        display: inline-flex;
        align-items: stretch;
        height: 100%;
        float: right;
    }

    .toolbar_top_buttons--user {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        overflow: visible !important;
        white-space: nowrap;
    }

    .toolbar_top_buttons--user .material-icons {
        font-size: 18px;
    }

    .account-menu-popup {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 220px;
        padding: 8px;
        border-radius: 12px;
        border: 1px solid #455a64;
        background: rgba(24, 31, 36, 0.98);
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
        z-index: 50;
        display: none;
    }

    .account-menu-popup.is-open {
        display: block;
    }

    .account-menu-item {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 12px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #ffffff;
        text-align: left;
        cursor: pointer;
        opacity: 1 !important;
        pointer-events: auto;
    }

    .account-menu-item:hover {
        background: rgba(79, 149, 147, 0.16);
    }

    .account-menu-item i,
    .account-menu-item span {
        color: inherit;
        opacity: 1 !important;
    }

    .account-menu-item[disabled],
    .account-menu-item.mdl-button--disabled,
    .account-menu-item.is-disabled {
        background: rgba(58, 70, 77, 0.92) !important;
        color: #99a8af !important;
        opacity: 0.55 !important;
        cursor: not-allowed;
        pointer-events: none;
    }

    .account-menu-node {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 4px 0 6px;
        padding: 9px 12px;
        border-radius: 8px;
        border: 1px solid rgba(142, 177, 190, 0.24);
        color: #c9d6dc;
        background: rgba(8, 21, 30, 0.72);
        font-size: 12px;
    }

    .account-menu-node i {
        color: #dfff21;
        font-size: 18px;
    }

    .account-shell {
        display: grid;
        gap: 14px;
    }

    .account-card {
        padding: 14px;
        border-radius: 8px;
        border: 1px solid #455a64;
        background: #1a242b;
    }

    .account-title {
        font-size: 20px;
        font-weight: 700;
        color: #ffffff;
    }

    .account-subtitle {
        margin-top: 4px;
        color: rgba(255, 255, 255, 0.76);
    }

    .account-muted {
        color: rgba(255, 255, 255, 0.72);
        line-height: 1.55;
    }

    .account-rights-list {
        margin-top: 10px;
        max-height: 240px;
        overflow-y: auto;
        display: grid;
        gap: 8px;
    }

    .account-right-row {
        padding: 10px 12px;
        border-radius: 6px;
        border: 1px solid #37474f;
        background: #11181d;
    }

    .account-right-row strong {
        color: rgb(238,255,65);
    }

    .dicomnode-admin-grid {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 12px;
        min-height: 520px;
        color: #ffffff;
    }

    .dicomnode-card {
        background: #2f2f2f;
        border: 1px solid #546e7a;
        border-radius: 6px;
        color: #ffffff;
        padding: 12px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        min-height: 0;
        min-width: 0;
    }

    .dicomnode-list {
        flex: 1;
        max-height: 520px;
        overflow-y: auto;
        overflow-x: hidden;
        border: 1px solid #455a64;
        border-radius: 4px;
        background: #323232;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        box-sizing: border-box;
    }

    .dicomnode-empty {
        padding: 10px 12px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.68);
    }

    .dicomnode-list-item {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
        padding: 8px 10px;
        background: #323232;
        border: 0;
        border-bottom: 1px solid #455a64;
        border-radius: 0;
        color: #ffffff;
        text-align: left;
        cursor: pointer;
        font: inherit;
    }

        .dicomnode-list-item:hover {
            background: #546e7a;
        }

        .dicomnode-list-item.active {
            background: #4F9593;
            box-shadow: inset 4px 0 0 rgb(238,255,65);
        }

    .dicomnode-list-state {
        flex: 0 0 auto;
        font-size: 20px;
        line-height: 1;
        color: #8bc34a;
    }

        .dicomnode-list-item.is-offline .dicomnode-list-state {
            color: #e57373;
        }

    .dicomnode-list-meta {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
    }

    .dicomnode-list-label {
        font-weight: 600;
        font-size: 13px;
        color: #ffffff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dicomnode-list-sub {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.66);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dicomnode-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 14px;
        align-items: end;
    }

    .dicomnode-form .mdl-textfield {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .dicomnode-form-wide {
        grid-column: 1 / -1;
    }

    .dicomnode-toggle-row {
        margin-top: 6px;
    }

    .dicomnode-toggle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.88);
        font-size: 13px;
    }

    .dicomnode-toggle input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .dicomnode-toggle-track {
        position: relative;
        width: 38px;
        height: 20px;
        background: #455a64;
        border: 1px solid #546e7a;
        border-radius: 999px;
        transition: background 120ms ease;
    }

        .dicomnode-toggle-track::before {
            content: "";
            position: absolute;
            top: 1px;
            left: 1px;
            width: 16px;
            height: 16px;
            background: #cfd8dc;
            border-radius: 50%;
            transition: transform 120ms ease, background 120ms ease;
        }

    .dicomnode-toggle input[type="checkbox"]:checked + .dicomnode-toggle-track {
        background: rgb(238, 255, 65);
        border-color: rgb(238, 255, 65);
    }

        .dicomnode-toggle input[type="checkbox"]:checked + .dicomnode-toggle-track::before {
            transform: translateX(18px);
            background: #1f2a30;
        }

    .dicomnode-toggle input[type="checkbox"]:focus-visible + .dicomnode-toggle-track {
        box-shadow: 0 0 0 2px rgba(238, 255, 65, 0.35);
    }

    .dicomnode-toggle-text {
        font-weight: 500;
    }

    .dicomnode-actions {
        margin-top: 14px;
        display: grid;
        grid-template-columns: repeat(4, 44px);
        gap: 8px;
        padding-top: 12px;
        border-top: 1px solid rgba(84, 110, 122, 0.45);
    }

    .dicomnode-actions .mdl-button {
        width: 44px;
        min-width: 44px;
        height: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
    }

    .dicomnode-actions .mdl-button .material-icons {
        margin: 0;
        font-size: 22px;
        line-height: 1;
    }

    .dicomnode-actions .dicomnode-action-label {
        display: none;
    }

    #div_favoriteadminmodal .dicomnode-admin-grid {
        grid-template-columns: minmax(280px, 1fr);
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    #div_favoriteadminmodal .dicomnode-card {
        min-height: 0;
        overflow: hidden;
        padding: 0;
        border: 0;
        background: transparent;
    }

    #div_favoriteaddmodal .fav-add-card {
        min-width: 0;
        min-height: 0;
        background: #2f2f2f;
        border: 1px solid #546e7a;
        border-radius: 6px;
        color: #ffffff;
        padding: 12px;
    }

    #div_favoriteaddmodal .dicomnode-form {
        grid-template-columns: 1fr;
    }

    #div_favoriteaddmodal .fav-add-tree-wrap {
        margin-top: 4px;
        min-width: 0;
    }

    #fav_add_tree {
        display: block;
        min-height: 240px;
        max-height: 320px;
        overflow: auto;
    }

    #favadmin_tree,
    #fav_add_tree {
        display: block;
        min-height: 0;
    }

    #favadmin_tree .favadmin-node,
    #fav_add_tree .favadmin-node {
        display: block;
    }

    #favadmin_tree .favadmin-children,
    #fav_add_tree .favadmin-children {
        display: none;
    }

    #favadmin_tree .favadmin-node.is-expanded > .favadmin-children,
    #fav_add_tree .favadmin-node.is-expanded > .favadmin-children {
        display: block;
    }

    #favadmin_tree .dicomnode-list-item,
    #fav_add_tree .dicomnode-list-item {
        min-height: 44px;
        padding: 8px 10px;
    }

    #favadmin_tree .favadmin-folder-toggle,
    #fav_add_tree .favadmin-folder-toggle {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: rgba(255, 255, 255, .72);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
    }

    #favadmin_tree .favadmin-folder-toggle .material-icons,
    #fav_add_tree .favadmin-folder-toggle .material-icons {
        font-size: 20px;
        line-height: 1;
        transition: transform .14s ease;
    }

    #favadmin_tree .favadmin-node.is-expanded > .dicomnode-list-item .favadmin-folder-toggle .material-icons,
    #fav_add_tree .favadmin-node.is-expanded > .dicomnode-list-item .favadmin-folder-toggle .material-icons {
        transform: rotate(90deg);
    }

    #favadmin_tree .favadmin-folder-toggle.is-empty,
    #fav_add_tree .favadmin-folder-toggle.is-empty {
        visibility: hidden;
        pointer-events: none;
    }

    #favadmin_tree .favadmin-bookmark-row {
        min-height: 52px;
    }

    #favadmin_tree .favadmin-comment {
        display: block;
        margin-top: 3px;
        color: rgba(238, 255, 65, .88);
        white-space: normal;
        line-height: 1.25;
    }

    #div_favoritefoldermodal .dicomnode-card,
    #div_favoritebookmarkmodal .dicomnode-card {
        min-height: 0;
    }

    #fav_bookmark_comment {
        min-height: 92px;
        resize: vertical;
        line-height: 1.35;
    }

    #div_favoriteadminmodal .favadmin-actions,
    #div_favoriteaddmodal .dicomnode-actions {
        grid-template-columns: repeat(3, 44px);
        justify-content: start;
    }

    #div_favoriteadminmodal .favadmin-actions .mdl-button,
    #div_favoriteaddmodal .dicomnode-actions .mdl-button {
        width: 44px;
        min-width: 44px;
        height: 40px;
        padding: 0;
        gap: 0;
        font-size: 0;
        line-height: 1.1;
        color: #ffffff;
        background: rgba(8, 24, 34, .88);
        border: 1px solid rgba(97, 218, 251, .42);
        border-radius: 6px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
        text-transform: none;
        white-space: normal;
        overflow: hidden;
    }

    #div_favoriteadminmodal .favadmin-actions .mdl-button:hover,
    #div_favoriteaddmodal .dicomnode-actions .mdl-button:hover {
        background: rgba(19, 58, 73, .95);
        border-color: rgba(238, 255, 65, .72);
    }

    #div_favoriteadminmodal .favadmin-actions .mdl-button:disabled,
    #div_favoriteadminmodal .favadmin-actions .mdl-button[disabled] {
        opacity: .42;
        cursor: default;
        background: rgba(28, 39, 45, .72);
        color: rgba(255, 255, 255, .58);
    }

    #div_favoriteadminmodal .favadmin-actions .material-icons,
    #div_favoriteaddmodal .dicomnode-actions .material-icons {
        margin: 0;
        font-size: 21px;
        color: rgb(238, 255, 65);
    }

    #div_favoriteadminmodal .favadmin-actions .mdl-button:disabled .material-icons,
    #div_favoriteadminmodal .favadmin-actions .mdl-button[disabled] .material-icons {
        color: rgba(238, 255, 65, .48);
    }

    #div_favoriteadminmodal .favadmin-actions .mdl-button span {
        display: none;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        line-height: 1.1;
    }

    .favorite-admin-dialog-shell {
        max-width: calc(100vw - 24px);
    }

    .favorite-edit-dialog-shell {
        max-width: calc(100vw - 24px);
    }

    .favorite-add-dialog-shell {
        max-width: calc(100vw - 24px);
    }

    .favorite-admin-dialog-shell .ui-dialog-content {
        min-height: 0 !important;
        box-sizing: border-box;
    }

    @media only screen and (max-width: 900px) {
        .dicomnode-admin-grid {
            grid-template-columns: 1fr;
        }

        .dicomnode-form {
            grid-template-columns: 1fr;
        }
    }

    @media only screen and (max-width: 640px) {
        .ui-dialog.dicomnode-dialog-shell {
            width: min(348px, calc(100vw - 44px)) !important;
            max-width: min(348px, calc(100vw - 44px)) !important;
            max-height: calc(100vh - 16px) !important;
            left: 50% !important;
            right: auto;
            transform: translateX(-50%);
            box-sizing: border-box;
        }

        .ui-dialog.dicomnode-dialog-shell .ui-dialog-titlebar {
            min-height: 40px;
            padding: 8px 10px;
        }

        .ui-dialog.dicomnode-dialog-shell .ui-dialog-title {
            max-width: calc(100vw - 82px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ui-dialog.dicomnode-dialog-shell .ui-dialog-content {
            max-height: calc(100vh - 70px) !important;
            padding: 6px;
            overflow-y: auto;
            overflow-x: hidden;
            box-sizing: border-box;
        }

        .dicomnode-admin-grid {
            grid-template-columns: 1fr;
            gap: 6px;
            min-height: 0;
        }

        .dicomnode-card {
            padding: 8px;
        }

        .dicomnode-list {
            flex: none;
            max-height: 27vh;
            min-height: 96px;
        }

        .dicomnode-list-item {
            min-height: 38px;
            padding: 7px 8px;
            gap: 7px;
        }

        .dicomnode-list-state {
            font-size: 18px;
        }

        .dicomnode-list-label {
            font-size: 12px;
        }

        .dicomnode-list-sub {
            font-size: 10px;
        }

        .dicomnode-form {
            grid-template-columns: 1fr;
            gap: 0;
        }

        .dicomnode-form .mdl-textfield {
            box-sizing: border-box;
            padding: 9px 0 3px;
        }

        .dicomnode-form .mdl-textfield__input {
            box-sizing: border-box;
            font-size: 13px;
        }

        .dicomnode-toggle-row {
            margin-top: 2px;
        }

        .dicomnode-actions {
            position: sticky;
            bottom: 0;
            z-index: 1;
            grid-template-columns: repeat(4, minmax(40px, 1fr));
            gap: 5px;
            margin: 6px -2px -2px;
            padding: 7px 2px 2px;
            background: #2f2f2f;
        }

        .dicomnode-actions .mdl-button {
            width: 100%;
            min-width: 0;
            height: 36px;
        }

        .ui-dialog.favorite-admin-dialog-shell {
            position: fixed !important;
            width: min(360px, calc(100dvw - 16px)) !important;
            min-width: min(360px, calc(100dvw - 16px)) !important;
            max-width: min(360px, calc(100dvw - 16px)) !important;
            left: 50% !important;
            right: auto !important;
            transform: translateX(-50%) !important;
        }

        .ui-dialog.favorite-edit-dialog-shell {
            position: fixed !important;
            width: min(348px, calc(100dvw - 24px)) !important;
            min-width: min(348px, calc(100dvw - 24px)) !important;
            max-width: min(348px, calc(100dvw - 24px)) !important;
            left: 50% !important;
            right: auto !important;
            transform: translateX(-50%) !important;
            box-sizing: border-box;
        }

        .ui-dialog.favorite-add-dialog-shell {
            position: fixed !important;
            width: min(360px, calc(100dvw - 16px)) !important;
            min-width: min(360px, calc(100dvw - 16px)) !important;
            max-width: min(360px, calc(100dvw - 16px)) !important;
            max-height: calc(100dvh - 16px) !important;
            left: 50% !important;
            right: auto !important;
            transform: translateX(-50%) !important;
            box-sizing: border-box;
        }

        .favorite-add-dialog-shell .ui-dialog-content {
            max-height: calc(100dvh - 58px) !important;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .favorite-admin-dialog-shell .ui-dialog-content {
            height: calc(100dvh - 58px) !important;
            max-height: calc(100dvh - 58px) !important;
            display: flex;
            flex-direction: column;
        }

        #div_favoriteadminmodal .dicomnode-admin-grid {
            grid-template-columns: 1fr;
            height: 100% !important;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
        }

        #div_favoriteadminmodal .dicomnode-card {
            min-height: 0;
            flex: 1 1 auto;
        }

        #div_favoriteadminmodal #favadmin_tree {
            max-height: calc(100dvh - 176px) !important;
            min-height: 260px;
        }

        #div_favoriteaddmodal #fav_add_tree {
            max-height: min(320px, calc(100dvh - 300px)) !important;
            min-height: clamp(150px, calc(100dvh - 360px), 240px);
        }

        #div_favoriteadminmodal .favadmin-actions,
        #div_favoriteaddmodal .dicomnode-actions {
            grid-template-columns: repeat(3, 44px);
            justify-content: end;
            position: static;
            margin: 8px 0 0;
            padding: 8px 0 0;
        }

        #div_favoriteadminmodal .favadmin-actions .mdl-button,
        #div_favoriteaddmodal .dicomnode-actions .mdl-button {
            justify-content: center;
            height: 40px;
            width: 44px;
            min-width: 44px;
            padding: 0;
            font-size: 0;
        }

        #div_favoriteadminmodal .favadmin-actions .mdl-button span {
            font-size: 11px;
        }
    }

    .select-wrapper {
        border: none;
        border-bottom: 1px solid;
        opacity: 0.6;
        display: block;
        font-size: 16px;
        font-family: "Helvetica", "Arial", sans-serif;
        margin: 0;
        padding: 4px 0;
        width: 100%;
        background: 0 0;
        text-align: left;
        color: inherit;
    }

    .ui-dialog {
        border-radius: 5px;
        overflow: hidden;
    }

        .ui-dialog .ui-dialog-titlebar {
            position: relative;
            min-height: 42px;
            padding: 10px 12px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
        }

        .ui-dialog .ui-dialog-title {
            margin: 0;
            padding-right: 48px;
            line-height: 1.2;
        }

        .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
            position: absolute;
            top: 6px;
            right: 6px;
            transform: none;
            width: 28px;
            height: 28px;
            margin: 0;
            min-width: 0;
            padding: 0;
            border: 1px solid rgba(238, 255, 65, 0.55);
            border-radius: 7px;
            background: rgb(238,255,65);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
            font-size: 0;
            z-index: 2;
        }

            .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon {
                background-image: none;
                text-indent: 0;
                overflow: visible;
                position: static;
                margin: 0;
                width: auto;
                height: auto;
                font-size: 13px;
                font-weight: 700;
                line-height: 1;
                color: #1f1f1f;
            }

                .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon::before {
                    content: "X";
                }

            .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-button-icon-space {
                display: none;
            }

            .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover,
            .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:focus {
                background: rgb(230,245,61);
                border-color: rgba(238, 255, 65, 0.95);
            }

    .dicom-drag-source {
        cursor: grab;
    }

        .dicom-drag-source.dragging {
            opacity: 0.65;
            cursor: grabbing;
        }

    .dicom-drop-target {
        transition: background-color 0.15s ease, box-shadow 0.15s ease;
    }

        .dicom-drop-target.drag-over {
            background-color: #455a64 !important;
            box-shadow: inset 0 0 0 1px rgba(238, 255, 65, 0.85);
        }

    @media only screen and (max-width: 360px) {


        .acchead {
            cursor: pointer;
            width: 100%;
            outline: none;
            text-align: left;
            font-size: 15px;
            color: #ffffff;
            background: #303030;
            text-decoration: none;
            font-weight: 400;
            font-style: normal;
            border: none;
            border-top: 1px solid #455a64;
            padding: 6px 20px;
        }


        .ui-dialog-content {
            padding: 5px;
            height: 100%;
            overflow-y: scroll;
        }

        .ui-dialog {
            z-index: 3;
            background: inherit;
            min-width: 100%;
            max-height: 100%;
            border-color: #455a64;
            border-width: 1px;
            border-style: solid;
        }

        .ui-dialog-titlebar {
            color: white;
            background: #455a64;
            padding: 5px;
        }


        .ui-button-icon-only {
            float: right;
        }

        .ui-button {
            background-color: rgb(238,255,65);
            border: none;
            border-radius: 2px;
            color: #000;
            position: relative;
            margin: 0;
            min-width: 64px;
            padding: 0 16px;
            display: inline-block;
            font-family: "Roboto","Helvetica","Arial",sans-serif;
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0;
            overflow: hidden;
            will-change: box-shadow;
            transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
            outline: none;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            vertical-align: middle;
        }

        .div_menuandcheck {
            width: 40px;
        }



        .gallery-figcaption-top {
            background-color: inherit;
            color: inherit;
            /* max-width: 192px;*/
            font-size: 11px;
            display: block;
            margin-top: 0px;
            margin-right: 15px;
            /*float: left;*/
            position: relative;
            top: 0;
            height: 25px;
        }

        .gallery-figcaption-bottom {
            background-color: inherit;
            color: inherit;
            /* max-width: 192px;*/
            font-size: 11px;
            display: block;
            margin-right: 15px;
            margin-top: -25px;
            /*float: left;*/
            position: relative;
            top: 0;
            height: 25px;
            text-align: left;
        }
        /* The Images */
        .gallery-img {
            margin-top: -25px;
            margin-right: 15px;
            /*  width: 215px;*/
            min-height: 175px;
            object-fit: contain;
            transition: opacity 0.25s ease-in-out;
        }

        .gallery-image-fallback {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            box-sizing: border-box;
            background: rgba(0, 0, 0, 0.28);
            color: #d9e2e7;
            border: 1px solid rgba(176, 190, 197, 0.28);
            border-radius: 8px;
            line-height: 1;
        }

            .gallery-image-fallback .material-icons {
                font-size: 42px;
                line-height: 42px;
                color: #d9e2e7;
            }

            .gallery-image-fallback span {
                font-size: 13px;
                font-weight: 600;
                letter-spacing: 0;
            }

        .gallery-figcaption-right {
            /*    background-color: #00bcd4; */
            color: inherit;
            /* max-width: 192px;*/
            font-size: 11px;
            display: block;
            margin-top: -176px;
            margin-left: 180px;
            /*float: left;*/
            position: relative;
            top: 0;
            height: 178px;
            width: 15px;
            text-align: left;
            /*   border-radius: 2px;*/
        }

        .gallery-figcaption-right-ext {
            background-color: #424242;
            color: inherit;
            /* max-width: 192px;*/
            font-size: 11px;
            display: block;
            margin-top: -176px;
            /*float: left;*/
            position: relative;
            top: 0;
            height: 100%;
            text-align: left;
        }



        .series_header {
            border-radius: 0px;
            margin-left: 0px;
            margin: 0px;
            margin-top: 0px;
            margin-bottom: 1px;
            padding-left: 0px;
        }

        .gallery-frame {
            margin-block-start: 5px;
            margin-inline-start: 5px;
            margin-block-end: 0px;
            margin-inline-end: 0px;
        }


        .patient_header {
            border-radius: 0px;
            margin: 0px;
            margin-top: 0px;
            padding-left: 0px;
            margin-top: 0px;
        }



        .study_header {
            border-radius: 0px;
            margin-left: 0px;
            margin: 0px;
            margin-top: 0px;
            padding-left: 0px;
        }


        .gallery-grid {
            grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
            grid-gap: 0.1rem;
            width: 100%;
        }


        .gallery-img {
            width: 175px;
        }




        .splitleft_bottom {
            /* height: 75%;*/
            width: 100%;
            position: fixed;
            top: 200px;
            overflow-x: hidden;
        }



        .splitleft_top {
            /*   height: 50%;*/
            width: 100%;
            position: fixed;
            top: 0;
            overflow-x: hidden;
            border-bottom-color: #455a64;
            border-bottom-width: 1px;
            border-bottom-style: solid;
        }

        .textboxsearch {
            /*   height: 50%;*/
            width: 270px;
        }

        .mobile {
            display: none;
        }


        .splitright {
            height: 100%;
            width: 100%;
            left: 801px;
            position: fixed;
            /*         position: fixed;*/
            /*  top: 0;*/
            /* overflow-x: hidden;*/
        }

        .splitmiddle {
            height: 100%;
            width: 1px;
            left: 901px;
            position: fixed;
            top: 0;
            /*  overflow-x: hidden;*/
        }


        .typicon {
            float: right;
            margin-top: 1px;
            margin-right: 5px;
        }




        #div_patient_ele_flex {
            display: flex;
            /*  flex-direction: column;*/
            flex-wrap: wrap;
        }

        #ele_patient {
            order: 6;
            grid-row: 1;
            width: 240px;
        }

        #ele_species {
            order: 7;
            width: 110px;
            margin-left: 0px;
        }

        #ele_patientid {
            order: 1;
            width: 110px;
            margin-left: 0px;
        }

        #ele_breed {
            order: 8;
            width: 174px;
        }

        #ele_lastdate {
            order: 3;
            width: 65px;
        }


        #ele_castrated {
            order: 5;
            width: 18px;
            height: 18px;
            margin-top: 0px;
            margin-left: 3px;
            font-size: 16px;
        }


        #ele_patientsex {
            order: 4;
            width: 18px;
            height: 18px;
            margin-left: 3px;
            margin-top: 0px;
            font-size: 16px;
        }

        #ele_birthdate {
            order: 2;
            width: 65px;
            margin-left: 0px;
        }
    }




    @media only screen and (max-width: 900px) and (min-width: 361px) {



        .acchead {
            cursor: pointer;
            width: 100%;
            outline: none;
            text-align: left;
            font-size: 15px;
            color: #ffffff;
            background: #303030;
            text-decoration: none;
            font-weight: 400;
            font-style: normal;
            border: none;
            border-top: 1px solid #455a64;
            padding: 6px 20px;
        }

        .ui-dialog-content {
            padding: 5px;
            height: 100%;
            /*            overflow-y: scroll;*/
        }

        .ui-dialog {
            top: 0px;
            z-index: 3;
            background: inherit;
            min-width: 100%;
            max-height: 100%;
            border-color: #455a64;
            border-width: 1px;
            border-style: solid;
        }


        .ui-dialog-titlebar {
            color: white;
            background: #455a64;
            padding: 5px;
        }


        .ui-button-icon-only {
            float: right;
        }

        .ui-button {
            background-color: rgb(238,255,65);
            border: none;
            border-radius: 2px;
            color: #000;
            position: relative;
            margin: 0;
            min-width: 64px;
            padding: 0 16px;
            display: inline-block;
            font-family: "Roboto","Helvetica","Arial",sans-serif;
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0;
            overflow: hidden;
            will-change: box-shadow;
            transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
            outline: none;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            vertical-align: middle;
        }


        .div_menuandcheck {
            width: 40px;
        }


        .gallery-figcaption-top {
            background-color: inherit;
            color: inherit;
            /* max-width: 192px;*/
            font-size: 11px;
            display: block;
            margin-top: 0px;
            margin-right: 15px;
            /*float: left;*/
            position: relative;
            top: 0;
            height: 25px;
        }

        .gallery-figcaption-bottom {
            background-color: inherit;
            color: inherit;
            /* max-width: 192px;*/
            font-size: 11px;
            display: block;
            margin-right: 15px;
            margin-top: -25px;
            /*float: left;*/
            position: relative;
            top: 0;
            height: 25px;
            text-align: left;
        }
        /* The Images */
        .gallery-img {
            margin-top: -25px;
            margin-right: 15px;
            /*  width: 215px;*/
            width: 160px;
            min-height: 160px;
            object-fit: contain;
            transition: opacity 0.25s ease-in-out;
        }

        .gallery-figcaption-right {
            /*    background-color: #00bcd4; */
            color: inherit;
            /* max-width: 192px; */
            font-size: 11px;
            display: block;
            margin-top: -162px;
            margin-left: 160px;
            /* float: left; */
            position: relative;
            top: 0;
            height: 166px;
            width: 15px;
            text-align: left;
            /* border-radius: 2px;*/
        }

        .gallery-figcaption-right-ext {
            background-color: #424242;
            color: inherit;
            font-size: 11px;
            display: block;
            margin-top: -162px;
            /*float: left;*/
            position: relative;
            top: 0;
            height: 100%;
            text-align: left;
        }

        .series_header {
            border-radius: 0px;
            margin-left: 0px;
            margin: 0px;
            margin-top: 0px;
            margin-bottom: 1px;
            padding-left: 0px;
        }

        .gallery-frame {
            margin-block-start: 5px;
            margin-inline-start: 5px;
            margin-block-end: 0px;
            margin-inline-end: 0px;
        }


        .patient_header {
            border-radius: 0px;
            margin: 0px;
            margin-top: 0px;
            padding-left: 0px;
            margin-top: 0px;
        }



        .study_header {
            border-radius: 0px;
            margin-left: 0px;
            margin: 0px;
            margin-top: 0px;
            padding-left: 0px;
        }


        .gallery-grid {
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            grid-gap: 0.1rem;
            width: calc(100% - 4px);
        }







        .splitleft_bottom {
            /* height: 75%;*/
            width: 100%;
            position: fixed;
            top: 200px;
            overflow-x: hidden;
        }



        .splitleft_top {
            /*   height: 50%;*/
            width: 100%;
            position: fixed;
            top: 0;
            overflow-x: hidden;
            border-bottom-color: #455a64;
            border-bottom-width: 1px;
            border-bottom-style: solid;
        }

        .textboxsearch {
            /*   height: 50%;*/
            width: 270px;
        }

        .mobile {
            display: none;
        }


        .splitright {
            height: 100%;
            width: 100%;
            left: 801px;
            position: fixed;
            /*         position: fixed;*/
            /*  top: 0;*/
            /* overflow-x: hidden;*/
        }

        .splitmiddle {
            height: 100%;
            width: 1px;
            left: 901px;
            position: fixed;
            top: 0;
            /*  overflow-x: hidden;*/
        }


        .typicon {
            float: right;
            margin-top: 1px;
            margin-right: 5px;
        }




        #div_patient_ele_flex {
            display: flex;
            /*  flex-direction: column;*/
            flex-wrap: wrap;
        }

        #ele_patient {
            order: 2;
            grid-row: 1;
            width: 215px;
        }

        #ele_species {
            order: 7;
            width: 110px;
            margin-left: 0px;
        }

        #ele_patientid {
            order: 1;
            width: 110px;
            margin-left: 0px;
        }

        #ele_breed {
            order: 8;
            width: 215px;
        }

        #ele_lastdate {
            order: 4;
            width: 80px;
        }


        #ele_castrated {
            order: 6;
            width: 18px;
            height: 18px;
            margin-top: 0px;
            margin-left: 25px;
            font-size: 16px;
        }


        #ele_patientsex {
            order: 5;
            width: 18px;
            height: 18px;
            margin-left: 15px;
            margin-top: 0px;
            font-size: 16px;
        }

        #ele_birthdate {
            order: 3;
            width: 108px;
            margin-left: 0px;
        }
    }



    @media only screen and (min-width: 901px) {


        .acchead {
            cursor: pointer;
            width: 100%;
            outline: none;
            text-align: left;
            font-size: 15px;
            color: #ffffff;
            background: #303030;
            text-decoration: none;
            font-weight: 400;
            font-style: normal;
            border: none;
            border-top: 1px solid #455a64;
            padding: 10px 20px;
        }

        .ui-dialog-content {
            padding: 10px;
            max-height: 450px;
            height: 450px;
            overflow-y: scroll;
        }

        .ui-dialog {
            z-index: 3;
            background: inherit;
            min-width: 600px;
            /*max-height: 500px;*/
            border-color: #455a64;
            border-width: 1px;
            border-style: solid;
        }


        .ui-dialog-titlebar {
            color: white;
            background: #455a64;
            padding: 5px;
        }


        .ui-button-icon-only {
            float: right;
        }

        .ui-button {
            background-color: rgb(238,255,65);
            border: none;
            border-radius: 2px;
            color: #000;
            position: relative;
            margin: 0;
            min-width: 64px;
            padding: 0 16px;
            display: inline-block;
            font-family: "Roboto","Helvetica","Arial",sans-serif;
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0;
            overflow: hidden;
            will-change: box-shadow;
            transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
            outline: none;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            vertical-align: middle;
        }


        .gallery-figcaption-top {
            background-color: inherit;
            color: inherit;
            /* max-width: 192px;*/
            font-size: 11px;
            display: block;
            margin-top: 0px;
            margin-right: 25px;
            /*float: left;*/
            position: relative;
            top: 0;
            height: 25px;
        }

        .gallery-figcaption-bottom {
            background-color: inherit;
            color: inherit;
            /* max-width: 192px;*/
            font-size: 11px;
            display: block;
            margin-right: 25px;
            margin-top: -25px;
            /*float: left;*/
            position: relative;
            top: 0;
            height: 25px;
            text-align: left;
        }
        /* The Images */
        .gallery-img {
            margin-top: -25px;
            margin-right: 25px;
            /*  width: 215px;*/
            min-height: 215px;
            object-fit: contain;
            transition: opacity 0.25s ease-in-out;
        }

        .gallery-figcaption-right {
            /*      background-color: #00bcd4; */
            color: inherit;
            /* max-width: 192px; */
            font-size: 11px;
            display: block;
            margin-top: -217px;
            margin-left: 217px;
            /* float: left; */
            position: relative;
            top: 0;
            height: 220px;
            width: 22px;
            text-align: left;
            /* border-radius: 2px;*/
        }

        .gallery-figcaption-right-ext {
            background-color: #424242;
            color: inherit;
            /* max-width: 192px; */
            font-size: 11px;
            display: block;
            margin-top: -217px;
            /* float: left; */
            position: relative;
            top: 0;
            height: 100%;
            text-align: left;
        }


        .series_header {
            border-radius: 0px;
            margin-left: 25px;
            margin-bottom: 1px;
            /*  margin: 5px;*/
            /*   border-radius: 5px;*/
            margin-top: 15px;
            padding-left: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            box-shadow: 2px 2px 20px black;
        }


        .gallery-frame {
            margin-block-start: 7px;
            margin-inline-start: 40px;
            margin-block-end: 0px;
            margin-inline-end: 0px;
        }

        .patient_header {
            border-radius: 0px;
            margin-left: 5px;
            margin-top: 10px;
            padding-left: 29px;
            padding-top: 6px;
            padding-bottom: 6px;
            box-shadow: 2px 2px 20px black;
        }



        .study_header {
            margin-left: 15px;
            border-radius: 0px;
            /*       margin: 5px;*/
            margin-top: 15px;
            background-color: #607d8b;
            color: black;
            padding-left: 19px;
            padding-top: 5px;
            padding-bottom: 5px;
            box-shadow: 2px 2px 20px black;
        }




        .gallery-img {
            width: 215px;
            height: 215px;
        }

        .gallery-grid {
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            grid-gap: 0.5rem;
            width: calc(100% - 45px);
        }



        .splitleft_top {
            /*   height: 50%;*/
            width: 500px;
            position: fixed;
            top: 0;
            overflow-x: hidden;
            border-bottom-color: #455a64;
            border-bottom-width: 1px;
            border-bottom-style: solid;
        }

        .splitleft_bottom {
            /* height: 75%;*/
            width: 492px;
            position: fixed;
            top: 200px;
            overflow-x: hidden;
        }

        .textboxsearch {
            /*   height: 50%;*/
            width: 300px;
        }

        .mobile {
            /*    display: block;*/
        }

        .splitright {
            height: 100%;
            width: auto;
            left: 501px;
            position: fixed;
            /*         position: fixed;*/
            /*   top: 0;*/
            /*   overflow-x: hidden;*/
        }

        .splitmiddle {
            height: 100%;
            width: 1px;
            left: 500px;
            position: fixed;
            top: 0;
            /*  overflow-x: hidden;*/
        }


        #div_patient_ele_flex {
            display: block;
            /*  flex-direction: column;*/
            flex-wrap: wrap;
        }

        #ele_patient {
            order: 2;
            grid-row: 1;
            width: 215px;
        }

        #ele_species {
            order: 7;
            width: 110px;
            margin-left: 10px;
        }

        #ele_patientid {
            order: 1;
            width: 110px;
            margin-left: 10px;
        }

        #ele_breed {
            order: 8;
            width: 215px;
        }

        #ele_lastdate {
            order: 6;
            width: 80px;
        }


        #ele_castrated {
            order: 5;
            width: 18px;
            height: 18px;
            margin-top: 0px;
            font-size: 16px;
        }


        #ele_patientsex {
            order: 4;
            width: 18px;
            height: 18px;
            margin-top: 0px;
            font-size: 16px;
        }

        #ele_birthdate {
            order: 3;
            width: 80px;
            margin-left: 0px;
        }
    }

    @media only screen and (max-width: 900px) {
        .toolbar_top {
            display: flex;
            align-items: stretch;
            width: 100% !important;
            max-width: 100vw;
            box-sizing: border-box;
            padding-top: 0;
            padding-left: 0;
            padding-right: 78px;
            height: 42px;
            overflow: hidden;
            position: relative;
        }

        .toolbar_top_buttons {
            min-width: 44px;
            padding-left: 16px !important;
            padding-right: 12px !important;
        }

        #btn_toggletags {
            display: none !important;
        }

        .account-menu-anchor {
            position: absolute;
            top: 0;
            right: 0;
            height: 42px;
            display: inline-flex !important;
            align-items: stretch;
            z-index: 3;
        }

        .toolbar_top_buttons--user {
            display: inline-flex !important;
            min-width: 74px;
            max-width: 92px;
            width: auto !important;
            height: 42px;
            padding-left: 8px !important;
            padding-right: 8px !important;
            border-right: 0 !important;
            justify-content: flex-end;
            background: rgba(30, 39, 44, 0.96);
            font-size: 11px !important;
            overflow: visible !important;
        }

        .toolbar_top_buttons--user.mobile {
            display: inline-flex !important;
        }

        .toolbar_top_buttons--user,
        .toolbar_top_buttons--user:hover,
        .toolbar_top_buttons--user:focus,
        .toolbar_top_buttons--user .material-icons {
            color: white !important;
        }

        .toolbar_current_user {
            display: block;
            min-width: 0;
            max-width: 58px;
            color: white;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: right;
        }

        .toolbar_top_buttons--user .material-icons {
            margin-left: 2px;
            font-size: 16px;
        }

        .gallery-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            box-sizing: border-box;
            justify-items: stretch;
            align-items: start;
            gap: 10px;
            padding: 6px 8px 14px 6px;
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
        }

        .gallery-frame {
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border-color: rgba(89, 128, 146, .46);
            background: linear-gradient(0deg, rgba(11, 25, 34, .98) 0%, rgba(7, 18, 26, .98) 100%);
        }

        .gallery-main-content {
            display: flex;
            flex-direction: column;
            /* min-height: 210px; */
            /* padding: 34px 8px 0; */
            background: transparent;
        }

        .gallery-figcaption-top {
            position: absolute;
            top: 7px;
            left: 7px;
            right: 7px;
            z-index: 7;
            margin: 0;
            padding: 0;
            height: 28px;
            line-height: 16px;
            overflow: visible;
            border: none;
            background: transparent;
            pointer-events: none;
        }

        .gallery-figcaption-top > div:first-child,
        .gallery-figcaption-top .quick-preview-tile-button {
            pointer-events: auto;
        }

        .gallery-figcaption-top > div:first-child {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            opacity: .82;
        }

        .gallery-figcaption-top > div:nth-child(2) {
            display: none;
        }

        .gallery-figcaption-top .mdl-button {
            width: 26px;
            min-width: 26px;
            height: 26px;
            border-radius: 6px;
            background: rgba(9, 16, 22, .78);
            color: rgba(234, 246, 251, .9);
            box-shadow: 0 3px 10px rgba(0,0,0,.35);
        }

        .quick-preview-tile-button {
            position: absolute;
            top: 0;
            right: 0;
            width: 28px;
            min-width: 28px;
            height: 28px;
            margin: 0;
            border: 1px solid rgba(116, 162, 181, .55);
            border-radius: 6px;
            background: rgba(9, 16, 22, .84);
            color: rgba(230, 244, 250, .95);
            box-shadow: 0 3px 10px rgba(0,0,0,.35);
        }

        .quick-preview-tile-button:hover,
        .quick-preview-tile-button:focus {
            background: rgba(19, 39, 50, .94);
            color: #d5f800;
            transform: none;
            box-shadow: 0 4px 14px rgba(0,0,0,.42);
        }

        .quick-preview-tile-button .material-icons {
            font-size: 17px;
        }

        .gallery-img {
            width: 100%;
            height: 148px;
            min-height: 148px;
            margin: 0;
            object-fit: contain;
            background: #05090d;
            border-radius: 6px;
        }

        .gallery-figcaption-bottom {
            margin: 0;
            padding: 7px 4px 8px;
            height: 30px;
            line-height: 16px;
            overflow: hidden;
            border: none;
            background: transparent;
            color: rgba(216, 229, 235, .86);
        }

        .gallery-figcaption-bottom .mdl-icon-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            min-width: 24px;
            margin: -4px 4px 0 0 !important;
            padding: 0;
            border: 1px solid #46d9ee;
            border-radius: 50%;
            color: #46d9ee;
            cursor: pointer;
            box-sizing: border-box;
        }

        .gallery-figcaption-bottom .mdl-icon-toggle__label.material-icons {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            min-width: 18px;
            height: 18px;
            border: none;
            border-radius: 0;
            font-size: 17px;
            line-height: 18px;
            color: #46d9ee;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .gallery-figcaption-bottom > div {
            font-size: 12px;
        }

        .gallery-figcaption-bottom > .material-icons {
            color: rgba(216, 229, 235, .78);
            font-size: 17px;
        }

        .gallery-frame:not(.is-tag-open) > .gallery-figcaption-right {
            top: 7px;
            left: 36px;
            right: auto;
            margin: 0;
            width: auto;
            min-width: 0;
            height: 28px;
            min-height: 28px;
            z-index: 8;
        }

        .gallery-frame:not(.is-tag-open) .element-tag-container {
            position: static;
            inset: auto;
            display: block;
        }

        .gallery-frame:not(.is-tag-open) .tile-tag-shell {
            height: 28px;
        }

        .gallery-frame:not(.is-tag-open) .tile-tag-rail {
            width: auto;
            min-width: 58px;
            height: 28px;
            padding: 0 9px 0 7px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            border: 1px solid rgba(116, 162, 181, .55);
            border-radius: 6px;
            background: rgba(9, 16, 22, .84);
            color: rgba(230, 244, 250, .95);
            box-shadow: 0 3px 10px rgba(0,0,0,.35);
        }

        .gallery-frame:not(.is-tag-open) .tile-tag-rail::after {
            content: "Tags";
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
        }

        .gallery-frame:not(.is-tag-open) .tile-tag-rail .material-icons {
            font-size: 16px;
        }

        .gallery-frame.is-tag-open {
            grid-column: span 1;
            width: 100%;
            max-width: 100%;
        }

        .gallery-frame.is-tag-open > .gallery-main-content {
            flex: 1 1 auto;
        }

        .gallery-frame.is-tag-open > .gallery-figcaption-right {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            min-width: 0;
            max-width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
        }

        .gallery-frame.is-tag-open .tile-tag-shell {
            width: 100%;
            justify-content: flex-end;
            flex-direction: row-reverse;
        }

        .gallery-frame.is-tag-open .tile-tag-panel {
            width: min(160px, calc(100% - var(--tile-tag-rail-width)));
            max-width: min(160px, calc(100% - var(--tile-tag-rail-width)));
            min-width: 0;
            padding: 10px 8px;
            box-shadow: -10px 0 18px rgba(0, 0, 0, 0.28);
        }

        .gallery-frame.is-tag-open .tile-tag-list {
            max-height: 196px;
        }

        body:not(.mobile-patient-view) .leftside {
            display: block;
            width: 100vw;
            max-width: 100vw;
            overflow: hidden;
        }

        body:not(.mobile-patient-view) #div_leftcontainer_settings,
        body:not(.mobile-patient-view) #div_leftcontainer_patient {
            width: 100vw !important;
            max-width: 100vw;
            box-sizing: border-box;
        }

        body:not(.mobile-patient-view) .leftcontainer_outer,
        body:not(.mobile-patient-view) .leftcontainer_inner {
            width: 100%;
            max-width: none;
            box-sizing: border-box;
        }

        body:not(.mobile-patient-view) .leftcontainer_inner {
            margin: 0;
            padding: 0 10px;
        }

        body:not(.mobile-patient-view) .splitmiddle,
        body:not(.mobile-patient-view) #div_rightcontainer_data {
            display: none;
        }

        body.mobile-patient-view .leftside,
        body.mobile-patient-view .splitmiddle {
            display: none;
        }

        body.mobile-patient-view #div_rightcontainer_data {
            left: 0 !important;
            width: 100vw !important;
            z-index: 4;
        }
    }

    @media only screen and (max-width: 480px) {
        .toolbar_top {
            padding-right: 72px;
        }

        .toolbar_top_buttons {
            min-width: 40px;
            padding-left: 11px !important;
            padding-right: 9px !important;
        }

        .toolbar_top_buttons--user {
            min-width: 68px;
            max-width: 82px;
            padding-left: 6px !important;
            padding-right: 6px !important;
        }

        .toolbar_current_user {
            max-width: 50px;
        }

        #menu_username,
        #menu_username:hover,
        #menu_username:focus,
        #menu_username .toolbar_current_user,
        #menu_username .material-icons {
            color: white !important;
        }

        .gallery-main-content {
            /* min-height: 220px; */
        }

        .gallery-img {
            height: 150px;
            min-height: 150px;
        }

        .gallery-figcaption-top {
            height: 24px;
            padding-top: 5px;
        }

        .gallery-figcaption-bottom {
            height: 30px;
            padding-top: 4px;
        }

        .gallery-frame.is-tag-open .tile-tag-panel {
            width: min(138px, calc(100% - var(--tile-tag-rail-width)));
            max-width: min(138px, calc(100% - var(--tile-tag-rail-width)));
            padding: 8px 6px;
        }
    }

    /* z-index: search panel dropdowns over patient results */
    .splitleft_top { z-index: 2; }
    .splitleft_bottom { z-index: 1; }

    /* --- Additional search fields --- */
    #search_fields_container {
        display: flex;
        flex-wrap: wrap;
        gap: 0 8px;
    }
    .search-field-row {
        position: relative;
        flex: 1 1 calc(50% - 4px);
        min-width: 120px;
    }
    .search-field-remove {
        position: absolute;
        right: 0;
        top: 10px;
        width: 20px;
        height: 20px;
        border: none;
        border-radius: 999px;
        background: rgba(255,255,255,0.1);
        color: #aaa;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .search-field-remove:hover { color: #fff; background: rgba(229,57,53,0.7); }
    .search-field-remove .material-icons { font-size: 14px; }

    #tbx_searchtext { box-sizing: border-box; padding-right: 32px; }
    .search-field-clear {
        position: absolute;
        right: 0;
        top: 16px;
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: #a8bbc3;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .search-field-clear .material-icons { font-size: 16px; }
    .search-field-clear:hover { color: #fff; background: rgba(255,255,255,0.1); }
    .search-field-clear:focus-visible { outline: 2px solid #aeea00; outline-offset: -2px; }

    /* --- Mini vertical button menu --- */
    .search-btn-menu {
        display: flex;
        flex-direction: column;
        gap: 1px;
        margin-top: 6px;
        background: rgba(255,255,255,0.06);
        border-radius: 4px;
        overflow: hidden;
    }
    .search-btn-menu button {
        width: 32px !important;
        min-width: 32px !important;
        height: 26px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .search-btn-menu button i.material-icons { font-size: 17px; margin-top: -10px; }

    .case-tools {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    .case-tools .case-tool-button.mdl-button {
        width: 50px;
        min-width: 50px;
        height: 40px;
        margin: 0;
        padding: 0;
        border: 1px solid #dfff21;
        border-radius: 6px;
        background: rgba(5, 18, 27, 0.82) !important;
        color: #dfff21 !important;
        box-shadow: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
    }

    .case-tools .case-tool-button.mdl-button:hover,
    .case-tools .case-tool-button.mdl-button:focus {
        background: rgba(223, 255, 33, 0.12) !important;
        border-color: #eeff41;
        color: #eeff41 !important;
        box-shadow: 0 0 0 1px rgba(223, 255, 33, 0.22), 0 0 16px rgba(223, 255, 33, 0.14);
    }

    .case-tools .case-tool-button .material-icons {
        margin: 0;
        font-size: 28px;
        line-height: 1;
    }

    @media only screen and (max-width: 420px) {
        .case-tools {
            gap: 8px;
        }

        .case-tools .case-tool-button.mdl-button {
            flex: 1 1 45px;
            min-width: 45px;
            height: 40px;
        }

        .case-tools .case-tool-button .material-icons {
            font-size: 24px;
        }
    }

    /* --- History popup (draggable) --- */
    .search-history-popup {
        display: none;
        position: fixed;
        z-index: 9999;
        width: 340px;
        background: #2a2f33;
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 6px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.5);
        max-height: 400px;
        overflow-y: auto;
        resize: both;
    }
    .search-history-popup.is-open { display: block; }
    .search-history-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 700;
        color: #aeea00;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        cursor: move;
        user-select: none;
    }
    .search-history-close {
        width: 22px; height: 22px; border: none; border-radius: 999px;
        background: rgba(255,255,255,0.1); color: #fff; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center; padding: 0;
    }
    .search-history-list { padding: 4px 0; }
    .search-history-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px 10px;
        cursor: pointer;
        font-size: 12px;
        color: #e0e0e0;
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .search-history-item:hover { background: rgba(174,234,0,0.1); }
    .search-history-item-info { flex: 1; min-width: 0; }
    .search-history-item-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .search-history-item-detail { font-size: 11px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .search-history-pin {
        width: 24px; height: 24px; border: none; border-radius: 999px;
        background: none; color: #666; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center; padding: 0;
    }
    .search-history-pin:hover { color: #aeea00; }
    .search-history-pin.is-pinned { color: #aeea00; }
    .search-history-pin .material-icons { font-size: 16px; }
    .search-history-empty { padding: 20px; text-align: center; color: #666; font-size: 12px; }

    /* --- Vetera Lookup Popup --- */
    .vetera-lookup-btn {
        width: 20px; height: 20px; border: none; border-radius: 999px;
        background: #d9ef2c; color: #263238; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center; padding: 0;
        vertical-align: middle; margin: -2px 2px 0 2px;
    }
    .vetera-lookup-btn:hover { background: rgba(174,234,0,0.4); }
    .vetera-lookup-btn .material-icons { font-size: 14px; }

    .vetera-popup {
        display: none;
        position: fixed;
        z-index: 10000;
        width: 460px;
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        box-sizing: border-box;
        background: #2a2f33;
        border: 1px solid rgba(174,234,0,0.3);
        border-radius: 6px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.6);
        font-size: 12px;
        color: #e0e0e0;
        overflow: hidden;
    }
    .vetera-popup.is-open {
        display: flex;
        flex-direction: column;
    }
    .vetera-popup-header {
        display: flex; justify-content: space-between; align-items: center;
        flex: 0 0 auto;
        padding: 6px 10px; font-size: 12px; font-weight: 700; color: #aeea00;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        cursor: move; user-select: none;
    }
    .vetera-popup-close {
        width: 22px; height: 22px; border: none; border-radius: 999px;
        background: rgba(255,255,255,0.1); color: #fff; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center; padding: 0;
    }
    .vetera-popup-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(100dvh - 82px);
        padding: 8px 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .vetera-popup-row {
        display: flex; padding: 3px 12px; border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .vetera-popup-label { width: 120px; color: #999; flex-shrink: 0; font-size: 11px; }
    .vetera-popup-value { flex: 1; min-width: 0; word-break: break-word; }
    .vetera-popup-icon { margin-right: 6px; color: #aeea00; font-size: 15px; vertical-align: middle; }
    .vetera-popup-loading { padding: 20px; text-align: center; color: #666; }
    .vetera-popup-section { padding: 4px 12px 2px; font-weight: 700; color: #aeea00; font-size: 11px; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 4px; }

    @media only screen and (max-width: 900px) {
        .vetera-popup {
            width: calc(100vw - 16px);
            max-width: calc(100vw - 16px);
            max-height: calc(100dvh - 16px);
            border-radius: 8px;
            box-shadow: 0 12px 28px rgba(0, 0, 0, .48);
        }

        .vetera-popup-header {
            min-height: 36px;
            padding: 7px 10px;
            cursor: default;
        }

        .vetera-popup-body {
            max-height: calc(100dvh - 64px);
            padding: 6px 0;
        }

        .vetera-popup-row {
            display: grid;
            grid-template-columns: 22px minmax(0, 1fr);
            gap: 2px 8px;
            padding: 7px 10px;
        }

        .vetera-popup-icon {
            grid-row: 1 / span 2;
            margin: 1px 0 0;
            font-size: 16px;
        }

        .vetera-popup-label {
            width: auto;
            font-size: 11px;
            line-height: 1.15;
        }

        .vetera-popup-value {
            font-size: 13px;
            line-height: 1.25;
        }
    }

    #div_patient_data {
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    #div_patient_data .gallery-frame {
        contain: layout paint;
        border: 1px solid rgba(158, 181, 193, 0.24);
        border-radius: 8px;
        background: linear-gradient(0deg, rgba(49, 56, 61, 0.98) 0%, rgba(35, 41, 46, 0.98) 100%);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    }

    #div_patient_data .gallery-frame:not(.is-tag-open) {
        content-visibility: auto;
        contain-intrinsic-size: 246px 240px;
    }

    #div_patient_data .gallery-frame.is-virtualized:not(.is-tag-open) {
        height: var(--mview-tile-height, 246px);
        min-height: var(--mview-tile-height, 246px);
        overflow: hidden;
        content-visibility: hidden;
        contain: strict;
    }

    #div_patient_data .gallery-frame.is-virtualized:not(.is-tag-open) > * {
        visibility: hidden;
    }

    #div_patient_data .gallery-grid:has(.mdl-menu__container.is-visible),
    #div_patient_data .study_header:has(.mdl-menu__container.is-visible),
    #div_patient_data .series_header:has(.mdl-menu__container.is-visible),
    #div_patient_data .gallery-frame:has(.mdl-menu__container.is-visible),
    #div_patient_data .gallery-main-content:has(.mdl-menu__container.is-visible) {
        position: relative;
        z-index: 10050;
        overflow: visible !important;
    }

    #div_patient_data .gallery-figcaption-top:has(.mdl-menu__container.is-visible) {
        z-index: 10060;
        overflow: visible !important;
    }

    #div_patient_data .gallery-figcaption-top > div:first-child:has(.mdl-menu__container.is-visible) {
        opacity: 1 !important;
    }

    #div_patient_data .gallery-frame:has(.mdl-menu__container.is-visible) {
        contain: none !important;
        content-visibility: visible !important;
    }

    #div_patient_data .gallery-main-content:has(.mdl-menu__container.is-visible),
    #div_patient_data .gallery-figcaption-top:has(.mdl-menu__container.is-visible) {
        z-index: 10060;
    }

    #div_patient_data .mdl-menu__container.is-visible {
        z-index: 10070 !important;
        overflow: visible !important;
        background: #424242 !important;
    }

    #div_patient_data .mdl-menu__container.is-visible .mdl-menu__outline {
        background: #424242 !important;
    }

    #div_patient_data .mdl-menu__container.is-visible .mdl-menu,
    #div_patient_data .mdl-menu.is-visible {
        z-index: 10071 !important;
        background: #424242 !important;
        color: #fff !important;
    }

    #div_patient_data .mdl-menu__container.is-visible .mdl-menu__item,
    #div_patient_data .mdl-menu.is-visible .mdl-menu__item {
        background: #424242;
        color: rgba(255, 255, 255, .87);
    }

    #div_patient_data .mdl-menu__container.is-visible .mdl-menu__item:hover,
    #div_patient_data .mdl-menu__container.is-visible .mdl-menu__item:focus,
    #div_patient_data .mdl-menu.is-visible .mdl-menu__item:hover,
    #div_patient_data .mdl-menu.is-visible .mdl-menu__item:focus {
        background: #515151;
    }

    #div_patient_data .patient_header,
    #div_patient_data .study_header,
    #div_patient_data .series_header {
        position: relative;
        left: auto;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        width: calc(100% - 20px);
        min-height: 38px;
        margin: 5px 10px 4px;
        padding: 0;
        overflow: visible;
        border: 1px solid rgba(95, 190, 220, .46);
        border-radius: 6px;
        color: rgba(247, 252, 255, .95);
        background:
            radial-gradient(circle at 86% 92%, rgba(40, 230, 255, .12), transparent 30%),
            linear-gradient(315deg, rgba(9, 36, 48, .98) 0%, rgba(6, 24, 34, .98) 58%, rgba(7, 16, 24, .98) 100%);
        box-shadow: inset 3px 0 0 rgba(33, 221, 236, .55), inset 0 0 0 1px rgba(255,255,255,.035), 0 8px 18px rgba(0,0,0,.22);
        transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
    }

    #div_patient_data .patient_header {
        position: sticky;
        top: 0;
        z-index: 19;
        min-height: 44px;
        border-color: rgba(42, 216, 238, .55);
        background: #263238;
    }

    #div_patient_data .study_header {
        min-height: 42px;
        border-color: rgba(118, 174, 204, .54);
        background: #455a64;
        /* box-shadow: inset 3px 0 0 rgba(160, 205, 230, .6), inset 0 0 0 1px rgba(255, 255, 255, .035), 0 8px 18px rgba(0, 0, 0, .2); */
    }

    #div_patient_data .series_header {
        min-height: 38px;
        margin-top: 5px;
        border-color: rgba(160, 205, 230, .58);
        background: #546e7a;
        /* box-shadow: inset 3px 0 0 rgba(205, 228, 240, .56), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 7px 16px rgba(0, 0, 0, .18); */
    }

    #div_patient_data .patient_header:hover,
    #div_patient_data .study_header:hover,
    #div_patient_data .series_header:hover {
        color: #fff;
        border-color: rgba(213, 248, 0, .56);
        box-shadow: inset 3px 0 0 rgba(213, 248, 0, .85), inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.3);
    }

    #div_patient_data .patient_header > .div_menuandcheck,
    #div_patient_data .study_header > .div_menuandcheck,
    #div_patient_data .series_header > .div_menuandcheck {
        position: relative;
        z-index: 2;
        display: flex;
        flex: 0 0 50px;
        flex-direction: row;
        align-items: flex-start;
        align-self: stretch;
        justify-content: flex-start;
        width: 50px;
        padding: 5px 0 0 8px;
        gap: 0;
        overflow: visible;
    }

    #div_patient_data .patient_header > div:not(.div_menuandcheck),
    #div_patient_data .study_header > div:not(.div_menuandcheck),
    #div_patient_data .series_header > div:not(.div_menuandcheck) {
        position: relative;
        z-index: 1;
        display: flex;
        flex: 1 1 auto;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        min-width: 0;
        padding: 7px 12px 7px 0;
        gap: 5px 18px;
        overflow: visible;
    }

    #div_patient_data .patient_header > div:not(.div_menuandcheck) {
        gap: 4px 17px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    #div_patient_data .series_header > div:not(.div_menuandcheck) {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    #div_patient_data .patient_header .patientresultselements,
    #div_patient_data .study_header .patientresultselements,
    #div_patient_data .series_header .patientresultselements {
        display: inline-flex;
        align-items: center;
        width: auto;
        max-width: min(42vw, 460px);
        min-width: 0;
        min-height: 18px;
        margin: 0 !important;
        color: inherit;
        font-size: 13px;
        line-height: 1.2;
        letter-spacing: 0;
        text-shadow: 0 1px 2px rgba(0,0,0,.28);
        white-space: normal;
        overflow: visible;
        overflow-wrap: anywhere;
        text-overflow: clip;
    }

    #div_patient_data .patient_header .patientresultselements:first-child,
    #div_patient_data .study_header .patientresultselements:nth-child(2),
    #div_patient_data .series_header .patientresultselements:nth-child(2) {
        font-weight: 700;
        max-width: min(34vw, 390px);
    }

    #div_patient_data .patient_header .mdl-button,
    #div_patient_data .study_header .mdl-button,
    #div_patient_data .series_header .mdl-button {
        width: 24px;
        min-width: 24px;
        height: 24px;
        margin: 0 !important;
        border-radius: 6px;
        color: rgba(247,252,255,.94);
    }

    #div_patient_data .patient_header .mdl-button:hover,
    #div_patient_data .study_header .mdl-button:hover,
    #div_patient_data .series_header .mdl-button:hover {
        background: rgba(255,255,255,.08);
    }

    #div_patient_data .patient_header .mdl-icon-toggle,
    #div_patient_data .study_header .mdl-icon-toggle,
    #div_patient_data .series_header .mdl-icon-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        margin: 0 !important;
        color: rgba(88, 232, 255, .95);
    }

    #div_patient_data .patient_header .mdl-icon-toggle__label,
    #div_patient_data .study_header .mdl-icon-toggle__label,
    #div_patient_data .series_header .mdl-icon-toggle__label {
        font-size: 19px;
        line-height: 24px;
    }

    #div_patient_data .patient_header .vetera-lookup-btn,
    #div_patient_data .study_header .vetera-lookup-btn {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        min-width: 22px;
        border-radius: 999px;
        background: #d5f800;
        color: #07141b;
        box-shadow: 0 0 12px rgba(213, 248, 0, .36);
    }

    #div_patient_data .patient_header .vetera-lookup-btn .material-icons,
    #div_patient_data .study_header .vetera-lookup-btn .material-icons {
        font-size: 16px;
        line-height: 22px;
    }

        #div_patient_data .patient_header > .patient-card-content {
            display: grid;
            grid-template-columns: minmax(230px, auto) auto minmax(260px, 1fr);
            align-items: center;
            flex: 1 1 auto;
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
            gap: 8px 16px;
            padding: 7px 12px 7px 0;
        }

    #div_patient_data .patient-card-main {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        min-width: 0;
        gap: 5px 13px;
    }

    #div_patient_data .patient-card-kicker {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        color: rgba(198, 238, 246, .88);
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
    }

    #div_patient_data .patient-card-kicker .material-icons {
        font-size: 17px;
        line-height: 17px;
    }

    #div_patient_data .patient_header .patient-card-name {
        max-width: min(34vw, 430px);
        font-size: 14px;
        font-weight: 800;
    }

    #div_patient_data .patient-card-summary {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        min-width: 0;
        gap: 5px 10px;
    }

    #div_patient_data .patient_header .patient-card-id {
        max-width: 260px;
        padding: 3px 9px;
        border-radius: 999px;
        background: rgba(33, 221, 235, .15);
        color: rgba(234, 252, 255, .95);
        box-shadow: inset 0 0 0 1px rgba(33, 221, 235, .22);
    }

    #div_patient_data .patient_header .patient-card-summary-item {
        gap: 5px;
        max-width: 160px;
    }

    #div_patient_data .patient-card-summary-item .material-icons {
        font-size: 17px;
        line-height: 17px;
    }

    #div_patient_data .patient_header .patient-card-search {
        justify-self: start;
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

        #div_patient_data .patient-card-details {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            width: 100%;
            min-width: 0;
            gap: 5px 13px;
        }

    #div_patient_data .patient-card-detail {
        display: inline-grid;
        grid-template-columns: auto auto minmax(0, auto);
        align-items: center;
        min-width: 0;
        max-width: min(30vw, 360px);
        gap: 5px;
        color: rgba(232, 244, 249, .9);
        font-size: 13px;
        line-height: 1.2;
    }

    #div_patient_data .patient-card-detail .material-icons {
        color: rgba(203, 220, 229, .78);
        font-size: 16px;
        line-height: 16px;
    }

    #div_patient_data .patient-card-detail span {
        color: rgba(203, 220, 229, .82);
        font-weight: 700;
    }

    #div_patient_data .patient-card-detail strong {
        min-width: 0;
        overflow-wrap: anywhere;
        color: rgba(247, 252, 255, .96);
        font-weight: 600;
    }

    @media only screen and (max-width: 900px) {
        #div_patient_data .patient_header,
        #div_patient_data .study_header,
        #div_patient_data .series_header {
            width: calc(100% - 16px);
            min-height: 50px;
            margin: 8px 8px 6px;
            border-radius: 7px;
        }

        #div_patient_data .patient_header {
            min-height: 0;
            align-items: stretch;
            border-radius: 10px;
            background: #263238;
            /* box-shadow: inset 0 0 0 1px rgba(51, 226, 239, .22), inset 3px 0 0 rgba(33, 221, 235, .72), 0 12px 28px rgba(0, 0, 0, .34); */
        }

        #div_patient_data .study_header {
            min-height: 76px;
        }

        #div_patient_data .series_header {
            min-height: 52px;
            margin-top: 8px;
        }

        #div_patient_data .patient_header::after,
        #div_patient_data .study_header::after,
        #div_patient_data .series_header::after {
            content: none;
            right: 10px;
            font-size: 32px;
            opacity: .46;
        }

        #div_patient_data .patient_header > .div_menuandcheck,
        #div_patient_data .study_header > .div_menuandcheck,
        #div_patient_data .series_header > .div_menuandcheck {
            flex: 0 0 34px;
            width: 34px;
            padding: 5px 0 0 5px;
            align-self: stretch;
            align-items: flex-start;
            justify-content: flex-start;
            flex-direction: column;
            gap: 2px;
        }

        #div_patient_data .patient_header > div:not(.div_menuandcheck),
        #div_patient_data .study_header > div:not(.div_menuandcheck),
        #div_patient_data .series_header > div:not(.div_menuandcheck) {
            flex-wrap: wrap;
            padding: 10px 8px 10px 0;
            gap: 4px 9px;
            overflow: visible;
        }

        #div_patient_data .patient_header > div:not(.div_menuandcheck) {
            gap: 5px 8px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        #div_patient_data .patient_header > .patient-card-content {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 38px;
            grid-template-areas:
                "main search"
                "details details";
            align-content: start;
            align-items: start;
            padding: 10px 10px 12px 0;
            gap: 9px 8px;
        }

        #div_patient_data .patient-card-main {
            grid-area: main;
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 7px;
            align-items: start;
        }

        #div_patient_data .patient-card-kicker {
            min-height: 22px;
            padding: 0;
            color: rgba(235, 252, 255, .92);
            font-size: 13px;
            font-weight: 800;
        }

        #div_patient_data .patient-card-kicker .material-icons {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            background: rgba(223, 248, 252, .12);
            color: rgba(229, 251, 255, .95);
            font-size: 18px;
            line-height: 24px;
            text-align: center;
        }

        #div_patient_data .patient_header .patient-card-name {
            flex: 0 1 auto;
            max-width: 100%;
            min-height: 0;
            color: #f8fdff;
            font-size: 16px;
            font-weight: 800;
            line-height: 1.18;
            text-shadow: 0 2px 8px rgba(0,0,0,.36);
        }

        #div_patient_data .patient-card-summary {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 7px 9px;
        }

        #div_patient_data .patient_header .patient-card-id {
            max-width: 100%;
            padding: 5px 10px;
            border-radius: 999px;
            background: rgba(36, 182, 177, .36);
            color: rgba(234, 252, 255, .95);
            font-size: 13px;
            box-shadow: inset 0 0 0 1px rgba(52, 225, 234, .22);
        }

        #div_patient_data .patient_header .patient-card-summary-item {
            max-width: 100%;
            gap: 5px;
            font-size: 13px;
            font-weight: 700;
        }

        #div_patient_data .patient-card-summary-item .material-icons {
            font-size: 18px;
            line-height: 18px;
        }

        #div_patient_data .patient_header .patient-card-search {
            grid-area: search;
            justify-self: end;
            align-self: center;
            width: 38px;
            height: 38px;
            min-width: 38px;
            border-radius: 9px;
            background: rgba(5, 35, 48, .82);
            color: rgba(238, 253, 255, .98);
            box-shadow: inset 0 0 0 1px rgba(62, 232, 245, .74), 0 8px 18px rgba(0,0,0,.3);
        }

        #div_patient_data .patient_header .patient-card-search .material-icons {
            font-size: 24px;
            line-height: 38px;
        }

        #div_patient_data .patient-card-details {
            grid-area: details;
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            width: 100%;
            box-sizing: border-box;
            gap: 0;
            margin-top: 2px;
            padding: 7px 9px;
            max-height: 150px;
            opacity: 1;
            overflow: hidden;
            border: 1px solid rgba(132, 172, 190, .24);
            border-radius: 9px;
            background: rgba(7, 24, 34, .42);
            box-shadow: inset 0 0 18px rgba(0,0,0,.18);
            transform: translateY(0);
            transition: opacity .16s ease, transform .16s ease, border-color .16s ease;
        }

        #div_patient_data .patient-card-detail {
            display: grid;
            grid-template-columns: 21px minmax(78px, .38fr) minmax(0, 1fr);
            width: 100%;
            box-sizing: border-box;
            max-width: 100%;
            min-height: 28px;
            gap: 6px;
            padding: 3px 0;
            border-bottom: 1px solid rgba(169, 203, 218, .12);
            font-size: 12px;
        }

        #div_patient_data .patient-card-detail:last-child {
            border-bottom: none;
        }

        #div_patient_data .patient-card-detail .material-icons {
            color: rgba(214, 231, 238, .86);
            font-size: 17px;
            line-height: 18px;
        }

        #div_patient_data .patient-card-detail span {
            color: rgba(214, 231, 238, .78);
            font-weight: 700;
        }

        #div_patient_data .patient-card-detail strong {
            font-size: 12px;
            font-weight: 700;
            line-height: 1.25;
        }

        #div_patient_data.is-patient-header-collapsed .patient_header {
            margin-top: 4px;
            margin-bottom: 4px;
            box-shadow: inset 0 0 0 1px rgba(51, 226, 239, .22), inset 3px 0 0 rgba(213, 248, 0, .78), 0 10px 22px rgba(0,0,0,.3);
        }

        #div_patient_data.is-patient-header-collapsing .patient-card-details,
        #div_patient_data.is-patient-header-expanding .patient-card-details {
            opacity: 0;
            transform: translateY(-6px);
            border-color: transparent;
            pointer-events: none;
        }

        #div_patient_data.is-patient-header-collapsed .patient_header > .patient-card-content {
            grid-template-areas: "main search";
            padding-top: 7px;
            padding-bottom: 8px;
            gap: 5px 7px;
        }

        #div_patient_data.is-patient-header-collapsed .patient-card-main {
            gap: 5px;
        }

        #div_patient_data.is-patient-header-collapsed .patient-card-kicker {
            min-height: 0;
            height: 0;
            opacity: 0;
            overflow: hidden;
        }

        #div_patient_data.is-patient-header-collapsed .patient_header .patient-card-name {
            font-size: 14px;
            line-height: 1.12;
        }

        #div_patient_data.is-patient-header-collapsed .patient-card-summary {
            gap: 5px 7px;
        }

        #div_patient_data.is-patient-header-collapsed .patient_header .patient-card-id {
            padding: 3px 8px;
            font-size: 12px;
        }

        #div_patient_data.is-patient-header-collapsed .patient_header .patient-card-summary-item {
            font-size: 12px;
        }

        #div_patient_data.is-patient-header-collapsed .patient-card-summary-item:last-child {
            display: none;
        }

        #div_patient_data.is-patient-header-collapsed .patient_header .patient-card-search {
            width: 32px;
            height: 32px;
            min-width: 32px;
            border-radius: 8px;
        }

        #div_patient_data.is-patient-header-collapsed .patient_header .patient-card-search .material-icons {
            font-size: 21px;
            line-height: 32px;
        }

        #div_patient_data.is-patient-header-collapsed .patient-card-details {
            max-height: 0;
            margin-top: 0;
            padding-top: 0;
            padding-bottom: 0;
            opacity: 0;
            transform: translateY(-6px);
            border-color: transparent;
            pointer-events: none;
        }

        #div_patient_data .patient_header .patientresultselements,
        #div_patient_data .study_header .patientresultselements,
        #div_patient_data .series_header .patientresultselements {
            max-width: 100%;
            min-height: 18px;
            font-size: 12px;
            line-height: 1.28;
            white-space: normal;
        }

        #div_patient_data .patient_header .patientresultselements.patient-card-name {
            max-width: 100%;
            min-height: 0;
            color: #f8fdff;
            font-size: 16px;
            font-weight: 800;
            line-height: 1.18;
        }

        #div_patient_data .patient_header .patientresultselements.patient-card-id,
        #div_patient_data .patient_header .patientresultselements.patient-card-summary-item {
            font-size: 13px;
            line-height: 1.2;
        }

        #div_patient_data .patient_header .mdl-button,
        #div_patient_data .study_header .mdl-button,
        #div_patient_data .series_header .mdl-button {
            width: 28px;
            min-width: 28px;
            height: 28px;
        }

        #div_patient_data .patient_header .mdl-icon-toggle,
        #div_patient_data .study_header .mdl-icon-toggle,
        #div_patient_data .series_header .mdl-icon-toggle {
            width: 26px;
            height: 26px;
            margin-left: -3px !important;
        }
    }

    #div_patient_data .gallery-frame:hover {
        border-color: rgba(213, 248, 0, 0.44);
        background: linear-gradient(0deg, rgba(58, 70, 78, 0.98) 0%, rgba(40, 48, 54, 0.98) 100%);
        color: white;
        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);
    }

    #div_patient_data .gallery-img {
        transition: none;
    }

    #div_patient_data .mdl-js-ripple-effect,
    #div_patient_data .mdl-ripple {
        transition: none !important;
    }

    #div_patient_data .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 260px));
        justify-content: start;
        justify-items: stretch;
        align-items: start;
        gap: 14px;
        padding: 12px 14px 18px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    #div_patient_data .gallery-frame {
        display: flex;
        flex-direction: column;
        min-width: 0;
        max-width: 260px;
        width: 100%;
        margin: 0;
        overflow: hidden;
        border-color: rgba(89, 128, 146, .46);
        border-radius: 8px;
        background: linear-gradient(0deg, rgba(11, 25, 34, .98) 0%, rgba(7, 18, 26, .98) 100%);
        box-shadow: 0 10px 22px rgba(0, 0, 0, .32);
    }

    #div_patient_data .gallery-main-content {
        position: relative;
        display: flex;
        flex-direction: column;
        /* min-height: 250px; */
        /* padding: 8px 2px 0; */
        background: transparent;
    }

    #div_patient_data .gallery-figcaption-top {
        position: absolute;
        top: 7px;
        left: 7px;
        right: 7px;
        z-index: 7;
        height: 28px;
        margin: 0;
        padding: 0;
        overflow: visible;
        border: none;
        background: transparent;
        line-height: 16px;
        pointer-events: none;
    }

    #div_patient_data .gallery-figcaption-top > div:first-child,
    #div_patient_data .gallery-figcaption-top .quick-preview-tile-button {
        pointer-events: auto;
    }

    #div_patient_data .gallery-figcaption-top > div:first-child {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        opacity: .82;
    }

    #div_patient_data .gallery-figcaption-top > div:nth-child(2) {
        display: none;
    }

    #div_patient_data .gallery-figcaption-top .mdl-button {
        width: 26px;
        min-width: 26px;
        height: 26px;
        margin: 0 !important;
        border-radius: 6px;
        background: rgba(9, 16, 22, .78);
        color: rgba(234, 246, 251, .9);
        box-shadow: 0 3px 10px rgba(0,0,0,.35);
    }

    #div_patient_data .quick-preview-tile-button {
        position: absolute;
        top: 0;
        right: 0;
        width: 28px;
        min-width: 28px;
        height: 28px;
        margin: 0;
        border: 1px solid rgba(116, 162, 181, .55);
        border-radius: 6px;
        background: rgba(9, 16, 22, .84);
        color: rgba(230, 244, 250, .95);
        box-shadow: 0 3px 10px rgba(0,0,0,.35);
    }

    #div_patient_data .quick-preview-tile-button:hover,
    #div_patient_data .quick-preview-tile-button:focus {
        background: rgba(19, 39, 50, .94);
        color: #d5f800;
        transform: none;
        box-shadow: 0 4px 14px rgba(0,0,0,.42);
    }

    #div_patient_data .quick-preview-tile-button .material-icons {
        font-size: 17px;
    }

    #div_patient_data .quick-preview-launch-button {
        right: 32px;
    }

    #quick-preview-launch-menu {
        position: fixed;
        inset: auto;
        margin: 0;
        padding: 8px;
        width: 224px;
        max-width: calc(100vw - 16px);
        box-sizing: border-box;
        border: 1px solid #527887;
        border-radius: 8px;
        background: #10232d;
        color: #eef8fb;
        box-shadow: 0 8px 28px #0009;
    }

    #quick-preview-launch-menu strong { display: block; padding: 4px 8px 8px; }
    #quick-preview-launch-menu button {
        display: block;
        width: 100%;
        min-height: 44px;
        text-align: left;
        padding: 8px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }
    #quick-preview-launch-menu button:hover,
    #quick-preview-launch-menu button:focus-visible { background: #294954; outline: 2px solid #d5f800; }

    @media (pointer: coarse) {
        #div_patient_data .quick-preview-tile-button { width: 44px; min-width: 44px; height: 44px; }
        #div_patient_data .quick-preview-launch-button { right: 48px; }
    }

    #div_patient_data .teaching-export-context-menuitem .material-icons {
        margin-right: 8px;
        font-size: 18px;
        vertical-align: middle;
    }

    #div_teachingexportmodal .teaching-export-shell {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 360px;
        color: #f2f6f8;
    }

    .teaching-export-dialog .ui-dialog-titlebar {
        background: #455f68;
        color: #fff;
    }

    .teaching-export-dialog .ui-dialog-content {
        max-height: calc(100vh - 150px) !important;
        overflow: auto;
        background: #2e3331;
        box-sizing: border-box;
        padding-bottom: 0 !important;
    }

    .ui-dialog.teaching-export-dialog {
        max-width: calc(100vw - 24px);
    }

    #div_teachingexportmodal .mdl-textfield {
        margin: 0;
        padding: 18px 0 8px;
    }

    #div_teachingexportmodal .mdl-textfield__label {
        color: #d5f800;
        font-size: 12px;
        font-weight: 700;
    }

    #div_teachingexportmodal .mdl-textfield__input,
    #div_teachingexportmodal select.mdl-textfield__input,
    #div_teachingexportmodal textarea.mdl-textfield__input {
        color: #fff;
        border-bottom-color: rgba(156, 184, 195, .34);
        background: transparent;
    }

    #div_teachingexportmodal .mdl-textfield.is-disabled .mdl-textfield__input,
    #div_teachingexportmodal .mdl-textfield__input:disabled {
        color: rgba(255, 255, 255, .42);
        border-bottom-color: rgba(156, 184, 195, .18);
    }

    #div_teachingexportmodal .mdl-textfield.is-disabled .mdl-textfield__label {
        color: rgba(213, 248, 0, .45);
    }

    #div_teachingexportmodal .mdl-textfield__label:after {
        bottom: 8px;
        background-color: #d5f800;
    }

    #div_teachingexportmodal select.mdl-textfield__input option,
    #sel_teaching_existing_case_results option {
        background: #263238;
        color: #f4fbff;
    }

    #div_teachingexportmodal .teaching-export-selection {
        padding: 6px 0 2px;
        color: #fff;
        font-weight: 700;
    }

    #div_teachingexportmodal .teaching-export-target-grid,
    #div_teachingexportmodal .teaching-export-two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    #div_teachingexportmodal .teaching-export-target-grid {
        margin-top: 2px;
        padding: 7px 0 2px;
    }

    #div_teachingexportmodal .mdl-radio__label,
    #div_teachingexportmodal .mdl-checkbox__label {
        color: #f2f6f8;
        font-size: 16px;
        line-height: 1.35;
    }

    #div_teachingexportmodal .teaching-export-existing-tools {
        display: none;
        flex-direction: column;
        gap: 7px;
        margin: -2px 0 4px;
        padding: 10px 12px;
        border: 1px solid rgba(84, 110, 122, .85);
        border-radius: 6px;
        background: rgba(17, 30, 38, .44);
    }

    #div_teachingexportmodal .teaching-export-search-row {
        display: grid;
        grid-template-columns: 1fr 42px;
        gap: 8px;
        align-items: end;
    }

    #div_teachingexportmodal #btn_teaching_existing_case_search {
        color: #f2f6f8;
    }

    #div_teachingexportmodal #btn_teaching_existing_case_search:hover,
    #div_teachingexportmodal #btn_teaching_existing_case_search:focus {
        color: #d5f800;
        background: rgba(213, 248, 0, .1);
    }

    #sel_teaching_existing_case_results {
        width: 100%;
        min-height: 70px;
        border: 1px solid rgba(116, 162, 181, .55);
        border-radius: 4px;
        background: #263238;
        color: #f4fbff;
        font: inherit;
        outline: none;
        padding: 4px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
    }

    #sel_teaching_existing_case_results option {
        padding: 7px 8px;
        border-radius: 3px;
    }

    #sel_teaching_existing_case_results option:checked {
        background: #4F9593;
        color: #fff;
    }

    #teaching_existing_case_status {
        min-height: 18px;
        color: #cfd8dc;
        font-size: 12px;
        line-height: 1.45;
    }

    #div_teachingexportmodal .teaching-export-footer {
        position: sticky;
        bottom: 0;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin: 0 -2px;
        padding: 10px 2px 4px;
        border-top: 1px solid rgba(156, 184, 195, .22);
        background: #2e3331;
        z-index: 2;
    }

    #div_teachingexportmodal #btn_teaching_export_cancel {
        color: #e1edf2;
    }

    #div_teachingexportmodal #btn_teaching_export_start {
        min-width: 188px;
        color: #273238;
        font-weight: 700;
    }

    @media (max-width: 700px) {
        #div_teachingexportmodal .teaching-export-shell {
            min-width: 0;
        }

        #div_teachingexportmodal .teaching-export-target-grid,
        #div_teachingexportmodal .teaching-export-two-col {
            grid-template-columns: 1fr;
        }

        #div_teachingexportmodal .teaching-export-footer {
            flex-wrap: wrap;
        }
    }

    #div_patient_data .gallery-img {
        width: 100%;
        height: 218px;
        min-height: 218px;
        margin: 0;
        object-fit: contain;
        background: #05090d;
        border-radius: 6px;
    }

    #div_patient_data .gallery-figcaption-bottom {
        height: 32px;
        margin: 0;
        padding: 7px 4px 8px;
        overflow: hidden;
        border: none;
        background: transparent;
        color: rgba(216, 229, 235, .86);
        line-height: 16px;
    }

    #div_patient_data .gallery-figcaption-bottom .mdl-icon-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        min-width: 24px;
        margin: -4px 4px 0 0 !important;
        padding: 0;
        border: 1px solid #46d9ee;
        border-radius: 50%;
        color: #46d9ee;
        cursor: pointer;
        box-sizing: border-box;
    }

    #div_patient_data .gallery-figcaption-bottom .mdl-icon-toggle__label.material-icons {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        min-width: 18px;
        height: 18px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: none;
        border-radius: 0;
        color: #46d9ee;
        font-size: 17px;
        line-height: 18px;
    }

    #div_patient_data .gallery-figcaption-bottom .mdl-icon-toggle.is-checked,
    #div_patient_data .gallery-figcaption-bottom .mdl-icon-toggle:has(.mdl-icon-toggle__input:checked) {
        border-color: #d5f800;
        background: #d5f800;
        color: #07141b;
        box-shadow: 0 0 0 2px rgba(213, 248, 0, .24), 0 0 16px rgba(213, 248, 0, .5);
    }

    #div_patient_data .gallery-figcaption-bottom .mdl-icon-toggle.is-checked .mdl-icon-toggle__label.material-icons,
    #div_patient_data .gallery-figcaption-bottom .mdl-icon-toggle:has(.mdl-icon-toggle__input:checked) .mdl-icon-toggle__label.material-icons {
        background: transparent !important;
        color: #07141b;
    }

    #div_patient_data .gallery-figcaption-bottom > div {
        font-size: 12px;
    }

    #div_patient_data .gallery-figcaption-bottom > .material-icons {
        color: rgba(216, 229, 235, .78);
        font-size: 17px;
    }

    #div_patient_data .gallery-frame:not(.is-tag-open) > .gallery-figcaption-right {
        position: absolute;
        top: 7px;
        left: 36px;
        right: auto;
        width: auto;
        min-width: 0;
        height: 28px;
        min-height: 28px;
        margin: 0;
        z-index: 8;
    }

    #div_patient_data .gallery-frame:not(.is-tag-open) .element-tag-container {
        position: static;
        inset: auto;
        display: block;
    }

    #div_patient_data .gallery-frame:not(.is-tag-open) .tile-tag-shell {
        height: 28px;
    }

    #div_patient_data .gallery-frame:not(.is-tag-open) .tile-tag-rail {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: auto;
        min-width: 58px;
        height: 28px;
        padding: 0 9px 0 7px;
        border: 1px solid rgba(116, 162, 181, .55);
        border-radius: 6px;
        background: rgba(9, 16, 22, .84);
        color: rgba(230, 244, 250, .95);
        box-shadow: 0 3px 10px rgba(0,0,0,.35);
    }

    #div_patient_data .gallery-frame:not(.is-tag-open) .tile-tag-rail::after {
        content: "Tags";
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
    }

    #div_patient_data .gallery-frame:not(.is-tag-open) .tile-tag-rail .material-icons {
        font-size: 16px;
    }

    #div_patient_data .gallery-frame:not(.is-tag-open)[data-has-tags="1"] .tile-tag-rail,
    #div_patient_data .gallery-frame:not(.is-tag-open) .tile-tag-shell.has-tags .tile-tag-rail {
        border-color: rgba(213, 248, 0, .9);
        background: linear-gradient(0deg, #e7ff3d 0%, #b7e900 100%);
        color: #07141b;
        box-shadow: 0 0 0 1px rgba(213, 248, 0, .34), 0 0 16px rgba(213, 248, 0, .42), 0 4px 12px rgba(0, 0, 0, .42);
    }

    #div_patient_data .gallery-frame:not(.is-tag-open)[data-has-tags="1"] .tile-tag-rail .material-icons,
    #div_patient_data .gallery-frame:not(.is-tag-open) .tile-tag-shell.has-tags .tile-tag-rail .material-icons {
        color: #07141b;
    }

    #div_patient_data .gallery-frame.is-tag-open {
        grid-column: auto / span 1;
        width: 100%;
        max-width: 260px;
    }

    #div_patient_data .gallery-frame.is-tag-open > .gallery-figcaption-right {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: 100%;
        min-height: 100%;
        margin: 0;
        display: flex;
        justify-content: stretch;
        z-index: 25;
    }

    #div_patient_data .gallery-frame.is-tag-open .tile-tag-shell {
        width: 100%;
        height: 100%;
        justify-content: stretch;
        flex-direction: row-reverse;
    }

    #div_patient_data .gallery-frame.is-tag-open .tile-tag-rail {
        width: var(--tile-tag-rail-width);
        min-width: var(--tile-tag-rail-width);
        height: 100%;
        padding: 0;
        border: none;
        border-radius: 0;
        background: #d5f800;
        color: #07141b;
        box-shadow: -8px 0 18px rgba(0, 0, 0, .28);
    }

    #div_patient_data .gallery-frame.is-tag-open .tile-tag-rail::after {
        content: "";
    }

    #div_patient_data .gallery-frame.is-tag-open .tile-tag-panel {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
        height: 100%;
        padding: 12px 10px;
        background: rgba(13, 25, 32, .96);
        border-left: none;
        box-shadow: none;
        box-sizing: border-box;
    }

    #div_patient_data .gallery-frame.is-tag-open .tile-tag-list {
        max-height: 100%;
    }

    @media only screen and (max-width: 900px) {
        #div_patient_data .gallery-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            padding: 6px 8px 14px 6px;
        }

        #div_patient_data .gallery-frame {
            max-width: 100%;
            border-color: rgba(89, 128, 146, .46);
            background: linear-gradient(0deg, rgba(11, 25, 34, .98) 0%, rgba(7, 18, 26, .98) 100%);
        }

        #div_patient_data .gallery-main-content {
            /* min-height: 250px; */
            /* padding: 8px 2px 0; */
            background: transparent;
        }

        #div_patient_data .gallery-figcaption-top {
            position: absolute;
            top: 7px;
            left: 7px;
            right: 7px;
            z-index: 7;
            padding: 0;
            border: none;
            background: transparent;
            pointer-events: none;
        }

        #div_patient_data .gallery-figcaption-bottom {
            padding: 7px 4px 8px;
            border: none;
            background: transparent;
            color: rgba(216, 229, 235, .86);
        }

        #div_patient_data .gallery-img {
            height: 148px;
            min-height: 148px;
            background: #05090d;
            border-radius: 6px;
        }

        #div_patient_data .gallery-frame.is-tag-open {
            width: 100%;
            max-width: 100%;
        }
    }

    @media only screen and (min-width: 700px) and (max-width: 900px) {
        #div_patient_data .gallery-grid {
            grid-template-columns: repeat(auto-fill, minmax(218px, 248px));
            justify-content: start;
            justify-items: stretch;
            gap: 12px;
            padding-right: 12px;
        }

        #div_patient_data .gallery-frame {
            width: 100%;
            max-width: 248px;
        }

        #div_patient_data .gallery-img {
            height: 136px;
            min-height: 136px;
        }
    }