una/template/css/tailwind.css

/* tailwind source */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .animation-delay-2000 {
        animation-delay: 2s;
    }
    .animation-delay-4000 {
        animation-delay: 4s;
    }
}

@layer components {
    /* Global: HTML tags */
    ol, ul {
        @apply pl-10 list-outside;
    }

    ul {
        @apply list-disc;
    }

    ol {
        @apply list-decimal;
    }


    /* Defaults */
    .bx-skip-link {
        @apply absolute -top-16 focus:top-0 m-2 px-4 py-2;
        @apply border border-gray-200 dark:border-gray-700;
        @apply bg-gray-200/80 dark:bg-gray-800/80;
        @apply text-gray-800 dark:text-gray-200 font-medium;
        @apply rounded;
    }

    /* The logo link wraps a block level <img>, so as a plain inline element it has no inline box
       of its own and the browser paints no focus ring on it at all. Giving it a box makes the
       ring below visible without moving the logo. */
    #bx-logo-container > a {
        @apply inline-flex items-center align-middle rounded;
    }

    /* Public site only - Studio has its own .bx-std focus rings further down, and body.bx-std keeps
       these off it. Anything focusable that is not a .bx-btn (those draw their own ring) would
       otherwise fall back to the browser default ring, which Safari does not draw for links at all and
       which Chrome tints with the OS accent colour - so the site showed blue rings on the menus and,
       say, orange ones on the app tiles. One rule keeps every focus indicator identical. An outline is
       used rather than a ring box-shadow because the toolbar's more-auto wrapper and the sidebar
       scroller both clip overflow. */
    body:not(.bx-std) a:not(.bx-btn):focus-visible,
    body:not(.bx-std) button:not(.bx-btn):focus-visible,
    body:not(.bx-std) summary:focus-visible,
    body:not(.bx-std) [tabindex="0"]:focus-visible {
        @apply outline outline-2 outline-offset-2 outline-blue-500 dark:outline-blue-400;
    }

    /* The main menu row is inside .bx-menu-more-auto-wrapper, which sets overflow:hidden, so an
       offset outline would be clipped top and bottom - draw it on the border edge there. */
    body:not(.bx-std) .bx-menu-more-auto-wrapper .bx-stl-mil:focus-visible,
    body:not(.bx-std) .bx-menu-more-auto-wrapper .bx-stl-mil-sm:focus-visible {
        @apply outline-offset-0;
    }

    .bx-def-vanilla-html {
        @apply prose dark:prose-invert;
        @apply prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:font-medium prose-a:no-underline hover:prose-a:underline visited:prose-a:text-purple-700 dark:visited:prose-a:text-purple-400;
    }
    
    .bx-def-vanilla-html.bx-def-vh-sm {
        @apply prose-sm;
    }
    .bx-def-vanilla-html img::after,
    .bx-def-vanilla-html p::after{
        content: '';
        display: block;
        clear: both;
    }
    
    .bx-def-vanilla-html div > :where(:first-child):not(:where([class~="not-prose"] *)),
    .bx-def-vanilla-html > :where(:first-child):not(:where([class~="not-prose"] *)){
        margin-top: 0 !important;
    }
    
    .bx-def-vanilla-html div > :where(:last-child):not(:where([class~="not-prose"] *)),
    .bx-def-vanilla-html > :where(:last-child):not(:where([class~="not-prose"] *)) {
        margin-bottom: 0 !important;
    }

    .bx-artificer .bx-menthion-link {
        @apply font-normal text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300;
    }

    .bx-artificer .bx-def-box-sizing {
        @apply box-border;
    }

    .bx-artificer .bx-def-align-center {
        @apply flex items-center justify-center !important;
    }

    .bx-artificer .bx-def-valign-center {
        @apply flex items-center !important;
    }


    /* Color Palette */
    .bx-artificer .bx-def-color-bg-hl,
    .bx-artificer .bx-def-color-bg-hl-even:nth-child(even),
    .bx-artificer .bx-def-color-bg-hl-hover:hover {
        @apply bg-gray-100/50 dark:bg-gray-700/50;
    }
    /* Studio: blocks are translucent (white/60 on the gray page, white/6 on black), where a gray-100/50 tint disappears; a black/white tint keeps the alternate grid rows readable. */
    .bx-std .bx-def-color-bg-hl,
    .bx-std .bx-def-color-bg-hl-even:nth-child(even),
    .bx-std .bx-def-color-bg-hl-hover:hover {
        @apply bg-black/[0.04] dark:bg-white/[0.04];
    }

    .bx-artificer .col-red1 {
        @apply text-red-500;
    }
    .bx-artificer .bg-col-red1 { 
        @apply bg-red-400;
    }
    .bx-artificer .col-red1-dark { 
        @apply text-red-800; 
    }
    .bx-artificer .bg-col-red1-dark { 
        @apply bg-red-700;
    }

    .bx-artificer .col-red2 { 
        @apply text-rose-500; 
    }
    .bx-artificer .bg-col-red2 { 
        @apply bg-rose-400;
    }
    .bx-artificer .col-red2-dark { 
        @apply text-rose-800;
    }
    .bx-artificer .bg-col-red2-dark {
        @apply bg-rose-700;
    }

    .bx-artificer .col-red3 {
        @apply text-orange-500;
    }
    .bx-artificer .bg-col-red3 {
        @apply bg-orange-400;
    }
    .bx-artificer .col-red3-dark {
        @apply text-orange-800;
    }
    .bx-artificer .bg-col-red3-dark {
        @apply bg-orange-700;
    }

    .bx-artificer .col-green1 {
        @apply text-green-500;
    }
    .bx-artificer .bg-col-green1 {
        @apply bg-green-400;
    }
    .bx-artificer .col-green1-dark {
        @apply text-green-800;
    }
    .bx-artificer .bg-col-green1-dark {
        @apply bg-green-700;
    }

    .bx-artificer .col-green2 {
        @apply text-teal-500;
    }
    .bx-artificer .bg-col-green2 {
        @apply bg-teal-400;
    }
    .bx-artificer .col-green2-dark {
        @apply text-teal-800;
    }
    .bx-artificer .bg-col-green2-dark {
        @apply bg-teal-700;
    }

    .bx-artificer .col-green3 {
        @apply text-emerald-500;
    }
    .bx-artificer .bg-col-green3 {
        @apply bg-emerald-400;
    }
    .bx-artificer .col-green3-dark {
        @apply text-emerald-800;
    }
    .bx-artificer .bg-col-green3-dark {
        @apply bg-emerald-700;
    }

    .bx-artificer .col-blue1 {
        @apply text-blue-500;
    }
    .bx-artificer .bg-col-blue1 {
        @apply bg-blue-400;
    }
    .bx-artificer .col-blue1-dark {
        @apply text-blue-800;
    }
    .bx-artificer .bg-col-blue1-dark {
        @apply bg-blue-700;
    }

    .bx-artificer .col-blue2 {
        @apply text-purple-500;
    }
    .bx-artificer .bg-col-blue2 {
        @apply bg-purple-400;
    }
    .bx-artificer .col-blue2-dark {
        @apply text-purple-800;
    }
    .bx-artificer .bg-col-blue2-dark {
        @apply bg-purple-700;
    }

    .bx-artificer .col-blue3 {
        @apply text-sky-500;
    }
    .bx-artificer .bg-col-blue3 {
        @apply bg-sky-400;
    }
    .bx-artificer .col-blue3-dark {
        @apply text-sky-800;
    }
    .bx-artificer .bg-col-blue3-dark {
        @apply bg-sky-700;
    }

    .bx-artificer .col-gray {
        @apply text-gray-500;
    }
    .bx-artificer .bg-col-gray {
        @apply bg-gray-400;
    }
    .bx-artificer .col-gray-dark {
        @apply text-gray-800;
    }
    .bx-artificer .bg-col-gray-dark {
        @apply bg-gray-700;
    }

    /* Margins and Paddings */
    .bx-artificer .bx-def-centered {
        @apply mx-auto;
    }
    .bx-artificer .bx-def-margin {
        @apply m-4;
    }
    .bx-artificer .bx-def-margin-neg {
        @apply -m-4;
    }
    .bx-artificer .bx-def-margin-left {
        @apply ml-4;
    }
    .bx-artificer .bx-def-margin-left-auto {
        @apply ml-4 first:ml-0;
    }
    .bx-artificer .bx-def-margin-right {
        @apply mr-4;
    }
    .bx-artificer .bx-def-margin-top {
        @apply mt-4;
    }
    .bx-artificer .bx-def-margin-top-auto {
        @apply mt-4 first:mt-0;
    }
    .bx-artificer .bx-def-margin-bottom {
        @apply mb-4;
    }
    .bx-artificer .bx-def-margin-leftright {
        @apply mx-4;
    }
    .bx-artificer .bx-def-margin-leftright-neg {
        @apply -mx-4;
    }
    .bx-artificer .bx-def-margin-topbottom {
        @apply my-4;
    }
    .bx-artificer .bx-def-margin-topbottom-neg {
        @apply -my-4;
    }
    .bx-artificer .bx-def-margin-lefttopright {
        @apply mx-4 mt-4;
    }
    .bx-artificer .bx-def-margin-rightbottomleft {
        @apply mx-4 mb-4;
    }
    
    .bx-artificer .bx-def-margin-sec {
        @apply m-2;
    }
    .bx-artificer .bx-def-margin-sec-neg {
        @apply -m-2;
    }
    .bx-artificer .bx-def-margin-sec-left {
        @apply ml-2;
    }
    .bx-artificer .bx-def-margin-sec-left-auto {
        @apply ml-2 first:ml-0;
    }
    .bx-artificer .bx-def-margin-sec-left-auto.bx-dir {
        @apply rtl:ml-0 rtl:mr-2 rtl:first:mr-0;
    }
    .bx-artificer .bx-def-margin-sec-right {
        @apply mr-2;
    }
    .bx-artificer .bx-def-margin-sec-top {
        @apply mt-2;
    }
    .bx-artificer .bx-def-margin-sec-top-auto {
        @apply mt-2 first:mt-0;
    }
    .bx-artificer .bx-def-margin-sec-bottom {
        @apply mb-2;
    }
    .bx-artificer .bx-def-margin-sec-bottom-neg {
        @apply -mb-2;
    }
    .bx-artificer .bx-def-margin-sec-leftright {
        @apply mx-2;
    }
    .bx-artificer .bx-def-margin-sec-leftright-neg {
        @apply -mx-2;
    }
    .bx-artificer .bx-def-margin-sec-lefttopright-neg {
        @apply -mx-2 -mt-2;
    }
    .bx-artificer .bx-def-margin-sec-topbottom {
        @apply my-2;
    }
    .bx-artificer .bx-def-margin-sec-topbottom-neg {
        @apply -my-2;
    }
    .bx-artificer .bx-def-margin-sec-lefttopright {
        @apply mx-2 mt-2;
    }
    .bx-artificer .bx-def-margin-sec-rightbottomleft {
        @apply mx-2 mb-2;
    }

    .bx-artificer .bx-def-margin-thd {
        @apply m-1;
    }
    .bx-artificer .bx-def-margin-thd-neg {
        @apply -m-1;
    }
    .bx-artificer .bx-def-margin-thd-left {
        @apply ml-1;
    }
    .bx-artificer .bx-def-margin-thd-left-auto {
        @apply ml-1 first:ml-0;
    }
    .bx-artificer .bx-def-margin-thd-right {
        @apply mr-1;
    }
    .bx-artificer .bx-def-margin-thd-top {
        @apply mt-1;
    }
    .bx-artificer .bx-def-margin-thd-top-auto {
        @apply mt-1 first:mt-0;
    }
    .bx-artificer .bx-def-margin-thd-bottom {
        @apply mb-1;
    }
    .bx-artificer .bx-def-margin-thd-leftright {
        @apply mx-1;
    }
    .bx-artificer .bx-def-margin-thd-leftright-neg {
        @apply -mx-1;
    }
    .bx-artificer .bx-def-margin-thd-topbottom {
        @apply my-1;
    }
    .bx-artificer .bx-def-margin-thd-topbottom-neg {
        @apply -my-1;
    }
    .bx-artificer .bx-def-margin-thd-lefttopright {
        @apply mx-1 mt-1;
    }
    .bx-artificer .bx-def-margin-thd-rightbottomleft {
        @apply mx-1 mb-1;
    }

    .bx-artificer .bx-def-padding {
        @apply p-4;
    }
    .bx-artificer .bx-def-padding-left {
        @apply pl-4;
    }
    .bx-artificer .bx-def-padding-left-auto {
        @apply pl-4 first:pl-0;
    }
    .bx-artificer .bx-def-padding-right {
        @apply pr-4;
    }
    .bx-artificer .bx-def-padding-top {
        @apply pt-4;
    }
    .bx-artificer .bx-def-padding-top-auto {
        @apply pt-4 first:pt-0;
    }
    .bx-artificer .bx-def-padding-bottom {
        @apply pb-4;
    }
    .bx-artificer .bx-def-padding-leftright {
        @apply px-4;
    }
    .bx-artificer .bx-def-padding-topbottom {
        @apply py-4;
    }
    .bx-artificer .bx-def-padding-lefttopright {
        @apply px-4 pt-4;
    }
    .bx-artificer .bx-def-padding-rightbottomleft {
        @apply px-4 pb-4;
    }
    
    .bx-artificer .bx-def-padding-sec {
        @apply p-2;
    }
    .bx-artificer .bx-def-padding-sec-left {
        @apply pl-2;
    }
    .bx-artificer .bx-def-padding-sec-left.bx-dir {
        @apply pl-0 ltr:pl-2 rtl:pr-2;
    }
    .bx-artificer .bx-def-padding-sec-left-auto {
        @apply pl-2 first:pl-0;
    }
    .bx-artificer .bx-def-padding-sec-left-auto.bx-dir {
        @apply pl-0 ltr:pl-2 ltr:first:pl-0 rtl:pr-2 rtl:first:pr-0;
    }
    .bx-artificer .bx-def-padding-sec-right {
        @apply pr-2;
    }
    .bx-artificer .bx-def-padding-sec-top {
        @apply pt-2;
    }
    .bx-artificer .bx-def-padding-sec-top-auto {
        @apply pt-2 first:pt-0;
    }
    .bx-artificer .bx-def-padding-sec-bottom {
        @apply pb-2;
    }
    .bx-artificer .bx-def-padding-sec-leftright {
        @apply px-2;
    }
    .bx-artificer .bx-def-padding-sec-topbottom {
        @apply py-2;
    }
    .bx-artificer .bx-def-padding-sec-lefttopright {
        @apply px-2 pt-2;
    }
    .bx-artificer .bx-def-padding-sec-rightbottomleft {
        @apply px-2 pb-2;
    }

    .bx-artificer .bx-def-padding-thd {
        @apply p-1;
    }
    .bx-artificer .bx-def-padding-thd-left {
        @apply pl-1;
    }
    .bx-artificer .bx-def-padding-thd-left-auto {
        @apply pl-1 first:pl-0;
    }
    .bx-artificer .bx-def-padding-thd-right {
        @apply pr-1;
    }
    .bx-artificer .bx-def-padding-thd-top {
        @apply pt-1;
    }
    .bx-artificer .bx-def-padding-thd-top-auto {
        @apply pt-1 first:pt-0;
    }
    .bx-artificer .bx-def-padding-thd-bottom {
        @apply pb-1;
    }
    .bx-artificer .bx-def-padding-thd-leftright {
        @apply px-1;
    }
    .bx-artificer .bx-def-padding-thd-topbottom {
        @apply py-1;
    }
    .bx-artificer .bx-def-padding-thd-lefttopright {
        @apply px-1 pt-1;
    }
    .bx-artificer .bx-def-padding-thd-rightbottomleft {
        @apply px-1 pb-1;
    }

    /* Borders */
    .bx-std .bx-def-border,
    .bx-artificer .bx-def-border {
        @apply border border-gray-200 dark:border-gray-700;
    }
    .bx-artificer .bx-def-round-corners {
        @apply rounded-xl;
    }

    /* Fonts */
    .bx-def-font,
    .bx-artificer .bx-def-font-inputs:not(.bx-btn) {
        @apply font-inter text-gray-500 dark:text-gray-400;
    }

    .bx-def-font-grayed {
        @apply text-gray-600 dark:text-gray-400;
    }

    .bx-def-font-author,
    .bx-def-font-author.bx-def-font-meta {
        @apply text-sm text-gray-800 hover:text-black dark:text-gray-300 dark:hover:text-white font-semibold;
    }

    .bx-def-font-meta {
        @apply text-sm;
    }
    .bx-def-font-meta:not(a) {
        @apply text-gray-700 dark:text-gray-400 text-opacity-60;
    }
    a.bx-def-font-meta {
        @apply hover:underline;
    }

    .bx-artificer .bx-def-a-colored {
        @apply text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300;
    }

    .bx-std a.bx-def-font-meta,
    .bx-std a.bx-def-font-meta.bx-def-a-colored,
    .bx-artificer a.bx-def-font-meta,
    .bx-artificer a.bx-def-font-meta.bx-def-a-colored {
        @apply text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50;
    }
    .bx-artificer .bx-def-font-meta:not(a) {
        @apply text-opacity-100;
    }

    .bx-artificer .bx-def-font-small {
        @apply text-xs;
    }

    .bx-artificer .bx-def-font-middle {
        @apply text-sm;
    }

    .bx-artificer .bx-def-font-large {
        @apply text-lg;
    }

    /* Typography in combination with 'bx-def-vanilla-html' class */
    .bx-def-vanilla-html h1,
    .bx-def-vanilla-html .bx-def-font-h1 {
        @apply scroll-m-20 text-4xl font-extrabold tracking-tight;
    }

    .bx-def-vanilla-html h2,
    .bx-def-vanilla-html .bx-def-font-h2 {
        @apply scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0;
    }

    .bx-def-vanilla-html h3,
    .bx-def-vanilla-html .bx-def-font-h3 {
        @apply scroll-m-20 text-xl font-semibold tracking-tight;
    }

    .bx-def-vanilla-html h4 {
        @apply scroll-m-20 font-semibold tracking-tight;
    }

    .bx-def-vanilla-html p {
        @apply leading-7 [&:not(:first-child)]:mt-6;
    }

    .bx-def-vanilla-html blockquote {
        @apply mt-6 border-l-2 pl-6 italic;
    }

    .bx-def-vanilla-html table {
        @apply w-full;
    }

    .bx-def-vanilla-html tr {
        @apply m-0 border-t p-0;
    }

    .bx-def-vanilla-html th {
        @apply border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right;
    }

    .bx-def-vanilla-html td {
        @apply border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right;
    }

    .bx-def-vanilla-html ul {
        @apply my-6 ml-6 list-disc [&>li]:mt-2;
    }

    .bx-def-vanilla-html code {
        @apply relative rounded px-[0.3rem] py-[0.2rem] text-sm font-semibold;
    }

    /* Common elements: Icons. */
    .bx-icon svg {
        @apply w-5 h-5;
    }
    .bx-icon.bx-icon-small svg {
        @apply w-4 h-4;
    }
    .bx-icon.bx-icon-close svg,
    .bx-icon.bx-icon-hamburger svg {
        @apply w-7 h-7;
    }

    /* Common elements: Pages. */
    .bx-layout-wrapper{
        @apply gap-4 lg:gap-6 flex flex-col;
    }
    /* Column gutters are the row's gap. The md:w-* fractions are flex bases and every column shrinks with the same factor, so the gap is absorbed in proportion: 1/2 + 1/2 stays a true 50/50 and 1/3 + 2/3 keeps its ratio. min-w-0 lets a column with wide content still shrink instead of pushing the row wider. */
    .bx-layout-row{
        @apply w-full flex relative flex-wrap md:flex-nowrap gap-4 lg:gap-6;
    }
    /* A row whose cells are all empty (say, only members-only blocks on a guest's page) would still take a row gap above and below it, doubling the space between its neighbours. Hide it; a block added later (async loading) brings it back. Studio's builder keeps its empty rows. */
    body:not(.bx-std) .bx-layout-row:not(:has(.bx-layout-cell > *)) {
        @apply hidden;
    }
    .bx-layout-col{
        @apply max-w-full w-full min-w-0;
        flex-shrink: 2 !important;
    }

    .bx-layout-cell, 
    .bx-search-results-container {
        @apply flex flex-col gap-4 lg:gap-6;
    }
    .bx-layout-gap{
        @apply gap-4 lg:gap-6;
    }
    .bx-def-color-bg-page{
        @apply bg-gray-100 dark:bg-gray-900;
    }

    /* Common elements: Blocks, Boxes, etc. */
    .bx-def-box {
        @apply flex flex-col;
    }
    .bx-def-box.bx-def-box-hor {
        @apply flex-row;
    }
    .bx-def-color-bg-block {
        @apply bg-white dark:bg-gray-800;
    }
    .bx-def-color-bg-box,
    .bx-popup-color-bg {
        @apply bg-white dark:bg-gray-800 shadow-md;
    }
    .bx-def-color-bg-box-overflow {
        @apply bg-gradient-to-b from-transparent to-white dark:to-gray-800;
    }
    /* Blocks: a shadow in place of a border (see tailwind.smooth-shadow.js), never border + shadow. */
    .bx-def-border-block {
        @apply smooth-shadow-border;
    }
    .bx-def-box,
    .bx-popup-border {
        @apply ring-1 ring-gray-300/50 dark:ring-gray-600/50;
    }
    .bx-def-border-radius-block,
    .bx-def-box-round-corners,
    .bx-popup-border {
        @apply rounded-2xl;
    }
    .bx-content-padding-block {
        @apply p-3 md:p-4;
    }
    .bx-def-color-bg-box-hover {
        @apply hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-800 dark:hover:text-gray-200;
    }
    .bx-def-color-bg-box-active {
        @apply bg-gray-100 dark:bg-gray-700;
    }

    .bx-db-title {
        @apply text-lg xl:text-xl font-bold text-gray-800 dark:text-gray-100 align-middle;
    }

    /* Common Elements: HR */
    .bx-std .bx-def-hr,
    .bx-artificer .bx-def-hr {
        @apply mx-0 p-0 border-t border-gray-200 dark:border-gray-700;
    }
    .bx-std .bx-def-hr {
        @apply border-black/10 dark:border-white/10; /* Studio: the translucent hairline of the block dividers */
    }
    /* Grid header lines: drawn by the header cells (the <hr> rows that used to sit in <thead> read as fake captions and headerless cells). */
    .bx-grid-table thead th {
        @apply border-t border-b border-gray-200 dark:border-gray-700;
    }
    .bx-std .bx-grid-table thead th {
        @apply border-black/10 dark:border-white/10;
    }

    /* Common Elements: Labels */
    .bx-artificer .bx-def-label {
        @apply inline-block min-w-6 px-4 py-1 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 text-sm font-normal rounded-full box-border;
    }
    
    /* Common Elements: Alerts */
    .bx-def-unit-alert,
    .bx-def-unit-alert-small,
    .bx-def-unit-alert-middle {
        @apply block absolute top-0 -right-0.5 text-center text-white;
    }
    .bx-def-unit-alert {
        @apply h-4 p-1 leading-4 rounded-full text-xs;
        min-width: 1rem;
    }

    /* Common elements: Buttons */
    .bx-btn-shadow {
        @apply shadow-sm hover:shadow active:shadow-none;
    }
    .bx-btn-border {
        @apply border border-gray-300 dark:border-gray-600 rounded-md;
    }
    .bx-btn-bg {
        @apply bg-gray-100 dark:bg-gray-700;
    }
    .bx-btn-text {
        @apply text-sm text-gray-700 dark:text-gray-100 font-medium ;
    }
    .bx-btn-hover {
        @apply hover:bg-white dark:hover:bg-gray-600;
        @apply hover:border-gray-300 dark:hover:border-gray-500;
        @apply hover:text-gray-800 dark:hover:text-white;
        @apply hover:no-underline;
        @apply hover:-translate-y-px;
    }
    .bx-btn-focus {
        @apply focus:outline-none;
        @apply focus-visible:border-blue-500 dark:focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900;
    }
    
    .bx-btn-active {
        @apply active:bg-gray-300 dark:active:bg-gray-800;
        @apply active:border-gray-400 dark:active:border-gray-700;
        @apply active:text-gray-900 dark:active:text-gray-200;
        @apply active:translate-y-px;
    }
    .bx-btn {
        @apply relative inline-flex items-center min-h-11 px-4 py-2 touch-manipulation;
        @apply bx-btn-shadow;
        @apply bx-btn-bg;
        @apply bx-btn-border rounded-[10px];
        @apply bx-btn-text;
        @apply transform-gpu transition duration-150;
        @apply cursor-pointer;
        @apply bx-btn-hover bx-btn-focus bx-btn-active;
    }
    .bx-btn i, 
    .bx-btn u {
        @apply inline-block align-middle;
    }

    .bx-btn i, 
    .bx-btn img,
    .bx-btn svg {
        @apply w-5 h-5 leading-5;
    }
    .bx-btn i:not(.sys-colored),
    .bx-btn img {
        @apply text-gray-600 dark:text-gray-300;
    }

    .bx-btn:hover i:not(.sys-colored), 
    .bx-btn:hover img {
        @apply text-gray-800 dark:text-gray-100;
    }

    .bx-btn i {
        @apply text-center;
    }

    .bx-btn img {
        @apply bg-contain bg-no-repeat bg-center;
    }
    
    .bx-btn svg {
        @apply inline align-middle;
    }

    .bx-btn u {
        @apply ml-2 first:ml-0 no-underline;
    }

    .bx-btn.bx-btn-primary {
        @apply bg-blue-600 hover:bg-blue-700 active:bg-blue-800 dark:bg-blue-700 dark:hover:bg-blue-600 dark:active:bg-blue-800;
        @apply border border-blue-600 hover:border-blue-700 active:border-blue-800 dark:border-blue-600 dark:hover:border-blue-500 dark:active:border-blue-700;
        @apply text-white hover:text-white active:text-white dark:text-white dark:hover:text-white dark:active:text-white;
    }

    .bx-btn.bx-btn-primary i, 
    .bx-btn.bx-btn-primary img {
        @apply text-gray-300;
    }
    
    .bx-btn.bx-btn-primary:hover i, 
    .bx-btn.bx-btn-primary:hover img {
        @apply text-gray-100;
    }
    
    .bx-btn.bx-btn-disabled {
        @apply bg-gray-50 dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-400 hover:text-gray-400 dark:hover:text-gray-400 focus:ring-0 focus:ring-offset-0 shadow-none cursor-default !important;
    }

    /* Help tour (Shepherd): the vendored plugins_public/shepherd/css/shepherd.css paints the primary button #3288e6 with 75% white text (#cce1f9, 2.71:1) and is
       regenerated by `yarn build:shepherd`, so the fix lives here. The selector names .shepherd-button-primary because Tailwind keeps a component rule only when its
       selector contains a class it saw while scanning content (that class is in template/homepage_tour.html and modules/boonex/help_tours/template/tour.html).
       Specificity (0,3,0) beats the vendor .shepherd-button (0,1,0) even though shepherd.css is loaded in a later bundle. */
    .shepherd-element .shepherd-button.shepherd-button-primary {
        @apply bg-blue-600 text-white;
    }
    .shepherd-element .shepherd-button.shepherd-button-primary:not(:disabled):hover {
        @apply bg-blue-700 text-white;
    }

    /* Button sizes (height / corner radius): mini 28px/6px with the hit area extended to 44px, small 36px/8px, default 44px/10px, large 52px/12px, xlarge 60px/14px. */
    .bx-btn.bx-btn-mini {
        @apply min-h-7 px-2.5 py-1 text-xs rounded-md;
        @apply after:content-[''] after:absolute after:-inset-y-2 after:-inset-x-1;
    }
    .bx-btn.bx-btn-small {
        @apply min-h-9 px-3 py-1 text-sm rounded-lg;
    }
    .bx-btn.bx-btn-large {
        @apply min-h-[3.25rem] px-5 text-base rounded-xl;
    }
    .bx-btn.bx-btn-xlarge {
        @apply min-h-[3.75rem] px-6 text-lg rounded-[14px];
    }

    .bx-btn.bx-btn-mini i, 
    .bx-btn.bx-btn-mini img,
    .bx-btn.bx-btn-mini svg,
    .bx-btn.bx-btn-small i, 
    .bx-btn.bx-btn-small img,
    .bx-btn.bx-btn-small svg {
        @apply w-4 h-4 leading-4;
    }

    /* Common elements: Forms */
    .bx-std form,
    .bx-artificer form {
        @apply text-sm font-normal text-gray-700 dark:text-gray-300;
    }

    .bx-artificer form a:not(.bx-btn),
    .bx-artificer .sys-jf-agreement a:not(.bx-btn), 
    .bx-artificer .sys-lf-agreement a:not(.bx-btn) {
        @apply font-normal text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300;
    }

    .bx-artificer .bx-form-caption,
    .bx-artificer .bx-form-row-view-caption {
        @apply text-gray-700 dark:text-gray-300 text-sm font-medium;
    }

    .bx-artificer .bx-form-value {
        @apply mt-1 first:mt-0;
    }

    .bx-artificer .bx-form-required,
    .bx-artificer .bx-form-warn {
        @apply text-red-400;
    }

    .bx-form-section.bx-form-section-header {
        @apply border border-gray-300 dark:border-gray-900 rounded-2xl;
        @apply bg-gray-100 dark:bg-gray-800;
        @apply overflow-hidden;
    }
    .bx-form-section.bx-form-section-header .bx-form-section-title:hover {
        @apply bg-white dark:bg-gray-900 bg-gradient-to-b from-gray-100 dark:from-gray-800;
    }
    .bx-form-section.bx-form-section-header:not(.bx-form-collapsed) {
        @apply bg-white dark:bg-gray-900;
    }
    .bx-form-section.bx-form-section-header .bx-form-section-content {
        @apply bg-white dark:bg-gray-900;
    }

    /* Common elements: Forms: Text Input */
    .bx-std .bx-form-input-slider,
    .bx-std .bx-form-input-doublerange,
    .bx-std .bx-form-input-select_multiple,
    .bx-std .bx-form-input-select,
    .bx-std .bx-form-input-number,
    .bx-std .bx-form-input-time,
    .bx-std .bx-form-input-datepicker,
    .bx-std .bx-form-input-datetime,
    .bx-std .bx-form-input-textarea:not(.bx-form-input-html),
    .bx-std .bx-form-input-text,
    .bx-std .bx-form-input-price,
    .bx-std .bx-form-input-wrapper-price span,
    .bx-artificer .bx-form-input-slider,
    .bx-artificer .bx-form-input-doublerange,
    .bx-artificer .bx-form-input-select_multiple,
    .bx-artificer .bx-form-input-select,
    .bx-artificer .bx-form-input-number,
    .bx-artificer .bx-form-input-time,
    .bx-artificer .bx-form-input-datepicker,
    .bx-artificer .bx-form-input-datetime,
    .bx-artificer .bx-form-input-textarea:not(.bx-form-input-html),
    .bx-artificer .bx-form-input-text,
    .bx-artificer .bx-form-input-price,
    .bx-artificer .bx-form-input-wrapper-price span {
        @apply block w-full px-3 py-2;
        @apply bg-gray-50 dark:bg-gray-900/50 focus:bg-white dark:focus:bg-gray-900;
        @apply border border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 focus:outline-none;
        @apply leading-6 text-base font-medium text-gray-700 dark:text-gray-300 focus:text-gray-900 dark:focus:text-gray-100;
        @apply placeholder:text-gray-500 dark:focus:placeholder:text-gray-700 focus:placeholder:text-gray-300;
        @apply rounded-md;
    }
	
    /* Common elements: Forms: Password Input */
    .bx-std .bx-form-input-wrapper-password,
    .bx-artificer .bx-form-input-wrapper-password {
        @apply relative block w-full;
        @apply bg-gray-50 dark:bg-gray-900/50 focus:bg-white dark:focus:bg-gray-900;
        @apply border border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 focus:outline-none;
        @apply leading-6 text-base font-medium text-gray-700 dark:text-gray-300 focus:text-gray-900 dark:focus:text-gray-100;
        @apply placeholder:text-gray-500 dark:focus:placeholder:text-gray-700 focus:placeholder:text-gray-300;
        @apply rounded-md;
    }
    .bx-std .bx-form-input-wrapper-password .bx-form-input-password,
    .bx-artificer .bx-form-input-wrapper-password .bx-form-input-password {
        @apply block w-full pl-3 py-2 pr-8;
        @apply rounded-md;
    }
    .bx-artificer .bx-form-input-wrapper-password .bx-form-input-password {
        @apply ltr:pl-3 rtl:pl-8 ltr:pr-8 rtl:pr-3;
    }

    /* Studio: Inputs: the buttons' 8px radius, translucent black/5 (white/10 in dark) fill, a 1px inset hairline instead of a border, a 2px inset blue ring on focus. Single-line fields are 32px like the buttons; textareas and lists keep their height. (The launcher's own search field in studio/template/page_breadcrumb.html is bare, see menu_top.css.) */
    .bx-std .bx-form-input-slider,
    .bx-std .bx-form-input-doublerange,
    .bx-std .bx-form-input-select_multiple,
    .bx-std .bx-form-input-select,
    .bx-std .bx-form-input-number,
    .bx-std .bx-form-input-time,
    .bx-std .bx-form-input-datepicker,
    .bx-std .bx-form-input-datetime,
    .bx-std .bx-form-input-textarea:not(.bx-form-input-html),
    .bx-std .bx-form-input-text,
    .bx-std .bx-form-input-price,
    .bx-std .bx-form-input-wrapper-price span,
    .bx-std .bx-form-input-wrapper-password {
        @apply rounded-lg border-0 text-sm font-medium;
        @apply bg-black/5 dark:bg-gray-900/50 focus:bg-black/5 dark:focus:bg-gray-900;
        @apply text-gray-900 dark:text-gray-100 focus:text-gray-900 dark:focus:text-gray-100;
        @apply placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:placeholder:text-gray-500 dark:focus:placeholder:text-gray-400;
        @apply ring-1 ring-inset ring-black/10 dark:ring-white/15;
        @apply focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-100;
        @apply transition-shadow duration-150;
    }
    .bx-std .bx-form-input-select,
    .bx-std .bx-form-input-number,
    .bx-std .bx-form-input-time,
    .bx-std .bx-form-input-datepicker,
    .bx-std .bx-form-input-datetime,
    .bx-std .bx-form-input-text,
    .bx-std .bx-form-input-price,
    .bx-std .bx-form-input-wrapper-price span,
    .bx-std .bx-form-input-wrapper-password {
        @apply h-8 py-0 leading-5;
    }
    /* Native selects: a Lucide chevrons-up-down glyph on the right says "menu, not text field" (gray-500, gray-400 in dark). */
    .bx-std select.bx-form-input-select {
        @apply appearance-none pr-9 bg-no-repeat;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
        background-position: right 0.625rem center;
        background-size: 1rem 1rem;
    }
    .dark .bx-std select.bx-form-input-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
    }
    /* The password wrapper carries the field look; the input inside is bare, and the wrapper shows the focus ring for it. */
    .bx-std .bx-form-input-wrapper-password {
        @apply focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-500 dark:focus-within:ring-blue-400;
    }
    .bx-std .bx-form-input-wrapper-password .bx-form-input-password {
        @apply h-full py-0 rounded-lg border-0 bg-transparent text-sm font-medium leading-5 text-inherit;
        @apply focus:outline-none focus:ring-0;
    }

    /* Common elements: Forms: Checkbox/Radio Set Input */
    .bx-artificer .bx-form-input-wrapper-checkbox_set,
    .bx-artificer .bx-form-input-wrapper-radio_set {
        @apply relative block w-full py-2 px-3;
    }
    .bx-std .bx-form-input-checkbox_set,
    .bx-std .bx-form-input-radio_set,
    .bx-artificer .bx-form-input-wrapper-checkbox_set,
    .bx-artificer .bx-form-input-wrapper-radio_set {
        @apply max-h-80 overflow-x-auto;
        @apply bg-gray-50 dark:bg-gray-900/50 focus:bg-white dark:focus:bg-gray-900;
        @apply border border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 focus:outline-none;
        @apply leading-6 text-base font-medium text-gray-700 dark:text-gray-300 focus:text-gray-900 dark:focus:text-gray-100;
        @apply placeholder:text-gray-500 dark:focus:placeholder:text-gray-700 focus:placeholder:text-gray-300;
        @apply rounded-md;
    }
    /* Studio: the set container is a field too (see "Studio: Inputs"); this sits after the site rule above so it wins. */
    .bx-std .bx-form-input-checkbox_set,
    .bx-std .bx-form-input-radio_set {
        @apply rounded-lg border-0 text-sm font-medium;
        @apply bg-black/5 dark:bg-white/10 text-gray-900 dark:text-gray-100;
        @apply ring-1 ring-inset ring-black/10 dark:ring-white/15;
    }

    /* Common elements: Forms: Checkbox Input */
    .bx-form-input-wrapper-checkbox,
    .bx-form-input-wrapper-radio {
        @apply block w-5 h-5 m-0.5;
        @apply border-2 border-transparent;
    }

    .bx-form-input-checkbox,
    .bx-form-input-radio {
        @apply block w-4 h-4;
        @apply bg-gray-50 dark:bg-gray-900/50 bg-origin-border;
        @apply border-2 border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70;
        @apply placeholder:text-gray-500 dark:focus:placeholder:text-gray-700 focus:placeholder:text-gray-300;
        @apply scale-150 rounded;
        @apply appearance-none select-none;
    }
    .bx-def-font-inputs.bx-form-input-checkbox,
    .bx-def-font-inputs.bx-form-input-radio {
        @apply leading-6 text-base font-medium text-blue-600 dark:text-blue-600;
    }
    .bx-form-input-checkbox:checked,
    .bx-form-input-radio:checked {
        background-color: currentColor;
        border-color: transparent;
    }
    .bx-form-input-checkbox:checked {
        background-image:url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTYgMTYnIGZpbGw9JyNmZmYnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTEyLjIwNyA0Ljc5M2ExIDEgMCAwIDEgMCAxLjQxNGwtNSA1YTEgMSAwIDAgMS0xLjQxNCAwbC0yLTJhMSAxIDAgMCAxIDEuNDE0LTEuNDE0TDYuNSA5LjA4Nmw0LjI5My00LjI5M2ExIDEgMCAwIDEgMS40MTQgMHonLz48L3N2Zz4=)
    }
    .bx-form-input-radio:checked {
        background-image:url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTYgMTYnIGZpbGw9JyNmZmYnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PGNpcmNsZSBjeD0nOCcgY3k9JzgnIHI9JzMnLz48L3N2Zz4=)
    }
    
    .bx-form-input-radio_set,
    .bx-form-input-checkbox_set {
        @apply flex flex-wrap items-center;
    }
    .bx-form-input-dv {
        @apply ml-4;
    }
    .bx-form-input-dv-nl {
        @apply h-2 w-full last:hidden;
    }

    /* Common elements: Forms: Switcher Input */
    .bx-switcher-cont.on button {
        @apply bg-white dark:bg-gray-800;
    }
    .bx-switcher-cont.on button span {
        @apply bg-green-500 dark:bg-green-500 ltr:translate-x-5 rtl:-translate-x-5;
    }
    .bx-switcher-cont.off button {
        @apply bg-gray-200 dark:bg-gray-900;
    }
    .bx-switcher-cont.off button span {
        @apply bg-white dark:bg-gray-500 translate-x-0;
    }

    /* Common elements: Forms: Autosuggestion Input */
    .bx-artificer .bx-form-input-text.bx-form-input-autotoken {
        @apply flex flex-wrap items-stretch w-full py-2 px-3 ;
        @apply bg-gray-50 dark:bg-gray-900/50 focus:bg-white dark:focus:bg-gray-900;
        @apply border border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 focus:outline-none;
        @apply leading-6 text-base font-medium text-gray-700 dark:text-gray-300 focus:text-gray-900 dark:focus:text-gray-100;
        @apply placeholder:text-gray-500 dark:focus:placeholder:text-gray-700 focus:placeholder:text-gray-300;
        @apply rounded-md;
    }
    .bx-artificer .bx-form-input-autotoken b.val {
        @apply bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600;
    }


    /* Common elements: Popups */
    .bx-artificer > .bx-popup-wrapper {
        @apply max-h-full overflow-x-hidden overflow-y-auto;
    }

    .bx-artificer .bx-popup-applied {
        @apply rounded-lg;
    }

    .bx-artificer .bx-popup-responsive:not(.bx-popup-full-screen):not(.bx-popup-menu) {
        @apply w-full md:w-auto;
    }

    .bx-artificer .bx-popup-full-screen {
        @apply w-full;
    }

    .bx-artificer .bx-popup {
        @apply relative;
    }

    .bx-artificer .bx-popup-color-bg {
        @apply bg-white dark:bg-gray-800 shadow;
    }

    /* Popups: a shadow edge and a soft lift (see tailwind.smooth-shadow.js), not a gray ring on top of a shadow. */
    .bx-artificer .bx-popup-border {
        @apply m-px ring-0 smooth-shadow-popover rounded-2xl;
    }

    .bx-artificer .bx-popup-width {
        @apply w-full md:w-128;
    }

    .bx-artificer .bx-popup-width-small,
    .bx-artificer .bx-popup-menu .bx-popup-content {
        @apply w-56;
    }

    .bx-artificer .bx-popup-full-screen .bx-popup-width {
        @apply w-full md:w-full;
    }

    .bx-artificer .bx-popup-fog {
        @apply bg-gray-600 opacity-75;
    }


    /* Common elements: Menus */
    .bx-stl-mil-gaps {
        @apply px-3 py-2;
    }

    .bx-stl-mil-gaps-sm {
        @apply px-2 py-1.5;
    }

    .bx-stl-mil-hover-text {
        @apply hover:text-gray-800 dark:hover:text-gray-200;
    }
    .bx-stl-mil-hover-bg {
        @apply hover:bg-gray-200/50 dark:hover:bg-gray-700/50;
    }
    .bx-stl-mil-hover {
        @apply bx-stl-mil-hover-text;
        @apply bx-stl-mil-hover-bg;
    }

    .bx-stl-mil-focus {
        @apply focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 focus:outline-none;
    }
    
    .bx-stl-mil-active-bg {
        @apply active:border-gray-300 dark:active:border-gray-700;
        @apply active:bg-gray-300 dark:active:bg-black/50;
    }
    .bx-stl-mil-active {
        @apply bx-stl-mil-active-bg;
    }
    
    .bx-stl-mil,
    .bx-stl-mil-sm,
    .bx-stl-mil-wo-bg,
    .bx-stl-mil-wo-bg-gaps,
    .bx-stl-mil-wo-gaps,
    .bx-stl-mil-wo-gaps-sm,
    .bx-std .bx-stl-mil,
    .bx-std .bx-stl-mil-sm,
    .bx-std .bx-stl-mil-wo-bg,
    .bx-std .bx-stl-mil-wo-bg-gaps,
    .bx-std .bx-stl-mil-wo-gaps,
    .bx-std .bx-stl-mil-wo-gaps a,
    .bx-std .bx-stl-mil-wo-gaps-sm {
        @apply flex items-center;
        @apply text-base text-gray-600 dark:text-gray-400 font-medium;
        @apply bx-stl-mil-hover-text;
    }

    .bx-stl-mil,
    .bx-stl-mil-sm,
    .bx-stl-mil-wo-bg {
        @apply bx-stl-mil-gaps;
    }

    .bx-stl-mil,
    .bx-stl-mil-sm,
    .bx-stl-mil-wo-gaps,
    .bx-stl-mil-wo-gaps-sm {
        @apply border border-transparent;
        @apply rounded-md;
        @apply bx-stl-mil-hover-bg bx-stl-mil-active-bg;
    }
    .bx-stl-mil.bx-stl-mib,
    .bx-stl-mil-sm.bx-stl-mib,
    .bx-stl-mil-wo-gaps.bx-stl-mib,
    .bx-stl-mil-wo-gaps-sm.bx-stl-mib {
        @apply border border-gray-300 dark:border-gray-700;
    }
    .bx-stl-mil-sm,
    .bx-stl-mil-wo-gaps-sm {
        @apply text-sm;
    }

    .bx-stl-mil-sm {
        @apply px-2 py-1.5;
    }
    .bx-popup .bx-stl-mil-sm,
    .bx-popup .bx-stl-mil-gaps-sm {
        @apply px-4;
    }

    .bx-popup ul:not(.bx-menu-hor) .bx-stl-mil,
    .bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-sm,
    .bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps,
    .bx-popup ul:not(.bx-menu-hor) .bx-stl-mil-wo-gaps-sm {
        @apply rounded-none;
    }
    .bx-menu-tab-active.bx-stl-mil,
    .bx-menu-tab-active.bx-stl-mil-sm,
    .bx-menu-tab-active.bx-stl-mil-wo-gaps,
    .bx-menu-tab-active.bx-stl-mil-wo-gaps-sm,
    .bx-menu-tab-active .bx-stl-mil,
    .bx-menu-tab-active .bx-stl-mil-sm,
    .bx-menu-tab-active .bx-stl-mil-wo-gaps,
    .bx-menu-tab-active .bx-stl-mil-wo-gaps-sm,
    .bx-menu-item-active .bx-stl-mil,
    .bx-menu-item-active .bx-stl-mil-sm, 
    .bx-menu-item-active .bx-stl-mil-wo-gaps,
    .bx-menu-item-active .bx-stl-mil-wo-gaps-sm {
        @apply text-gray-900 dark:text-white;
        @apply bg-gray-200 dark:bg-gray-900;
        @apply ring-1 ring-white/50 dark:ring-gray-800/50;
    }
    .bx-popup .bx-menu-tab-active.bx-stl-mil,
    .bx-popup .bx-menu-tab-active.bx-stl-mil-sm,
    .bx-popup .bx-menu-tab-active.bx-stl-mil-wo-gaps,
    .bx-popup .bx-menu-tab-active.bx-stl-mil-wo-gaps-sm,
    .bx-popup .bx-menu-tab-active .bx-stl-mil,
    .bx-popup .bx-menu-tab-active .bx-stl-mil-sm,
    .bx-popup .bx-menu-tab-active .bx-stl-mil-wo-gaps,
    .bx-popup .bx-menu-tab-active .bx-stl-mil-wo-gaps-sm {
        @apply ring-0;
    }
    .bx-stl-mii,
    .bx-stl-mii-sm,
    .bx-stl-mil .sys-action-do-icon,
    .bx-stl-mil-sm .sys-action-do-icon,
    .bx-stl-mil-wo-gaps .sys-action-do-icon,
    .bx-stl-mil-wo-gaps-sm .sys-action-do-icon {
        @apply flex items-center justify-center text-gray-500 text-lg;
    }
    
    .bx-stl-mii > *,
    .bx-stl-mii-sm > *,
    .bx-stl-mil .sys-action-do-icon > *,
    .bx-stl-mil-sm .sys-action-do-icon > *,
    .bx-stl-mil-wo-gaps .sys-action-do-icon > *,
    .bx-stl-mil-wo-gaps-sm .sys-action-do-icon > * {
        @apply flex items-center justify-center h-6 w-6 ltr:mr-3 rtl:ml-3;
    }
    .bx-std .bx-stl-mii > * {
        @apply flex items-center justify-center h-6 w-6 ltr:mr-3 rtl:ml-3 !important;
    }
    .bx-std .bx-stl-mii > svg {
        @apply text-gray-500 !important;
    }
    .bx-std li:hover .bx-stl-mii > svg {
        @apply text-gray-700 dark:text-gray-300 !important;
    }

    .bx-stl-mii:last-child > *,
    .bx-stl-mii-sm:last-child > *,
    .bx-stl-mil .sys-action-do-icon:last-child > *,
    .bx-stl-mil-sm .sys-action-do-icon:last-child > *,
    .bx-stl-mil-wo-gaps .sys-action-do-icon:last-child > *,
    .bx-stl-mil-wo-gaps-sm .sys-action-do-icon:last-child > * {
        @apply ltr:mr-0 rtl:ml-0;
    }
    .bx-stl-mil .sys-action-do-icon ~ .sys-action-do-text,
    .bx-stl-mil-sm .sys-action-do-icon ~ .sys-action-do-text,
    .bx-stl-mil-wo-gaps .sys-action-do-icon ~ .sys-action-do-text,
    .bx-stl-mil-wo-gaps-sm .sys-action-do-icon ~ .sys-action-do-text {
        @apply ltr:ml-0 rtl:mr-0;
    }
    .bx-stl-mii-sm > *,
    .bx-stl-mil-sm .sys-action-do-icon > *,
    .bx-stl-mil-wo-gaps-sm .sys-action-do-icon > * {
        @apply h-5 w-5 ltr:mr-1.5 rtl:ml-1.5 text-sm;
    }
    .bx-stl-mit {
        @apply truncate;
    }
    .bx-stl-mia {
        @apply inline-block py-0.5 px-2 bg-gray-200/50 dark:bg-gray-800/50 text-gray-600 dark:text-gray-300 text-xs rounded-full;
    }

    /* Common elements: Horizontal menu */
    .bx-artificer .bx-menu-hor li.bx-menu-tab-active a,
    .bx-artificer .bx-menu-custom-hor li.bx-menu-tab-active a {
        @apply text-gray-700 dark:text-gray-200 font-medium;
    }

    /* Common elements: Vertical menu */
    .bx-artificer .bx-menu-ver li.bx-menu-tab-active .bx-mi-highlight,
    .bx-artificer .bx-menu-verlit li.bx-menu-tab-active .bx-mi-highlight,
    .bx-artificer .bx-menu-custom-ver li.bx-menu-tab-active .bx-mi-highlight {
        @apply bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white font-medium;
    }

    /* Common elements: Vertical menu in Popup */
    .bx-artificer .bx-popup .bx-menu-ver > li:hover {
        @apply hover:text-gray-900 dark:hover:text-gray-100;
    }

    .bx-artificer .bx-popup .bx-menu-ver > li.bx-def-color-bg-active {
        @apply bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white;
    }

    /* Common elements: Toolbar menu */
    .bx-artificer .bx-menu-toolbar .bx-menu-toolbar-item .bx-menu-toolbar-item-unit {
        @apply border-[6px] border-transparent; /* 32px avatar + 2 x 6px = 44px, like the other header buttons */
    }
    .bx-artificer .bx-menu-toolbar .bx-menu-toolbar-item .bx-menu-toolbar-item-unit .bx-def-icon-size {
        @apply h-8 w-8;
    }

    /* Header: the main menu's tabs are capsules at the header's control height (44px, NEO's regular button). */
    #bx-toolbar .bx-menu-main > .bx-menu-item {
        @apply rounded-full;
    }
    /* Header main menu: centered between the logo and the toolbar (BxDolMenuMoreAuto keeps it hidden until measured, see artificer menu.css). */
    #bx-toolbar .bx-menu-main {
        @apply justify-center;
    }
    #bx-toolbar .bx-menu-main > .bx-menu-item > .bx-stl-mil {
        @apply h-11 py-0 ltr:pl-3 ltr:pr-4 rtl:pr-3 rtl:pl-4 rounded-full bx-stl-mil-hover-text; /* the icon's 24px box has ~3px of air, so its side gets 4px less padding to look even */
    }
    #bx-toolbar .bx-menu-main > .bx-menu-item-more-auto > .bx-stl-mil {
        @apply w-11 px-0 justify-center; /* icon-only: a 44px circle like the toolbar buttons */
    }
    #bx-toolbar .bx-menu-main .bx-stl-mii:not(:last-child) > * {
        @apply ltr:mr-2 rtl:ml-2; /* 8px between icon and label in the tabs and the More list */
    }
    /*
     * Header popups (More, account, add content) never run past the bottom of the window: the header is fixed, so the page can't
     * scroll them into view. The toolbar's own popups (bx-sliding-menu-*) are moved under body when they open, so they are matched
     * by id rather than by #bx-toolbar.
     */
    #bx-toolbar .bx-popup-menu .bx-popup-content,
    .bx-popup-menu[id^="bx-sliding-menu-"] .bx-popup-content {
        max-height: calc(100vh - 5.5rem);
        max-height: calc(100dvh - 5.5rem);
        @apply overflow-y-auto overscroll-contain;
    }
    /* More list: 44px rows like the tabs they continue (same icon and text size), inset 8px so each row's 8px radius sits inside the popup's 16px corner. */
    #bx-toolbar .bx-popup-menu ul.bx-menu-submenu-more-auto {
        @apply px-2;
    }
    #bx-toolbar ul.bx-menu-submenu-more-auto > .bx-menu-item,
    #bx-toolbar ul.bx-menu-submenu-more-auto > .bx-menu-item > .bx-stl-mil {
        @apply rounded-lg;
    }
    #bx-toolbar ul.bx-menu-submenu-more-auto > .bx-menu-item > .bx-stl-mil {
        @apply h-11 py-0 ltr:pl-3 ltr:pr-4 rtl:pr-3 rtl:pl-4 bx-stl-mil-hover-text;
    }

    /* Common elements: Page Submenu */
    .bx-artificer .bx-menu-main-submenu .bx-menu-item.bx-menu-tab-active a {
        @apply text-gray-900 dark:text-gray-100;
    }
    .bx-artificer .bx-menu-main-submenu .bx-menu-item.bx-menu-tab-active .bx-mi-underline {
        @apply bg-blue-500 group-hover:bg-blue-500;
    }

    /* Common elements: Profile Stats menu */
    .bx-artificer .bx-menu-profile-stats.bx-menu-ver li.bx-menu-tab-active {
        @apply bg-slate-900/[.08] dark:bg-slate-900 ring-1 ring-gray-200 dark:ring-gray-800 text-gray-900 dark:text-white;
    }
    .bx-artificer .bx-menu-profile-stats.bx-menu-ver li.bx-psmi-show-more,
    .bx-artificer .bx-menu-profile-stats.bx-menu-ver li.bx-psmi-show-less {
        @apply text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300
    }


    /* Common elements: Profile Cover */
    .bx-artificer .bx-base-pofile-cover-thumb + .bx-base-pofile-cover-user {
        @apply ltr:lg:pl-52 rtl:lg:pr-52;
    }

    .bx-artificer .bx-base-pofile-cover-actions div.bx-base-general-entity-actions .bx-menu-custom-hor.bx-menu-hor-inline li.bx-mi-primary {
        @apply border-transparent text-gray-200 hover:text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
    }


    /* Common elements: Informers */
    .bx-informer-msg {
        @apply flex items-center gap-3 py-3 px-4 rounded-xl ring-1 ring-inset text-sm leading-5;
    }
    .bx-informer-indicator {
        @apply flex-none flex items-center justify-center w-9 h-9 rounded-full;
    }
    .bx-informer-indicator .sys-icon {
        @apply w-5 h-5 leading-5 text-xl text-center;
    }
    .bx-informer-content {
        @apply flex-1 min-w-0 font-medium;
    }
    .bx-informer-content a:not(.bx-btn) {
        @apply font-semibold underline underline-offset-2 text-inherit hover:opacity-80; /* the message colour keeps 4.5:1 on the tinted plates; the site link blue does not on yellow */
    }
    .bx-informer-action {
        @apply flex-none whitespace-nowrap;
    }
    .bx-informer-msg-info {
        @apply bg-blue-50 text-blue-800 ring-blue-200 dark:bg-blue-500/10 dark:text-blue-200 dark:ring-blue-500/25;
    }
    .bx-informer-msg-info .bx-informer-indicator {
        @apply bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300;
    }
    .bx-informer-msg-alert {
        @apply bg-yellow-50 text-yellow-800 ring-yellow-200 dark:bg-yellow-500/10 dark:text-yellow-200 dark:ring-yellow-500/25;
    }
    .bx-informer-msg-alert .bx-informer-indicator {
        @apply bg-yellow-100 text-yellow-700 dark:bg-yellow-500/20 dark:text-yellow-300;
    }
    .bx-informer-msg-error {
        @apply bg-red-50 text-red-800 ring-red-200 dark:bg-red-500/10 dark:text-red-200 dark:ring-red-500/25;
    }
    .bx-informer-msg-error .bx-informer-indicator {
        @apply bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300;
    }


    /* Common elements: All Actions */
    .sys-action-counter.sys-ac-link,
    .sys-action-counter .sys-ac-link,
    .sys-ac-link .sys-action-counter {
        @apply flex items-center;
        @apply border-none;
        @apply text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300;
        @apply rounded-full;
    }
    .sys-action-counter.sys-ac-only.sys-ac-link,
    .sys-action-counter.sys-ac-only .sys-ac-link,
    .sys-ac-link .sys-action-counter.sys-ac-only {
        @apply hover:bg-gray-100 dark:hover:bg-gray-600;
    }

    /* Common elements: Comments */
    .bx-artificer .cmt .bx-base-general-unit-meta-username {
        @apply text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white;
    }
    
    /* Common Elements: Votes */
    .bx-vote-bls-submenu-cnt {
        @apply border-b-gray-300 dark:border-b-gray-700;
    }
    .bx-vote-bls-submenu-cnt ul li.bx-menu-inter-act {
        @apply border-b-gray-500 dark:border-b-gray-500;
    }

    /* Common elements: Units */
    .bx-def-icon-badge-size,
    .bx-def-thumb-badge-size,
    .bx-def-ava-badge-size {
        @apply h-6 w-6;
    }
    .bx-def-ava-big-badge-size {
        @apply h-8 w-8;
    }

    .bx-artificer .bx-def-icon-size,
    .bx-artificer .bx-profile-avatar .bx-def-thumb-size,
    .bx-artificer .bx-profile-stats .bx-ps-user .bx-def-thumb-size {
        @apply h-8 w-8;
    }
    .bx-artificer .bx-def-thumb-size {
        @apply h-10 w-10;
    }
    .bx-artificer .bx-def-ava-size {
        @apply h-24 w-24;
    }
    .bx-artificer .bx-def-ava-big-size {
        @apply w-48 h-48;
    }

    .bx-base-text-unit-title a,
    .bx-tl-title a {
        @apply text-gray-800 hover:text-blue-500 dark:text-gray-100 dark:hover:text-blue-400 hover:no-underline;
    }

    .bx-base-text-unit-ext .bx-base-text-unit-text {
	@apply ltr:text-left rtl:text-right;
    }

    div.bx-tl-item-image{
        @apply aspect-video lg:aspect-auto rounded-lg;
    }
    img.bx-tl-item-image {
        @apply w-full h-full object-center object-cover lg:w-full lg:h-full rounded-lg;
    }

    .bx-base-text-unit-title a {
        @apply text-lg lg:text-xl font-semibold;
    }

    .bx-base-pofile-unit-badge {
        @apply inline-flex align-middle;
    }

    .bx-artificer .bx-base-pofile-unit-online {
        @apply absolute w-2.5 h-2.5 right-0.5 bottom-0.5 ring-1 ring-inset ring-white dark:ring-gray-800 bg-green-500 rounded-full;
    }

    .bx-artificer .bx-base-general-unit-meta .bx-base-profile-unit-meta-item > a:not(.bx-btn),
    .bx-artificer .bx-base-general-unit-meta ul.bx-menu-custom.bx-menu-custom-hor .bx-base-pofile-unit {
        @apply p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700;
    }


    /* Common elements: Auth */
    .sys-auth-block {
        @apply grid-cols-2;
    }
    .sys-auth-block.sys-auth-compact-container {
        @apply grid-cols-4;
    }


    /* Common elements: Votes */
    .bx-vote-likes .bx-vote-element-holder .bx-vote-do-vote.bx-vote-disabled,
    .bx-vote-likes .bx-vote-element-holder .bx-vote-do-vote.bx-vote-disabled .sys-icon {
        @apply text-gray-300 dark:text-gray-700;
    }

    /* Studio */
    .bx-std.bx-def-font,
    .bx-std .bx-def-font-inputs {
        @apply font-inter;
    }

    .bx-std-bg.bx-def-color-bg-page {
        @apply bg-gray-200 dark:bg-black;
    }

    /* Active dock item and the hover halo below: a 3px ring 1px off the tile. */
    .bx-std .bx-menu-top-center .bx-menu-tab-active .bx-mi-icon {
        @apply ring ring-blue-300/50 ring-offset-1 ring-offset-white dark:ring-offset-black;
    }
    /* The divider follows the dock items it separates: both are hidden below md. */
    .bx-std .bx-menu-top-center .bx-menu-item-divider {
        @apply hidden md:flex border-l border-black/10 dark:border-white/10;
    }
    .bx-std .bx-menu-top-center .bx-menu-item-static,
    .bx-std .bx-menu-top-center .bx-menu-item-dynamic {
        @apply hidden md:flex;
    }

    .bx-std .bx-std-menu-top-left li a {
        @apply text-gray-800 dark:text-gray-200;
    }

    .bx-std .bx-stg-icon-gray-bg {
        @apply h-8 w-8;
        @apply bg-gray-200 bg-no-repeat bg-center;
        @apply rounded-lg;
    }

    /* Header buttons: a translucent top-to-bottom gradient (white to black/5; white/10 to white/5 in the dark scheme) with the same two
       hairlines in both schemes, a light one inset (white/50; white/5 in dark) and a dark one outside (black/10; black/20 in dark), drawn by
       ::after so nothing covers them; hover only deepens the gradient and the glyph. Every Studio .bx-btn shares it (see "Studio: Buttons" below). */
    .bx-std .bx-menu-toolbar .bx-menu-tab-item,
    .bx-std .bx-std-search-trigger,
    .bx-std .bx-std-header-btn,
    .bx-std .bx-btn,
    .bx-std .bx-btn-group {
        @apply relative border-0 bg-gradient-to-b from-white to-black/5 dark:from-white/10 dark:to-white/5;
        @apply bg-transparent hover:bg-transparent active:bg-transparent; /* no gray fill under the gradient (the site's .bx-btn paints gray-100 / gray-700): the plate is only white and black over what it sits on */
        @apply hover:from-white hover:to-black/10 dark:hover:from-white/20 dark:hover:to-white/10;
        @apply text-black/80 dark:text-white/80 hover:text-black dark:hover:text-white;
        @apply transition duration-300 active:duration-100 active:scale-95;
        @apply after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none after:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.5),0_0_0_1px_rgb(0_0_0/0.1)] dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.2)];
    }
    /* The header's own controls keep a hover halo, drawn on the element under the ::after hairlines: a 4px black/10 (white/10 in dark) ring
       straight off the plate, no offset gap (an offset ring reads as a bright halo in the light scheme). The dock and sidebar tiles use the same halo. */
    .bx-std .bx-menu-toolbar .bx-menu-tab-item,
    .bx-std .bx-std-search-trigger,
    .bx-std .bx-std-header-btn {
        @apply hover:ring-4 hover:ring-black/10 dark:hover:ring-white/10;
    }
    .bx-std .bx-menu-toolbar .bx-menu-tab-item a,
    .bx-std .bx-menu-toolbar .bx-menu-tab-item button {
        @apply text-black/80 dark:text-white/80 hover:text-black dark:hover:text-white;
    }

    /* Studio surfaces: translucent white (60% light, 6% dark) with an inset ring (white 50% light, 2.5% dark) and an outer shadow, no border. */
    .bx-std-block.cnt-ttl-bg,
    .bx-std-block.cnt-bg {
        @apply bg-white/60 dark:bg-white/10 ring-1 ring-inset ring-white/50 dark:ring-white/[0.025];
        @apply rounded-3xl smooth-shadow-sm; /* 24px, the same corner as the header bar and the sidebar column */
    }

    #bx-std-pcap-menu-popup-account .bx-popup li a,
    #bx-std-pcap-menu-popup-account .bx-popup li button,
    #bx-std-pcap-menu-popup-account .bx-popup li .sys-icon,
    #bx-std-pcap-menu-popup-scheme .bx-popup li a {
        @apply text-gray-800 dark:text-gray-200 hover:text-black dark:hover:text-white;
    }
    
    #bx-std-pcap-menu-popup-assistant .bx-popup .bx-popup-header h2,
    #bx-std-pcap-menu-popup-assistant .bx-popup .bx-popup-header a {
        @apply text-gray-800 dark:text-gray-100;
    }

    .bx-std-pmen-item {
        @apply hover:bg-black/5 dark:hover:bg-white/5;
        @apply hover:font-medium;
        @apply duration-300;
    }
    .bx-std-pmen-item.bx-menu-tab-active {
        @apply bg-black/10 hover:bg-black/10 dark:bg-white/10 dark:hover:bg-white/10;
        @apply font-semibold;
    }
    /* The item background plays the role of the header icons' hover halo; the icon only gets a second hairline ring. */
    .bx-std-pmen-item .bx-std-pmen-ic-icon {
        @apply duration-300;
    }
    .bx-std-pmen-item:hover .bx-std-pmen-ic-icon,
    .bx-std-pmen-item.bx-menu-tab-active .bx-std-pmen-ic-icon {
        @apply ring-1 ring-black/10 dark:ring-white/10;
    }
    .bx-std-pmen-item a {
        @apply text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white;
    }
    .bx-std-pmen-item.bx-menu-tab-active a {
        @apply text-gray-900 dark:text-white;
    }

    .bx-std .bx-def-font-color {
        @apply text-gray-800 dark:text-gray-200;
    }

    .bx-std .bx-def-color-bg-block {
        @apply bg-white/60 dark:bg-white/10 ring-1 ring-inset ring-white/50 dark:ring-white/[0.025] smooth-shadow-sm;
    }
    .bx-std .bx-popup-color-bg {
        @apply bg-white dark:bg-[#1a1a1a]; /* popups float over content, so the surface is solid: white, and in dark the black page plus white/10 composite (one step above the white/6 blocks) */
    }

    /* Icon tiles (launcher, top menu, side menu): soft outer shadow plus an inset hairline that darkens the tile in light mode and lightens it in dark mode, so the edge takes on the artwork's own hue. */
    .bx-std .bx-icon-tile {
        @apply relative smooth-shadow-md;
        @apply after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none;
    }
    .bx-std .bx-icon-tile:not(.bx-std-pmen-ic-icon):not(.bx-std-menu-top .bx-icon-tile) {
        @apply after:ring-1 after:ring-inset after:ring-black/10 dark:after:ring-white/15;
    }
    /* 32px art tiles in the header (dock, current app) and the sidebar: the header buttons' plate under the artwork (isolate keeps the z-index:-1 image above it). In the light scheme the artwork keeps a single dark inset hairline (black/10), which crisps white-chrome tiles and vanishes on coloured plates, where the buttons' white inset plus black outer pair would read as two fuzzy gray edges around mid-tone art; the dark scheme uses the buttons' hairlines. */
    .bx-std .bx-std-menu-top .bx-icon-tile,
    .bx-std .bx-std-pmen-ic-icon {
        @apply isolate border-0 bg-gradient-to-b from-white to-black/5 dark:from-white/10 dark:to-white/5;
        @apply after:shadow-[inset_0_0_0_1px_rgb(0_0_0/0.1)] dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.2)];
    }

    /* 32px tiles and buttons in the header: a tight stack that stays inside the bar. The md stack above is sized for the 72px launcher tiles and lands mostly below the bar, where it reads as no shadow at all. */
    .bx-std .bx-std-menu-top .bx-icon-tile,
    .bx-std .bx-menu-toolbar .bx-menu-tab-item,
    .bx-std .bx-std-search-trigger,
    .bx-std .bx-std-header-btn,
    .bx-std .bx-std-tile-btn,
    .bx-std .bx-std-pmen-ic-icon,
    .bx-std .bx-btn,
    .bx-std .bx-btn-group {
        --tw-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.04);
        --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 2px 4px var(--tw-shadow-color), 0 4px 8px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    /* Sidebar icon tiles: the same translucent gradient button as the header tools, hovered through the parent link (.group). */
    .bx-std .bx-std-tile-btn {
        @apply relative border-0 bg-gradient-to-b from-white to-black/5 dark:from-white/10 dark:to-white/5;
        @apply text-black/80 dark:text-white/80;
        @apply after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none after:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.5),0_0_0_1px_rgb(0_0_0/0.1)] dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.2)];
    }
    /* 20px glyph in the 32px tile, like the header buttons (the svg fills the padding box; font icons get the same size). */
    .bx-std .bx-std-tile-btn > .sys-icon {
        @apply flex items-center justify-center text-[20px] leading-5;
        @apply text-black/80 dark:text-white/80;
    }
    /* group-hover can't be @applied here (Tailwind would put .group above .bx-std), so the hovered link is spelled out. */
    .bx-std .group:hover .bx-std-tile-btn {
        @apply from-white to-black/10 dark:from-white/20 dark:to-white/10 text-black dark:text-white;
    }

    /* Popups float above blocks, so they get the larger shadow stack and the blocks' inset hairline instead of an outer ring. */
    .bx-std .bx-popup-border {
        @apply border-0 rounded-2xl smooth-shadow-lg ring-1 ring-inset ring-white/50 dark:ring-white/5;
    }
    /* Popup menus: same item treatment as the page sidebar, with 20px icons. */
    .bx-std .bx-popup-content:has(> .bx-menu-verlit) {
        @apply p-1;
    }
    .bx-std .bx-menu-verlit li {
        @apply mt-0.5 first:mt-0 rounded-lg duration-300;
        @apply hover:bg-black/5 dark:hover:bg-white/5;
        @apply active:bg-blue-500/10 dark:active:bg-blue-400/10;
    }
    .bx-std .bx-menu-verlit li.bx-menu-tab-active {
        @apply bg-blue-500/5 hover:bg-blue-500/5 dark:bg-blue-400/5 dark:hover:bg-blue-400/5;
    }
    /* Direct children only: nested controls (the theme radio group) keep their own sizing and pill radius. */
    .bx-std .bx-menu-verlit li > a,
    .bx-std .bx-menu-verlit li > button {
        @apply flex items-center gap-3 h-9 px-2.5 rounded-lg text-sm whitespace-nowrap;
    }
    .bx-std .bx-menu-verlit li > button {
        @apply w-full ltr:text-left rtl:text-right;
    }
    .bx-std .bx-menu-verlit li svg,
    .bx-std .bx-menu-verlit li img,
    .bx-std .bx-menu-verlit li .sys-icon {
        @apply flex-none w-5 h-5 m-0;
    }
    /* Dropdown menus are tighter than modals: 12px outer radius over 8px items with 4px padding. */
    .bx-std .bx-popup-menu .bx-popup-border {
        @apply rounded-xl;
    }
    /* Account menu: the signed-in name is a label and the theme row holds a segmented control; neither is a link. */
    .bx-std .bx-menu-account {
        @apply min-w-48;
    }
    .bx-std .bx-menu-verlit li.bx-mv-static {
        @apply hover:bg-transparent dark:hover:bg-transparent active:bg-transparent;
    }
    .bx-std .bx-menu-verlit li.bx-mv-static > div {
        @apply flex items-center gap-3 h-9 px-2.5 text-sm whitespace-nowrap;
    }
    .bx-std .bx-menu-verlit li.bx-mv-label {
        @apply mb-1 pb-1 rounded-none border-b border-black/10 dark:border-white/10;
    }
    .bx-std .bx-menu-verlit li.bx-mv-label > div {
        @apply font-semibold;
    }
    .bx-std .bx-menu-verlit li.bx-mv-theme {
        @apply mt-1 pt-1 rounded-none border-t border-black/10 dark:border-white/10;
    }
    .bx-std .bx-menu-verlit li.bx-mv-theme > div > span {
        @apply flex-auto;
    }
    /* Segmented switcher: a pill of text tabs with the selected one raised on white; the theme toggle below is its icon-only sibling. */
    .bx-std .bx-std-segmented {
        @apply inline-flex p-0.5 rounded-full bg-black/5 dark:bg-white/5; /* translucent track, like the hero plates */
    }
    .bx-std .bx-std-segment {
        @apply flex items-center justify-center h-7 px-3 rounded-full text-sm font-medium text-gray-600 dark:text-gray-300 transition-colors duration-150; /* 4.5:1 on the gray track */
        @apply hover:text-gray-900 dark:hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500;
    }
    .bx-std .bx-std-segment[aria-selected="true"] {
        @apply bg-white dark:bg-white/10 text-gray-900 dark:text-white smooth-shadow-xs;
    }
    .bx-std .bx-std-segment:disabled {
        @apply opacity-50 cursor-default;
    }
    /* Switches: translucent tracks instead of the site's tinted grays (the knob keeps its colours). */
    .bx-std .bx-switcher-cont.off button {
        @apply bg-black/10 dark:bg-white/10;
    }
    .bx-std .bx-switcher-cont.on button {
        @apply bg-white dark:bg-white/10;
    }
    .bx-std .bx-theme-toggle {
        @apply flex p-0.5 rounded-full bg-black/5 dark:bg-white/5;
    }
    .bx-std .bx-theme-option {
        @apply flex items-center justify-center w-7 h-7 rounded-full text-gray-500 dark:text-gray-400 transition-colors duration-150;
        @apply hover:text-gray-900 dark:hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500;
    }
    .bx-std .bx-theme-option[aria-checked="true"] {
        @apply bg-white dark:bg-white/10 text-gray-900 dark:text-white smooth-shadow-xs;
    }
    .bx-std .bx-menu-verlit li .bx-theme-option svg {
        @apply w-4 h-4;
    }
    /* App settings popup (launcher edit mode): same chrome and row rhythm as the dropdown menus. */
    .bx-std .bx-mod-popup-settings .bx-form-element-wrapper {
        @apply mt-0.5 first:mt-0 rounded-lg duration-300;
        @apply hover:bg-gray-200 dark:hover:bg-gray-800;
    }
    .bx-std .bx-mod-popup-settings {
        @apply min-w-48;
    }
    .bx-std .bx-mod-popup-settings .bx-form-element-wrapper-oneline .bx-form-element {
        @apply flex items-center h-9 px-2.5;
    }
    /* Label on the left, control on the right: the same reading order as the Theme row in the account menu. */
    .bx-std .bx-mod-popup-settings .bx-form-caption-oneline {
        @apply order-first flex-auto mx-0 text-sm whitespace-nowrap;
    }
    .bx-std .bx-mod-popup-settings .bx-form-value-oneline {
        @apply ml-3;
    }
    .bx-std .bx-popup-header h2 {
        @apply text-gray-800 dark:text-gray-100;
    }
    .bx-std .bx-popup-header .bx-icon-close {
        @apply text-gray-900 dark:text-white;
    }
    /* Studio: modal boxes (studio/template/popup_box.html): the block caption as the header (64px row, 16px inset, 20px semibold title, hairline under
       it), a 32px close button with the Lucide x in the top-right corner, and the wrapper no longer clips the shadow: the box caps its own height
       to the viewport and scrolls its content instead of the wrapper scrolling the box (the site rule on body > .bx-popup-wrapper). */
    .bx-std > .bx-popup-wrapper:not(.bx-popup-full-screen),
    .bx-std > .bx-popup-applied:has(> .bx-popup-box-wrapper:not(.bx-popup-full-screen)) { /* grid action popups: dolPopup runs on their own wrapper around the box, and .bx-popup-active scrolls it */
        @apply max-h-none overflow-visible;
    }
    .bx-std .bx-popup-box-wrapper:not(.bx-popup-full-screen) .bx-popup-box {
        @apply flex flex-col max-h-[calc(100vh-2rem)];
    }
    .bx-std .bx-popup-box-wrapper:not(.bx-popup-full-screen) .bx-popup-box > div {
        @apply flex flex-col min-h-0;
    }
    .bx-std .bx-popup-box-wrapper:not(.bx-popup-full-screen) .bx-popup-box .bx-popup-content {
        @apply flex-auto min-h-0 overflow-y-auto;
    }
    .bx-std .bx-popup-box .bx-popup-header {
        @apply relative z-[1] flex items-center gap-3 p-4 bg-transparent shadow-[0_1px_0_0_rgb(0_0_0/0.05)] dark:shadow-[0_1px_0_0_rgb(255_255_255/0.025)];
    }
    .bx-std .bx-popup-box .bx-popup-header h2 {
        @apply flex-auto min-w-0 m-0 p-0 text-xl font-semibold leading-8 text-left truncate;
    }
    .bx-std .bx-popup-box .bx-popup-element-close {
        @apply static flex-none flex items-center justify-center w-8 h-8 m-0 rounded-lg text-black/80 dark:text-white/80 hover:text-black dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 duration-300;
        @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400;
        font-size: 1rem !important; /* the site rule pins 1.75rem !important for its font icon */
    }
    .bx-std .bx-popup-box .bx-popup-element-close .bx-icon-close,
    .bx-std .bx-popup-box .bx-popup-element-close .bx-icon-close svg {
        @apply block w-5 h-5 text-inherit;
    }
    
    /* Studio: outcome dialog (dashboard.js popup, page_action_result.html): an informer-style alert, not a block boxed inside a popup. The
       wrapper (the popup element) must not clip the box's shadow and the gap adds no margin; the box is a 24-32rem row at least 5rem tall:
       a 40px icon tile coloured by the outcome (the site informers' tints), the message, and the modals' 32px close button in the row (it
       carries none of the site's popup close classes, which pin a close link and move it on hover; the phone-only close row is dropped).
       Both glyphs follow their tile or button, never the iconset's blue that .sys-icon carries. */
    .bx-std #bx-std-dbd-popup,
    .bx-std #bx-std-dbd-popup.bx-popup-active {
        @apply overflow-visible max-h-none;
    }
    .bx-std #bx-std-dbd-popup .bx-popup-gap {
        @apply m-0;
    }
    .bx-std #bx-std-dbd-popup .bx-popup-close-wrapper {
        @apply hidden;
    }
    .bx-std .bx-std-action-result {
        @apply flex items-center gap-4 min-w-[24rem] max-w-lg min-h-20 p-5 pr-4 text-base font-medium leading-6 text-gray-800 dark:text-gray-200;
    }
    .bx-std .bx-std-action-result-icon {
        @apply flex-none flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300;
    }
    .bx-std .bx-std-action-result-success .bx-std-action-result-icon {
        @apply bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-300;
    }
    .bx-std .bx-std-action-result-error .bx-std-action-result-icon {
        @apply bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300;
    }
    .bx-std .bx-std-action-result-icon svg {
        @apply block w-5 h-5 text-inherit;
    }
    .bx-std .bx-std-action-result-cnt {
        @apply flex-1 min-w-0;
    }
    .bx-std .bx-std-action-result-cnt a {
        @apply font-semibold underline underline-offset-2;
    }
    .bx-std .bx-std-action-result-close {
        @apply flex-none flex items-center justify-center w-8 h-8 m-0 p-0 rounded-lg bg-transparent text-black/80 dark:text-white/80 hover:text-black dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 duration-300;
        @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400;
    }
    .bx-std .bx-std-action-result-close svg {
        @apply block w-5 h-5 text-inherit;
    }

    /* Studio: Buttons: every .bx-btn is the header button (plate, hairline, shadow, hover halo and press scale come from the "Header buttons" rules above): 32px, 12px side padding, 14px text one step darker than the header glyphs so it passes AA on the plate. Primary is the same plate inverted: the dark-mode plate in light mode and the light-mode plate in dark mode. */
    .bx-std .bx-btn {
        @apply inline-flex items-center justify-center h-8 min-h-8 px-3 py-0 rounded-lg;
        @apply text-sm font-medium leading-5;
        @apply text-black/80 dark:text-white/80 hover:text-black dark:hover:text-white active:text-black dark:active:text-white;
        @apply hover:translate-y-0 active:translate-y-0; /* the site button lifts on hover and sinks on press; the header button scales instead */
    }
    /* The header's skip link is a .bx-btn.sr-only: keep it off-screen until focused (sr-only spelled out, Tailwind refuses to @apply it here), the button rules above would otherwise put it in the flow. */
    .bx-std .bx-btn.sr-only:not(:focus) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
    .bx-std .bx-btn i,
    .bx-std .bx-btn img,
    /* Icon-only button: a 32px square with a 20px Lucide glyph (the name goes in aria-label and title). */
    .bx-std .bx-btn.bx-btn-icon {
        @apply w-8 min-w-8 px-0;
    }
    .bx-std .bx-btn.bx-btn-icon svg {
        @apply w-5 h-5;
    }
    .bx-std .bx-btn svg {
        @apply w-4 h-4 leading-4;
    }
    /* Icon-only buttons (grid row actions, caption and chart row actions): a 32px square with a 20px glyph, like the tiles. */
    .bx-std .bx-btn:has(> .sys-icon:only-child),
    .bx-std .bx-btn:has(> img:only-child),
    .bx-std .bx-btn:has(> div:only-child > .sys-icon:only-child),
    .bx-std .bx-btn:has(> div:only-child > svg:only-child) {
        @apply w-8 px-0;
    }
    .bx-std .bx-btn:has(> .sys-icon:only-child) > .sys-icon,
    .bx-std .bx-btn:has(> img:only-child) > img,
    .bx-std .bx-btn:has(> div:only-child > .sys-icon:only-child) .sys-icon,
    .bx-std .bx-btn:has(> div:only-child > svg:only-child) svg {
        @apply w-5 h-5 leading-5 text-[20px];
    }
    /* Their glyph is black (white in the dark scheme) at 80% through the element's opacity, solid on hover, not the iconset's blue. */
    .bx-std .bx-btn:has(> .sys-icon:only-child) > .sys-icon:not(.sys-colored),
    .bx-std .bx-btn:has(> div:only-child > .sys-icon:only-child) .sys-icon:not(.sys-colored),
    .bx-std .bx-btn:has(> div:only-child > svg:only-child) svg {
        @apply text-black dark:text-white opacity-80;
    }
    .bx-std .bx-btn:hover:has(> .sys-icon:only-child) > .sys-icon:not(.sys-colored),
    .bx-std .bx-btn:hover:has(> div:only-child > .sys-icon:only-child) .sys-icon:not(.sys-colored),
    .bx-std .bx-btn:hover:has(> div:only-child > svg:only-child) svg {
        @apply opacity-100;
    }
    /* Studio: Hit areas: a control keeps its 32px (28px, 24px) look, but a transparent ::before it owns takes clicks and hover out to a 44px
       square (WCAG 2.5.8 target size); the plate and its hover ring are drawn by the element itself, so they do not change. ::after is the
       plate's hairline, hence ::before. Controls that sit shoulder to shoulder (segments, theme options, grouped buttons) grow up and down only. */
    .bx-std .bx-std-segment,
    .bx-std .bx-theme-option,
    .bx-std .bx-menu-bc-actions > a {
        position: relative;
    }
    .bx-std .bx-btn::before,
    .bx-std .bx-std-header-btn::before,
    .bx-std .bx-menu-top-center .bx-mi-icon::before,
    .bx-std .bx-menu-toolbar .bx-menu-tab-item > a::before,
    .bx-std .bx-menu-toolbar .bx-menu-tab-item > button::before,
    .bx-std .bx-std-search-trigger::before,
    .bx-std .bx-std-search-clear::before,
    .bx-std .bx-std-segment::before,
    .bx-std .bx-theme-option::before,
    .bx-std .bx-menu-bc-actions > a::before,
    .bx-std .bx-switcher-cont > button::before {
        content: '';
        position: absolute;
        inset: -0.375rem; /* 32px → 44px */
    }
    .bx-std .bx-btn-group > .bx-btn::before {
        inset: -0.375rem 0;
    }
    .bx-std .bx-std-segment::before,
    .bx-std .bx-theme-option::before {
        inset: -0.5rem 0; /* 28px tall */
    }
    .bx-std .bx-menu-bc-actions > a::before {
        inset: -0.625rem; /* 24px */
    }
    .bx-std .bx-switcher-cont > button::before {
        inset: -0.625rem 0; /* 24px tall */
    }
    .bx-std .bx-btn i:not(.sys-colored),
    .bx-std .bx-btn img,
    .bx-std .bx-btn:hover i:not(.sys-colored),
    .bx-std .bx-btn:hover img,
    .bx-std .bx-btn.bx-btn-primary i:not(.sys-colored),
    .bx-std .bx-btn.bx-btn-primary img,
    .bx-std .bx-btn.bx-btn-primary:hover i:not(.sys-colored),
    .bx-std .bx-btn.bx-btn-primary:hover img {
        @apply text-inherit; /* glyphs follow the label */
    }
    .bx-std .bx-btn.bx-btn-primary {
        @apply from-gray-700 to-gray-800 dark:from-gray-100 dark:to-gray-200;
        @apply hover:from-gray-600 hover:to-gray-700 dark:hover:from-gray-200 dark:hover:to-gray-300;
        @apply border-0 text-gray-100 dark:text-gray-800 hover:text-white dark:hover:text-gray-900 active:text-white dark:active:text-gray-900;
        /* The inset light hairline reads as a grey blur on the dark plate, so light mode keeps only the outer hairline; the dark scheme keeps both (user request 2026-09-09). */
        @apply after:shadow-[0_0_0_1px_rgb(0_0_0/0.1)] dark:after:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.05),0_0_0_1px_rgb(0_0_0/0.2)];
    }
    /* Studio notices: a message box (the grid's EMPTY notice, MsgBox()) is a black/5 (white/5 in dark) plate with 60% text instead of the site's gray plate. */
    .bx-std .bx-msg-box {
        @apply bg-black/5 dark:bg-white/5 text-black/60 dark:text-white/60;
    }
    /* Disabled: the same plate in the flat translucent tone (black/5, white/5 in dark) instead of the gradient, the label at 40%, the hairlines kept,
       no press. !important because the site's .bx-btn-disabled rule above forces its gray-50 / gray-700 plate the same way. */
    .bx-std .bx-btn.bx-btn-disabled {
        @apply bg-none bg-black/5 hover:bg-black/5 text-black/40 hover:text-black/40 !important;
        @apply active:scale-100 cursor-default;
    }
    .bx-std .bx-btn.bx-btn-disabled:is(.dark *) {
        /* plain declarations: the dark: variant did not survive @apply … !important, and .dark .bx-std would miss a .bx-std on the root element */
        background-color: rgb(255 255 255 / 0.05) !important;
        color: rgb(255 255 255 / 0.4) !important;
    }
    /* Joined button groups (the grid pager): the plate, hairline, shadow, halo and press scale belong to the group (it is in the header-plate
       lists above); the segments are flat, square, hairline-separated, and only darken on hover and press. */
    .bx-std .bx-btn-group {
        @apply inline-flex items-stretch rounded-lg;
        @apply after:z-10; /* the group's hairline draws over the segments */
    }
    .bx-std .bx-btn-group > .bx-btn {
        @apply rounded-none shadow-none hover:ring-0 hover:ring-offset-0 active:scale-100 active:shadow-none;
        @apply active:from-white active:to-black/15 dark:active:from-white/25 dark:active:to-white/15; /* a pressed segment darkens a step further than a hovered plate, in the same translucent tones */
        @apply after:hidden;
    }
    .bx-std .bx-btn-group > .bx-btn:first-child {
        @apply rounded-l-lg;
    }
    .bx-std .bx-btn-group > .bx-btn:last-child {
        @apply rounded-r-lg;
    }
    .bx-std .bx-btn-group > .bx-btn + .bx-btn {
        @apply border-l border-black/10 dark:border-white/10;
    }
    .bx-std .bx-btn-group > .bx-btn.bx-btn-disabled {
        @apply bg-none bg-transparent hover:bg-transparent dark:bg-transparent dark:hover:bg-transparent !important; /* the group's plate runs through a disabled segment; only its glyph is muted */
    }
    /* Pager glyphs: both Lucide chevrons are in the template, the button's own class picks one. */
    .bx-std .bx-paginate-btn-prev .bx-paginate-glyph-next,
    .bx-std .bx-paginate-btn-next .bx-paginate-glyph-prev {
        @apply hidden;
    }
    .bx-std .bx-paginate-btn {
        @apply px-2; /* 32px square: 8px + 16px glyph + 8px */
    }

    .bx-std .bx-act,
    .bx-std .bx-act .sys-icon:not(.sys-colored) {
        @apply text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-50 active:text-gray-900 dark:active:text-gray-50;
    }
    
    
    /* Studio: Launcher */
    .bx-std-bg.bx-std-page-launcher {
        @apply bg-gray-100 dark:bg-black;
    }

    /* Keyboard focus in Studio chrome: one blue ring on the visual control, the link itself carries no outline. */
    .bx-std .bx-menu-top-center li a:focus-visible,
    .bx-std .bx-menu-toolbar .bx-menu-tab-item a:focus-visible,
    .bx-std .bx-menu-toolbar .bx-menu-tab-item button:focus-visible,
    .bx-std .bx-menu-breadcrumb li a:focus-visible,
    .bx-std .bx-std-search-trigger:focus-visible,
    .bx-std .bx-std-widget-link:focus-visible,
    .bx-std .bx-std-pmen-item a:focus-visible {
        @apply outline-none;
    }
    .bx-std .bx-menu-top-center li a:focus-visible .bx-mi-icon,
    .bx-std .bx-menu-toolbar .bx-menu-tab-item:has(:is(a, button):focus-visible),
    .bx-std .bx-menu-breadcrumb li a:focus-visible .bx-std-header-btn,
    .bx-std .bx-std-search-trigger:focus-visible,
    .bx-std .bx-std-widget-icon:has(> .bx-std-widget-link:focus-visible),
    .bx-std .bx-std-pmen-item:has(a:focus-visible) {
        @apply ring-2 ring-blue-500 dark:ring-blue-400 ring-offset-2 ring-offset-white dark:ring-offset-black;
    }
    .bx-std .bx-std-widget-icon:has(> .bx-std-widget-link:focus-visible) {
        @apply ring-offset-gray-200 dark:ring-offset-black scale-105;
    }
    .bx-std .bx-std-pmen-item:has(a:focus-visible) {
        @apply ring-offset-0;
    }
    /* Launcher: the tile Enter will open while filtering looks exactly like a hovered tile. */
    .bx-std .bx-std-widget-icon.bx-std-widget-icon-pick {
        @apply ring ring-gray-300 dark:ring-gray-700 ring-offset-1 ring-offset-gray-200 dark:ring-offset-black scale-105;
    }
    /* Launcher grid: one uniform inset per tile, so the gap between columns, between rows and above the first row is always 2x the inset. */
    .bx-std .bx-std-launcher {
        @apply pt-3 sm:pt-4 lg:pt-5;
    }
    .bx-std .bx-std-widgets .bx-std-widget {
        @apply p-3 sm:p-4 lg:p-5;
    }
    /* Launcher: the empty filter result, and the edit-mode bar fixed above the informer with the only Done control. The live region next to them is sr-only. */
    .bx-std .bx-std-launcher-empty {
        @apply py-8 px-4 text-center text-sm text-gray-600 dark:text-gray-400;
    }
    .bx-std .bx-std-launcher-edit {
        @apply fixed bottom-4 left-1/2 -translate-x-1/2 z-20 flex items-center gap-3 pl-4 pr-1 py-1 rounded-full bg-white/90 dark:bg-[#1a1a1a]/90 text-sm font-medium text-gray-800 dark:text-gray-200 smooth-shadow-ring-lg;
    }
    .bx-std .bx-std-launcher-edit[hidden] {
        @apply hidden;
    }
    /* Reduced motion: tiles neither grow nor animate (the edit-mode wobble is off in launcher.css, popups only fade in common.css). */
    @media (prefers-reduced-motion: reduce) {
        .bx-std .bx-std-widget-icon {
            @apply transition-none;
        }
        .bx-std .bx-std-widget-icon:hover,
        .bx-std .bx-std-widget-icon:has(> .bx-std-widget-link:focus-visible),
        .bx-std .bx-std-widget-icon.bx-std-widget-icon-pick {
            @apply scale-100;
        }
    }

    /* Builder-based pages (Dashboard): 12px gutters and gaps everywhere, matching the header's 12px margins and the sidebar pages. */
    .bx-std .bx-std-page-content-cnt.bx-def-padding-rightbottomleft {
        @apply px-3 pb-3;
    }
    .bx-std .bx-layout-wrapper {
        @apply gap-3;
    }
    .bx-std .bx-layout-row,
    .bx-std .bx-layout-cell,
    .bx-std .bx-layout-gap {
        @apply gap-3;
    }

    /* Studio: context menus (studio/js/context_menu.js): the dropdown-menu chrome with ARIA menu items on the sidebar's 36px rows, a check slot for checkbox and radio items, a red item for destructive actions. */
    .bx-std .bx-popup-content:has(> .bx-std-context-menu) {
        @apply p-1;
    }
    .bx-std .bx-std-context-wrapper,
    .bx-std .bx-std-context-wrapper.bx-popup-active {
        @apply overflow-visible max-h-none; /* the wrapper is exactly the menu box (no gap margins below), so it must not clip the shadow; a menu never scrolls */
    }
    .bx-std .bx-std-context-wrapper .bx-popup-gap {
        @apply mx-0 my-0; /* the menu box is the popup box: the 4px gap to the trigger is set by the script */
    }
    .bx-std .bx-std-context-menu {
        @apply min-w-48;
    }
    .bx-std .bx-std-cm-item {
        @apply flex items-center gap-3 w-full h-9 px-2.5 rounded-lg text-sm text-left text-gray-800 dark:text-gray-200 whitespace-nowrap;
        @apply hover:bg-black/5 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white;
        @apply focus-visible:outline-none focus-visible:bg-black/5 dark:focus-visible:bg-white/5 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400;
    }
    .bx-std .bx-std-cm-item svg,
    .bx-std .bx-std-cm-item .sys-icon {
        @apply flex-none w-5 h-5;
        color: inherit; /* the item's text colour (red on a destructive item), not the site-wide accent that .sys-icon carries */
    }
    .bx-std .bx-std-cm-check {
        @apply flex-none w-5 h-5 opacity-0; /* shown for a checked checkbox or radio item, kept for alignment otherwise */
    }
    .bx-std .bx-std-cm-item[aria-checked="true"] .bx-std-cm-check {
        @apply opacity-100;
    }
    /* On/off items end with the form switch's track and knob (template/form_field_switcher.html), 12px past the label. */
    .bx-std .bx-std-cm-switch {
        @apply relative flex-none ml-3 h-6 w-11 rounded-full border-2 border-transparent ring-1 ring-gray-300 dark:ring-gray-700 bg-gray-200 dark:bg-gray-900 transition-colors duration-200;
    }
    .bx-std .bx-std-cm-switch-knob {
        @apply block h-5 w-5 rounded-full shadow bg-white dark:bg-gray-500 translate-x-0 transition-transform duration-200;
    }
    .bx-std .bx-std-cm-item[aria-checked="true"] .bx-std-cm-switch {
        @apply bg-white dark:bg-gray-800;
    }
    .bx-std .bx-std-cm-item[aria-checked="true"] .bx-std-cm-switch-knob {
        @apply bg-green-500 ltr:translate-x-5 rtl:-translate-x-5;
    }
    .bx-std .bx-std-cm-title {
        @apply flex-auto;
    }
    .bx-std .bx-std-cm-danger {
        @apply text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300;
    }
    .bx-std .bx-std-cm-separator {
        @apply my-1 border-t border-black/10 dark:border-white/10;
    }
    .bx-std .bx-std-cm-label {
        @apply px-2.5 pt-2 pb-1 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400;
    }
    .bx-std [data-bx-context-menu] {
        -webkit-touch-callout: none; /* a long press opens the menu, not the browser's link sheet */
    }

    /* Studio: Grids: the row drag grip is a 20px glyph; an item icon (levels) is a 24px glyph on a 36px translucent tile, black/80 (white/80 dark) rather than the accent colour. */
    .bx-std .bx-grid-drag-handle svg,
    .bx-std .bx-grid-drag-handle .sys-icon {
        @apply w-5 h-5 text-black/80 dark:text-white/80; /* neutral like the other glyphs, not the accent colour */
    }
    .bx-std .bx-std-grid-icon {
        @apply inline-flex items-center justify-center w-9 h-9 rounded-lg align-middle;
        @apply bg-black/5 dark:bg-white/5 text-black/80 dark:text-white/80;
    }
    .bx-std .bx-std-grid-icon svg,
    .bx-std .bx-std-grid-icon .sys-icon {
        @apply w-6 h-6 text-inherit;
    }

    /* Studio: Forms: collapsible sections (Settings accordion) follow the sidebar items: a 48px title row (studio/template/form_field_section_title.html) on a flat 5% black / 5% white plate with the sidebar's 14px radius, no border, ring, shadow or gradient; the whole section keeps the plate when expanded, and the title darkens a step on hover. */
    .bx-std .bx-form-section.bx-form-section-header,
    .bx-std .bx-form-section.bx-form-section-header:not(.bx-form-collapsed) {
        @apply border-0 rounded-[0.875rem] bg-black/5 dark:bg-white/5 shadow-none;
    }
    .bx-std .bx-form-section.bx-form-section-header .bx-form-section-title:hover {
        @apply rounded-[0.875rem] bg-none bg-black/5 dark:bg-white/5;
    }
    .bx-std .bx-form-section.bx-form-section-header:not(.bx-form-collapsed) .bx-form-section-title:hover {
        @apply rounded-b-none;
    }
    .bx-std .bx-form-section.bx-form-section-header .bx-form-section-content {
        @apply bg-transparent p-4; /* 16px inset like the title, overriding the pt-4 pb-6 px-6 emitted by BxBaseFormView::getOpenSection */
    }
    .bx-std .bx-form-section-toggler svg {
        @apply w-5 h-5; /* the 20px Lucide chevron of the Studio glyph scale */
    }


    /* Modules: Timeline */
    .bx-artificer .group\/item:hover .bx-tl-item-text .bx-tl-content.bx-tl-overflow .bx-tl-content-overflow {
        @apply to-gray-50;
    }
    .dark .bx-artificer .group\/item:hover .bx-tl-item-text .bx-tl-content.bx-tl-overflow .bx-tl-content-overflow {
        @apply to-gray-900;
    }
    .bx-artificer .bx-tl-item-activity .bx-stl-mil-wo-gaps-sm .sys-action-element-holder > a,
    .bx-artificer .bx-menu-object-bx_timeline_menu_item_manage .bx-stl-mil-wo-gaps-sm .sys-action-element-holder > a,
    .bx-artificer .bx-menu-object-sys_cmts_item_manage .bx-stl-mil-wo-gaps-sm .sys-action-element-holder > a{
        @apply relative flex;
        @apply bx-stl-mil-gaps-sm;
    }
    .bx-artificer .bx-popup .bx-menu-object-bx_timeline_menu_item_manage .bx-stl-mil-wo-gaps-sm .sys-action-element-holder > a, 
    .bx-artificer .bx-popup .bx-menu-object-sys_cmts_item_manage .bx-stl-mil-wo-gaps-sm .sys-action-element-holder > a {
        @apply px-4;
    }


    /* 3d Party: Flickity */
    .bx-artificer .flickity-button {
        @apply text-gray-700 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 opacity-75 hover:opacity-100;
    }


    /* 3d Party: Quill */
    .bx-artificer div.ql-editor {
        @apply bg-gray-50 dark:bg-gray-900/50 focus:bg-white dark:focus:bg-gray-900;
    }

    .bx-artificer div.ql-editor:focus{
        @apply border border-gray-300 dark:border-gray-700 focus:border-blue-500 dark:focus:border-blue-500 focus:border-opacity-70 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20 focus:outline-none;
    }

    .bx-artificer .ql-mention-list li {
        @apply flex items-center px-4 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:text-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 text-sm font-normal;
    }
    
    /* Modules: Editor */
    .editor_toolbar button.selected{
        @apply bg-gray-300 dark:bg-black/50 dark:text-gray-200 text-gray-800;
    }

    /* Modules: Forum. Units - new view, for UNA14 need to migrate in general */
    .bx-artificer .bx-base-unit-showcase-wrapper.bx-forum-wrapper:not(.flickity-enabled)
    {
        grid-auto-rows: 0; 
        grid-template-rows: repeat(1, 1fr);
        overflow-y: hidden;
    }
    
    .bx-artificer .bx-base-text-unit-gallery-wrapper.bx-forum-wrapper,
    .bx-artificer .bx-base-unit-showcase-wrapper.bx-forum-wrapper:not(.flickity-enabled)
    {
        @apply max-w-full grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 md:max-w-none;
    }
    
    .bx-artificer .bx-layout-column-wide .bx-base-text-unit-gallery-wrapper.bx-forum-wrapper,
    .bx-artificer .bx-layout-column-wide .bx-base-unit-showcase-wrapper.bx-forum-wrapper:not(.flickity-enabled)
    {
        @apply max-w-full grid sm:grid-cols-2 md:grid-cols-3 gap-4 md:max-w-none;
    }
    
    .bx-artificer .bx-layout-column-half .bx-base-text-unit-gallery-wrapper.bx-forum-wrapper,
    .bx-artificer .bx-layout-column-half .bx-base-unit-showcase-wrapper.bx-forum-wrapper:not(.flickity-enabled)
    {
        @apply max-w-full grid sm:grid-cols-1 md:grid-cols-2 gap-4 md:max-w-none;
    }
    .bx-artificer .bx-layout-column-thin .bx-base-text-unit-gallery-wrapper.bx-forum-wrapper,
    .bx-artificer .bx-layout-column-thin .bx-base-unit-showcase-wrapper.bx-forum-wrapper:not(.flickity-enabled)
    {
        @apply max-w-full grid sm:grid-cols-1 gap-4 md:max-w-none;
    }
    .bx-artificer .bx-base-unit-showcase-wrapper.bx-forum-wrapper.flickity-enabled
    { 
       @apply block;
    }
    .bx-artificer .bx-base-unit-showcase-wrapper.bx-forum-wrapper .flickity-slider{ 
       @apply space-x-4 ;
    }
    .bx-artificer .bx-search-result-block.bx-clearfix:before{
        @apply hidden;
    }

    /* badges */
    .bx-badges-list{
        @apply inline-flex grow-0 space-x-1 w-min
    }
    .bx-badge{
        @apply inline-flex items-center w-max space-x-1 px-1.5 py-0.5 rounded-full;
        @apply text-white text-xs font-medium whitespace-nowrap;
        @apply opacity-90 hover:opacity-100 active:translate-y-0.5
    }
    .bx-badge img,
    .bx-badge svg {
        @apply max-h-4 m-0 p-0;
    }
    .sys-icon-image.bx-badge-icon,
    .sys-icon-svg.bx-badge-icon{
        @apply w-4 h-4
    }
    
    /* filepond */
    .filepond--drop-label label{
        @apply leading-6 text-base font-medium text-gray-700 dark:text-gray-300;
    }
}

