/* Bluetrait admin stylesheet — redesigned UI (light + dark). Fonts self-hosted in bt-resources/fonts/. */

/* ---- Self-hosted fonts (extracted from design mockup) ---- */
/* IBM Plex Mono 400 - cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* IBM Plex Mono 400 - cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* IBM Plex Mono 400 - vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* IBM Plex Mono 400 - latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 400 - latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 - cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* IBM Plex Mono 500 - cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* IBM Plex Mono 500 - vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* IBM Plex Mono 500 - latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500 - latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 600 - cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* IBM Plex Mono 600 - cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* IBM Plex Mono 600 - vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-600-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* IBM Plex Mono 600 - latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 600 - latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans 400 100% - cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* IBM Plex Sans 400 100% - cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* IBM Plex Sans 400 100% - greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* IBM Plex Sans 400 100% - vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* IBM Plex Sans 400 100% - latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans 400 100% - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans 500 100% - cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* IBM Plex Sans 500 100% - cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* IBM Plex Sans 500 100% - greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* IBM Plex Sans 500 100% - vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* IBM Plex Sans 500 100% - latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans 500 100% - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans 600 100% - cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* IBM Plex Sans 600 100% - cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* IBM Plex Sans 600 100% - greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* IBM Plex Sans 600 100% - vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* IBM Plex Sans 600 100% - latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans 600 100% - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans 700 100% - cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* IBM Plex Sans 700 100% - cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* IBM Plex Sans 700 100% - greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* IBM Plex Sans 700 100% - vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* IBM Plex Sans 700 100% - latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans 700 100% - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Newsreader 400 - vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Newsreader 400 - latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader 400 - latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Newsreader 500 - vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/newsreader-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Newsreader 500 - latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/newsreader-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader 500 - latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/newsreader-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Newsreader 600 - vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/newsreader-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Newsreader 600 - latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/newsreader-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader 600 - latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/newsreader-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Newsreader 700 - vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/newsreader-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Newsreader 700 - latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/newsreader-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Newsreader 700 - latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/newsreader-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Bluetrait admin — design system (light + dark)
   Tokens ported from the design mockup. Theme is driven by a
   data-theme attribute on <html> (set by the no-flash bootstrap
   in html-header.php and persisted to localStorage).
   ============================================================ */

:root {
	--bg:#f7f2ea;
	--surface:#fffdf9;
	--surface-2:#f1ebdf;
	--border:#e4dccb;
	--border-strong:#cfc4ad;
	--text:#211d17;
	--muted:#6f665a;
	--faint:#9c9384;
	--accent:#2c5ba6;
	--accent-soft:#e7eef8;
	--on-accent:#ffffff;
	--notice:#3f72b0;   --notice-bg:#e9f0f9;
	--warning:#a3742a;  --warning-bg:#f4ecd9;
	--error:#b0492f;    --error-bg:#f6e7e0;
	--shadow:0 1px 2px rgba(40,33,20,.04), 0 16px 36px -24px rgba(40,33,20,.18);
	--radius:16px;
	--radius-sm:10px;
	--font-sans:'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-serif:'Newsreader', Georgia, 'Times New Roman', serif;
	--font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
	--bg:#1f1b16;
	--surface:#29241e;
	--surface-2:#322c24;
	--border:#39332a;
	--border-strong:#4a4338;
	--text:#f2ece1;
	--muted:#b1a797;
	--faint:#7e7567;
	--accent:#7ba7e6;
	--accent-soft:#2b3a54;
	--on-accent:#0f141b;
	--notice:#7ba7e6;   --notice-bg:#26313f;
	--warning:#d6a65a;  --warning-bg:#352c1c;
	--error:#e1856a;    --error-bg:#3a2620;
	--shadow:0 1px 2px rgba(0,0,0,.4), 0 22px 50px -26px rgba(0,0,0,.7);
}

/* ---- base ---- */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
	margin:0;
	padding:0;
	background:var(--bg);
	color:var(--text);
	font-family:var(--font-sans);
	font-size:14px;
	line-height:1.5;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	transition:background .3s ease, color .3s ease;
}
::selection { background:rgba(120,150,200,.22); }
::-webkit-scrollbar { height:10px; width:10px; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:8px; }
::-webkit-scrollbar-track { background:transparent; }

a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

h1 { font-family:var(--font-serif); font-size:30px; font-weight:500; letter-spacing:-.015em; margin:0 0 18px; color:var(--text); }
h2 { font-family:var(--font-serif); font-size:21px; font-weight:600; margin:0 0 14px; color:var(--text); }
h3 { font-family:var(--font-serif); font-size:17px; font-weight:600; margin:0 0 10px; color:var(--text); }