/* Select2 dark/light styles */

/* Base container */
.select2-container .select2-selection--single {
    @apply h-10 flex items-center border rounded-md px-3;
}
/* Studio: select2 is the same 32px field as its inputs (see "Studio: Inputs"), with the native select's Lucide chevrons-up-down instead of
   select2's triangle; open, it shows the field's focus ring. The dropdown is a Studio popup: 12px radius, ring + shadow, 4px inset,
   a Studio search field, 32px option rows with a blue/10 highlight and a black/5 (white/5) selected row. */
.bx-std .select2-container .select2-selection--single {
    @apply h-8 rounded-lg border-0 text-sm font-medium bg-no-repeat;
    @apply bg-black/5 dark:bg-white/10 text-gray-900 dark:text-gray-100;
    @apply ring-1 ring-inset ring-black/10 dark:ring-white/15;
    @apply pl-3 pr-9;
    @apply focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 dark:focus:ring-blue-400;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
    background-position: right 0.625rem center;
    background-size: 1rem 1rem;
}
.dark .bx-std .select2-container .select2-selection--single {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
}
.bx-std .select2-container--open .select2-selection--single {
    @apply ring-2 ring-inset ring-blue-500 dark:ring-blue-400;
}
/* The dropdown wrapper select2 appends to the body must not take the site's "every select2 container is 100% wide" rule: positioned at the
   field's left edge, a viewport-wide wrapper overshoots the page and adds a horizontal scrollbar. */
.bx-std > .select2-container {
    width: auto !important;
}
/* select2 squares the field's corners on the dropdown side while open; the field keeps its 8px corners and the dropdown floats 4px below (above) it. */
.bx-std .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.bx-std .select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
    @apply rounded-lg;
}
.bx-std .select2-container--default .select2-selection--single .select2-selection__rendered {
    @apply p-0 leading-8 text-inherit;
}
.dark .bx-std .select2-container--default .select2-selection--single .select2-selection__rendered {
    @apply bg-transparent text-gray-100;
}
.bx-std .select2-container--default .select2-selection--single .select2-selection__arrow {
    @apply hidden;
}
.bx-std .select2-dropdown,
.bx-std .select2-container--open .select2-dropdown--below,
.bx-std .select2-container--open .select2-dropdown--above {
    @apply border-0 rounded-xl p-1 smooth-shadow-lg ring-1 ring-inset ring-white/50 dark:ring-white/5 bg-white dark:bg-[#1a1a1a];
}
.bx-std .select2-container--open .select2-dropdown--below {
    @apply mt-1;
}
.bx-std .select2-container--open .select2-dropdown--above {
    @apply mb-1;
}
.bx-std .select2-search--dropdown {
    @apply p-0 pb-1;
}
.bx-std .select2-container--default .select2-search--dropdown .select2-search__field {
    @apply h-8 px-3 py-0 rounded-lg border-0 text-sm font-medium;
    @apply bg-black/5 dark:bg-white/10 text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-400;
    @apply ring-1 ring-inset ring-black/10 dark:ring-white/15;
    @apply focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 dark:focus:ring-blue-400;
}
.bx-std .select2-container--default .select2-results > .select2-results__options {
    @apply max-h-80;
}
.bx-std .select2-results__option {
    @apply min-h-8 px-3 py-1 rounded-lg text-sm text-gray-800 dark:text-gray-200;
}
.bx-std .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    @apply bg-blue-500/10 dark:bg-blue-400/10 text-gray-900 dark:text-white;
}
.bx-std .select2-container--default .select2-results__option--selected,
.bx-std .select2-results__option[aria-selected=true] {
    @apply bg-black/5 dark:bg-white/5 text-gray-900 dark:text-gray-100;
}
/* Dark mode, spelled out with the .dark prefix so these outrank the site's own dark select2 rules below. */
.dark .bx-std .select2-container--default .select2-dropdown {
    @apply bg-[#1a1a1a];
}
.dark .bx-std .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    @apply bg-blue-400/10 text-white;
}
.dark .bx-std .select2-container--default .select2-results__option--selected,
.dark .bx-std .select2-results__option[aria-selected=true] {
    @apply bg-white/5 text-gray-100;
}