code, kbd, samp { font-family:var(--font-mono); font-size:.92em; background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:1px 6px; color:var(--text); overflow-wrap:anywhere; }
pre { font-family:var(--font-mono); font-size:12.5px; line-height:1.5; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px; overflow:auto; color:var(--text); }
pre code { background:none; border:none; padding:0; }

/* ============================================================
   Top bar  (.header is reused by html-header.php, bt_die, bt_stop, installer)
   ============================================================ */
.header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	flex-wrap:wrap;
	padding:16px 40px;
	background:var(--surface);
	border-bottom:1px solid var(--border);
}
.brand { display:flex; align-items:center; gap:13px; text-decoration:none; }
.brand:hover { text-decoration:none; }
.brand-badge {
	width:36px; height:36px; border-radius:10px;
	background:var(--accent); color:var(--on-accent);
	display:flex; align-items:center; justify-content:center;
	font-family:var(--font-serif); font-weight:600; font-size:21px; flex:none;
}
.brand-name { font-family:var(--font-serif); font-size:24px; font-weight:600; color:var(--text); letter-spacing:-.015em; }
.header-right { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.header-clock { display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:12.5px; color:var(--muted); }
.header-clock .now { color:var(--text); }
.header-clock .dot { color:var(--faint); }
.header-sep { width:1px; height:24px; background:var(--border); }
.header-link { font-size:13px; color:var(--muted); text-decoration:none; }
.header-link:hover { color:var(--text); text-decoration:none; }
.user-pill { display:flex; align-items:center; gap:9px; padding:5px 14px 5px 6px; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; }
.user-avatar { width:27px; height:27px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:11px; flex:none; text-transform:uppercase; }
.user-name { font-size:13px; font-weight:600; color:var(--text); }
.user-pill .sep { color:var(--faint); font-size:13px; }
.user-pill a { font-size:13px; color:var(--accent); text-decoration:none; font-weight:500; }

/* theme toggle (active state is driven purely by :root[data-theme]) */
.theme-toggle { display:inline-flex; padding:3px; gap:3px; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; }
.theme-toggle button {
	border:none; cursor:pointer; background:transparent; color:var(--muted);
	font-family:var(--font-sans); font-size:12.5px; font-weight:600;
	padding:6px 16px; border-radius:999px; transition:background .2s ease, color .2s ease;
}
html:not([data-theme="dark"]) .theme-toggle button[data-theme-btn="light"],
html[data-theme="dark"] .theme-toggle button[data-theme-btn="dark"] { background:var(--accent); color:var(--on-accent); }

/* logged-out header link list (html-header.php non-admin branch) */
.header .guest-links { list-style:none; display:flex; gap:18px; margin:0; padding:0; }
.header .guest-links a { font-size:13px; color:var(--muted); }
.header .guest-links a:hover { color:var(--text); }

/* ============================================================
   Navigation (pills) — markup from admin-links.class.php
   ============================================================ */
.nav { background:var(--surface); border-bottom:1px solid var(--border); padding:12px 36px; }
ul.tabnav { list-style:none; margin:0; padding:0; display:flex; gap:4px; flex-wrap:wrap; }
ul.tabnav li { margin:0; padding:0; float:none; display:block; }
ul.tabnav li a {
	display:block; padding:8px 15px; border-radius:9px;
	font-size:13.5px; font-weight:500; color:var(--muted); text-decoration:none; white-space:nowrap;
	transition:background .15s ease, color .15s ease;
}
ul.tabnav li a:hover { background:var(--surface-2); color:var(--text); text-decoration:none; }
ul.tabnav li.active a,
ul.tabnav li.tab a { background:var(--accent-soft); color:var(--accent); font-weight:600; }

ul.activenav { list-style:none; margin:10px 0 0; padding:0; display:flex; gap:4px; flex-wrap:wrap; }
ul.activenav li { margin:0; padding:0; float:none; display:block; }
ul.activenav li a {
	display:block; padding:5px 12px; border-radius:8px;
	font-size:12.5px; font-weight:500; color:var(--muted); text-decoration:none; white-space:nowrap;
}
ul.activenav li a:hover { background:var(--surface-2); color:var(--text); text-decoration:none; }
ul.activenav li.active a { background:var(--surface-2); color:var(--text); font-weight:600; }

/* ============================================================
   Body / layout
   ============================================================ */
.body { padding:40px; }
@media (max-width:720px) { .body { padding:24px 18px; } .header, .nav { padding-left:18px; padding-right:18px; } }

/* generic content container -> card */
.contain {
	background:var(--surface);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:28px 32px;
	margin:0 0 24px;
}
.contain:last-child { margin-bottom:0; }

/* right-hand rail (used by the dashboard's legacy markup and any page using .right) */
.right {
	float:right;
	width:320px;
	max-width:42%;
	margin:0 0 20px 24px;
	background:var(--surface);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:20px 22px;
	font-size:13.5px;
}
.right h2 { font-size:18px; }
.right ul { list-style:none; margin:0 0 8px; padding:0; }
.right li { padding:6px 0; border-bottom:1px solid var(--border); }

/* soft panel + admin messages (bt_admin_message) */
.tablecontain {
	background:var(--surface-2);
	border:1px solid var(--border);
	border-radius:12px;
	padding:14px 18px;
	margin:0 0 20px;
	font-size:13.5px;
	color:var(--text);
}
.tablecontain.notice  { background:var(--notice-bg);  border-color:var(--notice); }
.tablecontain.warning { background:var(--warning-bg); border-color:var(--warning); }
.tablecontain.error   { background:var(--error-bg);   border-color:var(--error); }

.ralign, span.ralign { display:block; text-align:right; font-size:13px; margin-top:8px; }
.leftcontain { float:left; }
.rightcontain { float:right; }
.advanced_settings { clear:both; margin:24px 0 0; }

/* ============================================================
   Tables
   ============================================================ */
table {
	width:100%;
	border-collapse:collapse;
	font-size:13px;
	margin:0 0 18px;
	background:var(--surface);
	border:1px solid var(--border);
	text-align:left;
}
thead { font-weight:600; }
th {
	padding:10px 14px; text-align:left;
	background:var(--surface-2); color:var(--muted);
	font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
	border-bottom:1px solid var(--border);
}
td { padding:11px 14px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:top; }
tr:last-child td { border-bottom:none; }
td.center { text-align:center; }
tr.negative { background:var(--surface-2); }       /* zebra striping */
tr.upgrade  { background:var(--accent-soft); }

/* ============================================================
   Forms
   ============================================================ */
form { font-size:14px; line-height:1.5; font-weight:normal; }
form h2 { font-family:var(--font-serif); font-size:18px; margin:0 0 12px; border-bottom:1px solid var(--border); padding-bottom:8px; }

fieldset {
	border:1px solid var(--border);
	border-radius:12px;
	background:var(--surface);
	padding:18px 20px;
	margin:0 0 20px;
	/* neutralise the legacy float + percentage widths so forms stack as clean cards */
	float:none;
	width:auto;
	overflow:visible;
}
legend { font-family:var(--font-serif); font-size:16px; font-weight:600; padding:0 8px; color:var(--text); }

label { color:var(--text); }

input, textarea, select {
	font-family:var(--font-sans);
	font-size:14px;
	color:var(--text);
	background:var(--surface);
	border:1px solid var(--border-strong);
	border-radius:8px;
	padding:8px 11px;
	transition:border-color .15s ease, box-shadow .15s ease;
}
textarea { width:100%; line-height:1.5; }
select { cursor:pointer; }
input:focus, textarea:focus, select:focus {
	outline:none;
	border-color:var(--accent);
	box-shadow:0 0 0 3px var(--accent-soft);
	background:var(--surface);
}
input:disabled, textarea:disabled, select:disabled { background:var(--surface-2); color:var(--faint); cursor:not-allowed; }
input[type="checkbox"], input[type="radio"] { width:auto; padding:0; accent-color:var(--accent); vertical-align:middle; }
input[type="file"] { padding:6px; background:var(--surface-2); }

/* buttons */
input[type="submit"], input[type="button"], button, .btn {
	font-family:var(--font-sans); font-size:13.5px; font-weight:600;
	color:var(--on-accent); background:var(--accent);
	border:1px solid transparent; border-radius:999px;
	padding:9px 20px; cursor:pointer;
	transition:filter .15s ease, background .15s ease;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover, .btn:hover { filter:brightness(1.07); text-decoration:none; }
input[type="submit"]:disabled, button:disabled { background:var(--surface-2); color:var(--faint); cursor:not-allowed; filter:none; }
.btn-ghost { background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
.btn-danger { background:var(--error); color:#fff; }
.submit { padding:.3em 0; }
.submit input { margin-right:8px; }

/* ============================================================
   Media library
   ============================================================ */
.file_upload { background:var(--accent-soft); border:1px solid var(--accent); border-radius:12px; padding:14px 16px; }
.files_list { background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:8px 12px; margin:4px 0; }

/* ============================================================
   Comments moderation
   ============================================================ */
.comments { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); font-size:13.5px; margin:0 0 14px; overflow:hidden; box-shadow:var(--shadow); }
.comments cite { display:block; font-style:normal; font-weight:600; font-size:13px; padding:11px 16px; color:var(--text); background:var(--surface-2); border-bottom:1px solid var(--border); }
.comments cite a { font-weight:600; }
.comments_body { font-family:var(--font-sans); background:var(--surface); padding:16px; font-size:14px; line-height:1.6; color:var(--text); }
.comments_bottom { background:var(--surface); padding:13px 16px; display:flex; flex-direction:column; gap:11px; font-size:12.5px; border-top:1px solid var(--border); }

/* per-comment admin controls (bt_comment_admin_bottom) */
.cmod-meta { display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-family:var(--font-mono); font-size:11px; color:var(--muted); }
.cmod-meta .cmod-num { font-weight:600; color:var(--text); }
.cmod-meta a { color:var(--muted); }
.cmod-meta a:hover { color:var(--accent); }
.cmod-actions { display:flex; gap:8px; flex-wrap:wrap; }
.cmod-actions a {
	font-family:var(--font-sans); font-size:12px; font-weight:600;
	padding:5px 13px; border-radius:999px;
	background:var(--surface-2); border:1px solid var(--border); color:var(--text);
	transition:border-color .15s ease, color .15s ease;
}
.cmod-actions a:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
.cmod-actions a.cmod-danger:hover { border-color:var(--error); color:var(--error); }
.cmod-mass { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.cmod-mass-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-right:2px; }
.cmod-opt {
	display:inline-flex; align-items:center; gap:6px;
	padding:4px 11px; border-radius:999px; cursor:pointer;
	border:1px solid var(--border); background:var(--surface); color:var(--text);
	font-size:12px; transition:border-color .15s ease, background .15s ease;
}
.cmod-opt input { margin:0; }
.cmod-opt:hover { border-color:var(--border-strong); }
.cmod-opt.cmod-del:hover { border-color:var(--error); }
.cmod-opt.cmod-app:hover { border-color:var(--accent); }

/* moderation action + filter bars */
.cmod-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cmod-bar a {
	font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:999px;
	background:var(--surface-2); border:1px solid var(--border); color:var(--text);
	transition:border-color .15s ease, color .15s ease;
}
.cmod-bar a:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
.cmod-filter a { font-size:12.5px; padding:5px 12px; border-radius:999px; color:var(--muted); border:1px solid transparent; }
.cmod-filter a:hover { background:var(--surface-2); color:var(--text); text-decoration:none; }
.cmod-filter a.active { background:var(--accent-soft); color:var(--accent); font-weight:600; }

/* ============================================================
   Drag-sortable list (edit-link.php / interface.js)
   ============================================================ */
ol.list { list-style:none; margin:0; padding:0; }
ol.list li.sortitem {
	background:var(--surface);
	border:1px solid var(--border);
	border-radius:10px;
	padding:11px 16px;
	margin:0 0 8px;
	cursor:move;
}
ol.list li.sortitem.odd { background:var(--surface-2); }

/* ============================================================
   Footer
   ============================================================ */
.copyright {
	padding:18px 40px 40px;
	font-family:var(--font-mono);
	font-size:11.5px;
	color:var(--faint);
	text-align:left;
	border:0;
}
.copyright a { color:var(--muted); }
.copyright p { margin:4px 0; }

/* ============================================================
   Auth screens (login / forgot-password)
   ============================================================ */
.logincontain {
	max-width:380px;
	margin:8vh auto 0;
	text-align:left;
}
.logincontain.contain { padding:32px 34px; }
.logincontain h1, .logincontain h2 { text-align:left; }
.logincontain p { margin:0 0 14px; }
.logincontain input[type="text"], .logincontain input[type="password"] { width:100%; }

/* ============================================================
   Reusable building blocks for the bespoke (hero) pages
   ============================================================ */
.page-head { margin-bottom:28px; }
.eyebrow { font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:8px; }
.page-head h1 { margin:0; }
.page-sub { font-size:15px; color:var(--muted); margin:9px 0 0; }
.page-sub strong { color:var(--text); font-weight:500; }

.layout-2col { display:flex; gap:30px; align-items:flex-start; }
.layout-2col .col-main { flex:1.7; min-width:0; }
.layout-2col .col-rail { flex:none; width:320px; display:flex; flex-direction:column; gap:20px; }
@media (max-width:900px) { .layout-2col { flex-direction:column; } .layout-2col .col-rail { width:100%; } }

.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin:0 0 20px; }
.card:last-child { margin-bottom:0; }
.card-pad { padding:24px; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 24px; border-bottom:1px solid var(--border); }
.card-head h2, .card-head h3 { margin:0; }
.card-link { font-size:13px; color:var(--accent); font-weight:500; }
.card-row { display:flex; align-items:flex-start; gap:16px; padding:15px 24px; border-top:1px solid var(--border); }
.card-row:first-child { border-top:0; }

/* event severity badges (shared by dashboard + event viewer) */
.ev-badge { flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:78px; padding:4px 10px; border-radius:999px; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.ev-badge.notice  { background:var(--notice-bg);  color:var(--notice); }
.ev-badge.warning { background:var(--warning-bg); color:var(--warning); }
.ev-badge.error   { background:var(--error-bg);   color:var(--error); }
.ev-desc { font-size:14px; color:var(--text); overflow-wrap:anywhere; line-height:1.45; }
.ev-meta { font-family:var(--font-mono); font-size:11px; color:var(--faint); margin-top:4px; }

/* stat rows (dashboard rail) */
.stat-row { display:flex; align-items:baseline; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); }
.stat-row:last-child { border-bottom:0; padding-bottom:2px; }
.stat-label { font-size:14px; color:var(--muted); }
.stat-value { font-family:var(--font-mono); font-size:22px; font-weight:600; color:var(--text); }

/* notice card (e.g. "queue is clear") */
.notice-card { background:var(--accent-soft); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; }
.notice-card .nc-head { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.notice-card .nc-dot { width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; }
.notice-card .nc-title { font-size:14px; font-weight:600; color:var(--accent); }
.notice-card p { font-size:13px; color:var(--muted); margin:0; line-height:1.55; }

/* simple form field stack for bespoke forms */
.field { margin:0 0 16px; }
.field > label { display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.field .hint { font-size:12px; color:var(--faint); margin-top:5px; }
.field input[type="text"], .field input[type="password"], .field input[type="email"], .field input[type="url"], .field input[type="number"], .field textarea, .field select { width:100%; }
.field-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:18px; }

/* horizontal toolbar (bulk actions, filters) */
.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:14px 0; }
.toolbar .spacer { flex:1; }

hr { border:0; border-top:1px solid var(--border); margin:20px 0; }

/* ============================================================
   Hero-page utilities
   ============================================================ */
.ev-main { flex:1; min-width:0; }
.ev-link { font-size:12px; color:var(--faint); align-self:center; white-space:nowrap; }
.ev-link:hover { color:var(--accent); }
.notice-card.warn { background:var(--warning-bg); }
.notice-card.warn .nc-dot { background:var(--warning); }
.notice-card.warn .nc-title { color:var(--warning); }
.muted { color:var(--muted); }
.mono { font-family:var(--font-mono); }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; background:var(--surface-2); color:var(--muted); }
.pill.ok { background:var(--accent-soft); color:var(--accent); }
.pill.warn { background:var(--warning-bg); color:var(--warning); }
.pill.bad { background:var(--error-bg); color:var(--error); }
.meta-mono { font-family:var(--font-mono); font-size:11px; color:var(--faint); }

/* ============================================================
   Settings / form pages: fieldsets sit side-by-side as bordered
   boxes and fill the width (restores the classic multi-column split).
   ============================================================ */
.contain > form { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:20px; align-items:start; }
.contain > form > *:not(fieldset) { grid-column:1 / -1; }   /* intro text, submit, hooks span the full width */
.contain > form > br { display:none; }
.contain > form > fieldset { float:none; width:auto !important; margin:0; padding:16px 20px 8px; }
.contain > form > fieldset legend { padding:0; }
.contain > form > fieldset p { margin:0 0 13px; }
.contain > form > fieldset input[type="text"],
.contain > form > fieldset input[type="password"],
.contain > form > fieldset input[type="email"],
.contain > form > fieldset input[type="url"],
.contain > form > fieldset input[type="number"],
.contain > form > fieldset select,
.contain > form > fieldset textarea { width:100%; max-width:100%; }

/* neutral default for event badges (e.g. debug / unknown severity) */
.ev-badge { background:var(--surface-2); color:var(--muted); }

/* button variants need to out-specify input[type="submit"] */
input[type="submit"].btn-danger, input[type="button"].btn-danger, button.btn-danger { background:var(--error); color:#fff; border-color:transparent; }
input[type="submit"].btn-ghost, input[type="button"].btn-ghost, button.btn-ghost { background:var(--surface-2); color:var(--text); border:1px solid var(--border); }