/* Light mode */
.select2-container--default .select2-selection--single {
    @apply bg-white border-gray-300 text-gray-900;
}

/* Dark mode */
.dark .select2-container--default .select2-selection--single .select2-selection__rendered,
.dark .select2-container--default .select2-selection--single {
    @apply bg-gray-800 border-gray-600 text-gray-100;
}

/* Dropdown */
.select2-dropdown {
    @apply rounded-md border shadow-lg;
}

/* Light dropdown */
.select2-container--default .select2-dropdown {
    @apply bg-white border-gray-300;
}

/* Dark dropdown */
.dark .select2-container--default .select2-dropdown {
    @apply bg-gray-800 border-gray-600;
}

/* Options */
.select2-results__option {
    @apply px-3 py-2 cursor-pointer;
}

/* Hover / active */
.select2-results__option--highlighted {
    @apply bg-blue-500 text-white;
}

/* Selected item */
.select2-results__option[aria-selected=true] {
    @apply bg-blue-100;
}

.dark .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.dark .select2-results__option[aria-selected=true] {
    @apply bg-blue-700 text-white;
}

/* Search input */
.select2-search__field {
    @apply w-full px-2 py-1 border rounded-md;
}

.dark .select2-search__field {
    @apply bg-gray-700 border-gray-600 text-white;
}