/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Figtree","arguments":[{"subsets":["latin"],"display":"swap","weight":["400","500","600","700"],"variable":"--font-figtree"}],"variableName":"figtree"} ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: '__Figtree_7c5662';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/d9fef5bf2f64cf9a-s.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;
}
/* latin */
@font-face {
  font-family: '__Figtree_7c5662';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/de42cfb9a3b980ae-s.p.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;
}
/* latin-ext */
@font-face {
  font-family: '__Figtree_7c5662';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/d9fef5bf2f64cf9a-s.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;
}
/* latin */
@font-face {
  font-family: '__Figtree_7c5662';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/de42cfb9a3b980ae-s.p.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;
}
/* latin-ext */
@font-face {
  font-family: '__Figtree_7c5662';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/d9fef5bf2f64cf9a-s.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;
}
/* latin */
@font-face {
  font-family: '__Figtree_7c5662';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/de42cfb9a3b980ae-s.p.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;
}
/* latin-ext */
@font-face {
  font-family: '__Figtree_7c5662';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/d9fef5bf2f64cf9a-s.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;
}
/* latin */
@font-face {
  font-family: '__Figtree_7c5662';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/de42cfb9a3b980ae-s.p.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;
}@font-face {font-family: '__Figtree_Fallback_7c5662';src: local("Arial");ascent-override: 94.32%;descent-override: 24.82%;line-gap-override: 0.00%;size-adjust: 100.72%
}.__className_7c5662 {font-family: '__Figtree_7c5662', '__Figtree_Fallback_7c5662';font-style: normal
}.__variable_7c5662 {--font-figtree: '__Figtree_7c5662', '__Figtree_Fallback_7c5662'
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Newsreader","arguments":[{"subsets":["latin"],"display":"swap","weight":["400","500","600"],"style":["normal","italic"],"variable":"--font-newsreader"}],"variableName":"newsreader"} ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/eb251072d3b5478c.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;
}
/* latin-ext */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/e92f802bb57ccffe.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;
}
/* latin */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/4b9bb515ce6d026f.p.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;
}
/* vietnamese */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/eb251072d3b5478c.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;
}
/* latin-ext */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/e92f802bb57ccffe.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;
}
/* latin */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/4b9bb515ce6d026f.p.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;
}
/* vietnamese */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/eb251072d3b5478c.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;
}
/* latin-ext */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/e92f802bb57ccffe.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;
}
/* latin */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/4b9bb515ce6d026f.p.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;
}
/* vietnamese */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/7088c2b12ccac062.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;
}
/* latin-ext */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/665e920483964785.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;
}
/* latin */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/5611c55482296524.p.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;
}
/* vietnamese */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/7088c2b12ccac062.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;
}
/* latin-ext */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/665e920483964785.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;
}
/* latin */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/5611c55482296524.p.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;
}
/* vietnamese */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/7088c2b12ccac062.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;
}
/* latin-ext */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/665e920483964785.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;
}
/* latin */
@font-face {
  font-family: '__Newsreader_39d0e4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/5611c55482296524.p.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;
}.__className_39d0e4 {font-family: '__Newsreader_39d0e4'
}.__variable_39d0e4 {--font-newsreader: '__Newsreader_39d0e4'
}

/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/styles/globals.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
/* src/styles/globals.css */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(78 154 99 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(78 154 99 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #E7E8E2; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: var(--font-figtree), Figtree, ui-sans-serif, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9AA193; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9AA193; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
:root {
    /* Brand colors, Light mode (Fern forest greens on warm cream).
       Values sampled from the Fern Design System foundations. */
    --color-bg: 251 250 247;          /* #FBFAF7 warm cream canvas */
    --color-bg-secondary: 244 245 240; /* #F4F5F0 recessed panels */
    --color-bg-tertiary: 234 242 231;  /* #EAF2E7 sage-100 */
    --color-text: 30 38 32;            /* #1E2620 ink-900 */
    --color-text-secondary: 94 102 91; /* #5E665B ink-500 */
    --color-text-tertiary: 138 145 133;/* #8A9185 ink-400 */
    --color-border: 231 232 226;       /* #E7E8E2 hairline */
    --color-border-focus: 31 69 43;    /* #1F452B forest-800 */
    --color-ring: 78 154 99;           /* #4E9A63 forest-500 */

    /* Semantic colors (Fern forest greens + earthy accents) */
    --color-primary: 31 69 43;         /* #1F452B forest-800 action */
    --color-primary-hover: 20 51 30;   /* #14331E forest-900 */
    --color-accent: 61 126 82;         /* #3D7E52 forest-600 */
    --color-accent-hover: 46 99 64;    /* #2E6340 */
    --color-warning: 176 122 46;       /* #B07A2E ochre */
    --color-danger: 176 70 46;         /* #B0462E brick */
    --color-success: 61 122 78;        /* #3D7A4E */
    --color-info: 61 126 82;           /* #3D7E52 forest-600 */

    /* Surface colors */
    --color-surface: 255 255 255;
    --color-surface-hover: 244 245 240;
    --color-surface-active: 234 242 231;

    /* Status + ink colors used directly in component inline styles (Sylwia review #31/#32): the
       same hex values were hardcoded in many places (danger/success/warning badges, dark ink).
       Tokenizing them keeps the exact values (no visual change) but moves the definition to ONE
       place so a status color can be changed globally. Hex form because these are consumed as raw
       CSS color values inline, not via the Tailwind rgb(var()/alpha) tokens above. */
    --status-danger-bg: #fbe4e4;
    --status-danger-fg: #9b1c1c;
    --status-success-bg: #ddecc9;
    --status-warning-bg: #fdead2;
    --status-warning-fg: #9a4a08;
    --ink-strong: #21271c;
    --brown-strong: #3a2a12;

    /* Elevation, soft, warm-tinted, never harsh */
    --shadow-sm: 0 1px 3px rgba(31, 38, 25, 0.06), 0 1px 2px rgba(31, 38, 25, 0.04);
    --shadow-md: 0 4px 14px rgba(31, 38, 25, 0.07), 0 2px 6px rgba(31, 38, 25, 0.04);
    --shadow-lg: 0 12px 32px rgba(31, 38, 25, 0.10), 0 4px 10px rgba(31, 38, 25, 0.05);
  }
.dark {
    /* Dark mode, Fern forest-night palette (hand-tuned). */
    --color-bg: 16 21 14;              /* #10150E deep forest-black canvas */
    --color-bg-secondary: 25 31 22;    /* #191F16 */
    --color-bg-tertiary: 32 48 29;     /* #20301D sage-100 dark */
    --color-text: 238 243 234;         /* #EEF3EA cream */
    --color-text-secondary: 176 186 164;/* #97A291 */
    --color-text-tertiary: 150 160 137;/* #717C6B */
    --color-border: 42 51 39;          /* #2A3327 */
    --color-border-focus: 47 145 80;   /* #2F9150 */
    --color-ring: 92 176 116;          /* #5CB074 */

    --color-primary: 47 145 80;        /* #2F9150, greens lift on dark */
    --color-primary-hover: 54 166 92;  /* #36A65C */
    --color-accent: 92 176 116;        /* #5CB074 */
    --color-accent-hover: 98 188 124;  /* #62BC7C */
    --color-warning: 214 168 89;       /* #D6A859 lifted ochre */
    --color-danger: 216 122 96;        /* #D87A60 lifted brick */
    --color-success: 116 191 133;      /* #74BF85 */
    --color-info: 92 176 116;

    --color-surface: 26 34 24;         /* #1A2218 cards / panels */
    --color-surface-hover: 32 48 29;   /* #20301D */
    --color-surface-active: 42 58 38;  /* #2A3A26 */

    /* deeper, warmer elevation so cards lift off the near-black canvas */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.40);
  }
/* WCAG 2.1 Level AA focus indicators */
*:focus-visible {
    outline: 2px solid rgb(var(--color-ring));
    outline-offset: 2px;
    border-radius: 2px;
  }
/* Remove default focus for mouse users */
*:focus:not(:focus-visible) {
    outline: none;
  }
/* Base element styles */
html {
    font-family: var(--font-figtree), 'Figtree', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
body {
    /* Warm cream canvas with a soft green halo at the top, Fern signature. */
    background-color: rgb(var(--color-bg));
    background-image: radial-gradient(
      1200px 600px at 50% -10%,
      #F2F6EE 0%,
      rgba(242, 246, 238, 0) 60%
    );
    color: rgb(var(--color-text));
    transition: background-color 0.2s ease, color 0.2s ease;
  }
/* On dark, the canvas glow flips to a deep forest halo. */
.dark body {
    background-image: radial-gradient(
      1200px 600px at 50% -10%,
      #1A2616 0%,
      rgba(26, 38, 22, 0) 60%
    );
  }
/* Keep browser-autofilled fields on-theme. Without this the browser paints its own
     autofill styling (a blue text tint + pale background) that clashes with the green
     ink, which is the "sign-up fields render blue" walkthrough bug. The inset box-shadow
     masks the autofill background; text-fill-color restores the ink color. */
input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-text-fill-color: rgb(var(--color-text));
    caret-color: rgb(var(--color-text));
    box-shadow: 0 0 0 1000px var(--surface, #ffffff) inset;
    -webkit-transition: background-color 9999s ease-in-out 0s;
    transition: background-color 9999s ease-in-out 0s;
  }
.dark input:-webkit-autofill,
  .dark textarea:-webkit-autofill,
  .dark select:-webkit-autofill {
    box-shadow: 0 0 0 1000px var(--surface, #1f2937) inset;
  }
/* GLOBAL FORM-ELEMENT STYLING (Sylwia #18: "no global input/button/textarea
     styling"). Raw <input>/<textarea>/<select> used in the marketing + voice
     areas now inherit consistent themed chrome WITHOUT a per-file CSS rule.

     Scoping: these rules are DELIBERATELY low-specificity element selectors,
     so any element that opts into a design-system class (.input/.select/
     .textarea/.btn) or the components/ui Button/Input (which carry their own
     classes) still wins on specificity and is unaffected. This only styles
     bare, otherwise-unclassed controls. type=checkbox/radio/range and file
     inputs are excluded so native affordances are preserved. */
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']):not([type='submit']):not([type='button']):not([type='reset']):not([class]),
  textarea:not([class]),
  select:not([class]) {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--ink-900);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    outline: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  }
textarea:not([class]) {
    min-height: 90px;
    resize: vertical;
    line-height: 1.5;
  }
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']):not([type='submit']):not([type='button']):not([type='reset']):not([class]):focus,
  textarea:not([class]):focus,
  select:not([class]):focus {
    border-color: var(--forest-400);
    box-shadow: 0 0 0 3px var(--sage-100);
  }
input:not([class])::-moz-placeholder, textarea:not([class])::-moz-placeholder {
    color: var(--ink-400);
  }
input:not([class])::placeholder,
  textarea:not([class])::placeholder {
    color: var(--ink-400);
  }
/* Raw, unclassed <button> gets a consistent quiet-forest resting style so a
     bare marketing/home button is not the browser default grey. A button
     that opts into .btn / any class keeps full control (this only hits
     button:not([class])). */
button:not([class]) {
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-700);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: 8px 14px;
    cursor: pointer;
    transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
  }
button:not([class]):hover {
    border-color: var(--ink-400);
    color: var(--ink-900);
  }
button:not([class]):disabled {
    opacity: .5;
    cursor: not-allowed;
  }
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}
/* Focus ring utility for interactive elements */
/* ============ SHELL ============ */
/* ---- Sidebar (dark forest) ---- */
.sidebar {
    width: var(--side-w); flex: none; background: var(--forest-900);
    color: var(--on-forest); display: flex; flex-direction: column;
    transition: width var(--dur) var(--ease-out); position: relative; z-index: 30;
  }
.dark .sidebar { background: #0C1107; border-right: 1px solid var(--border); }
.sidebar.collapsed { width: var(--side-w-collapsed); }
.side-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; height: var(--header-h); }
.side-logo { display: flex; align-items: baseline; gap: 1px; min-width: 0; }
.side-logo .wm { font-family: var(--font-serif); font-weight: 500; font-size: 24px; color: #F3F6EC; letter-spacing: -.01em; }
.side-logo .leaf { width: 15px; height: 20px; color: #9DBE7C; align-self: center; margin-left: 1px; }
.side-collapse { margin-left: auto; color: #A8B894; background: none; border: none; padding: 6px; border-radius: 8px; display: grid; place-items: center; }
.side-collapse:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar.collapsed .side-logo .wm, .sidebar.collapsed .tenant-badge { display: none; }
.tenant-badge { margin: 0 14px 10px; padding: 9px 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 10px; display: flex; align-items: center; gap: 9px; }
.tenant-badge .tb-mark { width: 26px; height: 26px; border-radius: 7px; background: #9DBE7C; color: #1B2512; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; }
.tenant-badge .tb-name { font-weight: 600; font-size: 13px; color: #EAF0E0; line-height: 1.1; }
.tenant-badge .tb-sub { font-size: 11px; color: #9DA988; }
.side-scroll { flex: 1; overflow-y: auto; padding: 4px 10px 14px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.side-scroll::-webkit-scrollbar { width: 6px; }
.side-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; }
.nav-group { margin-bottom: 4px; }
.nav-grouplabel { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7E8C6A; padding: 12px 12px 5px; }
.sidebar.collapsed .nav-grouplabel { text-align: center; font-size: 8px; padding: 10px 0 4px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: #C4CEB2; font-size: 13.5px; font-weight: 500; border: none; background: none; width: 100%; text-align: left; position: relative; transition: background var(--dur-fast), color var(--dur-fast); }
.nav-item:hover { background: rgba(255,255,255,.07); color: #F1F5EA; }
.nav-item.active { background: var(--forest-700); color: #fff; }
.nav-item.\!active { background: var(--forest-700) !important; color: #fff !important; }
.dark .nav-item.active { background: var(--forest-700); color: var(--on-forest); }
.dark .nav-item.\!active { background: var(--forest-700) !important; color: var(--on-forest) !important; }
.nav-item .ico { color: currentColor; opacity: .92; }
.nav-item .ni-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .ni-star { opacity: 0; color: #8B9A72; padding: 2px; margin: -2px; border-radius: 5px; display: grid; }
.nav-item:hover .ni-star { opacity: 1; }
.nav-item .ni-star.on { opacity: 1; color: #C6D9A4; }
.nav-item .ni-star:hover { background: rgba(255,255,255,.12); }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px 0; }
.sidebar.collapsed .ni-label, .sidebar.collapsed .ni-star, .sidebar.collapsed .acc-chev, .sidebar.collapsed .ni-badge { display: none; }
.acc-head { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: #B7C3A2; font-size: 13.5px; font-weight: 600; border: none; background: none; width: 100%; text-align: left; }
.acc-head:hover { background: rgba(255,255,255,.06); color: #EEF3E6; }
.acc-head .acc-chev { margin-left: auto; transition: transform var(--dur-fast); color: #8B9A72; }
.acc-head[aria-expanded="true"] .acc-chev { transform: rotate(90deg); }
.acc-body { overflow: hidden; }
.acc-body .nav-item { padding-left: 40px; font-size: 13px; font-weight: 500; color: #AEBA9A; }
.sidebar.collapsed .acc-body .nav-item { padding-left: 0; }
.ni-badge { margin-left: auto; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 5px; }
.side-foot { border-top: 1px solid rgba(255,255,255,.08); padding: 8px 10px; }
/* ---- Header ---- */
.fern-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.header { height: var(--header-h); flex: none; display: flex; align-items: center; gap: 14px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--border); z-index: 20; }
.querybar { flex: 1; max-width: 560px; margin: 0 auto; position: relative; }
.querybar .qb-in { width: 100%; height: 40px; border: 1px solid var(--border); background: var(--bg-tint); border-radius: 999px; padding: 0 44px 0 42px; font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-900); outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.querybar .qb-in:focus { border-color: var(--forest-400); box-shadow: 0 0 0 3px var(--sage-100); background: var(--surface); }
.querybar .qb-in::-moz-placeholder { color: var(--ink-400); }
.querybar .qb-in::placeholder { color: var(--ink-400); }
.querybar .qb-lead { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--forest-600); pointer-events: none; }
.querybar .qb-kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--ink-400); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; background: var(--surface); }
.hdr-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; border: none; background: none; color: var(--ink-500); display: grid; place-items: center; position: relative; transition: background var(--dur-fast), color var(--dur-fast); }
.icon-btn:hover { background: var(--bg-tint); color: var(--ink-900); }
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 999px; background: var(--danger); border: 2px solid var(--surface); }
.icon-btn .ni-badge { position: absolute; top: 4px; right: 4px; margin: 0; }
.avatar-btn { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.avatar-btn:hover { background: var(--bg-tint); }
.avatar { width: 30px; height: 30px; border-radius: 999px; background: var(--sage-200); color: var(--forest-700); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.avatar-btn .ab-name { font-size: 12.5px; font-weight: 600; color: var(--ink-900); }
.avatar-btn .ab-role { font-size: 10.5px; color: var(--ink-400); }
/* role switcher pill */
.role-switch { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; border: 1px dashed var(--forest-400); background: var(--sage-100); color: var(--forest-700); font-size: 12px; font-weight: 600; }
.role-switch select { border: none; background: none; font-family: var(--font-sans); font-weight: 700; font-size: 12px; color: var(--forest-700); outline: none; }
/* ---- Content region ---- */
.content { flex: 1; overflow-y: auto; background: var(--bg); }
.page { max-width: 1240px; margin: 0 auto; padding: 26px 30px 60px; }
.pagehead { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.pagehead > div:first-child { flex: 1 1 auto; min-width: 0; }
.pagehead h1 { text-wrap: balance; font-family: var(--font-sans); font-weight: 700; font-size: 26px; letter-spacing: -.02em; color: var(--ink-900); margin: 4px 0 0; }
.pagehead .ph-ey { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--forest-600); }
.pagehead .ph-sub { font-size: 13.5px; color: var(--ink-500); margin-top: 5px; max-width: 60ch; }
.pagehead .grow { flex: 1; }
.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-400); margin-bottom: 12px; }
.breadcrumb a:hover { color: var(--forest-600); }
.breadcrumb .sep { color: var(--ink-300); }
/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--admin-radius); font-size: 13.5px; font-weight: 600; border: 1px solid transparent; transition: all var(--dur-fast); white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--forest-800); color: var(--on-forest); border-color: var(--forest-800); }
.btn-primary:hover { background: var(--forest-900); }
.dark .btn-primary:hover { background: var(--forest-600); }
.btn-ghost { background: var(--surface); color: var(--ink-700); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--ink-400); color: var(--ink-900); }
.btn-quiet { background: var(--sage-100); color: var(--forest-700); }
.btn-quiet:hover { background: var(--sage-200); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 14.5px; }
.btn-icon { width: 40px; padding: 0; }
.btn-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.btn:disabled { opacity: .5; pointer-events: none; }
/* ---- Cards ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card-pad { padding: 20px; }
.card-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.card-head h3 { font-size: 15px; font-weight: 700; color: var(--ink-900); margin: 0; letter-spacing: -.01em; }
.card-head .grow { flex: 1; }
.card-head .ch-link { font-size: 12.5px; font-weight: 600; color: var(--forest-600); display: inline-flex; align-items: center; gap: 4px; }
.card-head .ch-link:hover { color: var(--forest-800); }
/* ---- KPI ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 17px 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; display: block; }
.kpi .kpi-top { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.kpi .kpi-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--sage-100); color: var(--forest-600); display: grid; place-items: center; flex: none; }
.kpi .kpi-lab { font-size: 12px; font-weight: 600; color: var(--ink-500); }
.kpi .kpi-val { font-family: var(--font-sans); font-weight: 700; font-size: 27px; letter-spacing: -.02em; color: var(--ink-900); line-height: 1; }
.kpi .kpi-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; margin-top: 8px; }
.kpi .kpi-delta.up { color: var(--success); }
.kpi .kpi-delta.down { color: var(--danger); }
.kpi .kpi-delta .muted { color: var(--ink-400); font-weight: 400; }
/* ---- Grids ---- */
.grid-a { display: grid; gap: 14px; }
.g-2 { grid-template-columns: 1fr 1fr; }
.g-3 { grid-template-columns: repeat(3,1fr); }
.g-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 1080px){ .g-2,.g-3,.g-2-1,.g-1-2,.kpi-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 900px){ .g-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px){ .g-2,.g-3,.g-2-1,.g-1-2,.g-4,.kpi-grid{ grid-template-columns:1fr; } }
/* ---- Dashboard phone/tablet shell responsiveness ----
     Keeps the dashboard usable at 360-430px: trims the generous desktop
     gutters, lets the header controls fit + wrap, and stacks page-head +
     toolbar rows so nothing pushes off-screen. Both themes flip via the
     same var(--*) tokens; no color literals here. */
@media (max-width: 640px){
    .page { padding: 16px 14px 48px; }
    .header { padding: 0 12px; gap: 8px; }
    .querybar { max-width: none; }
    .hdr-actions { gap: 2px; }
    .pagehead { flex-direction: column; gap: 12px; }
    .pagehead h1 { font-size: 22px; }
    .sec { flex-wrap: wrap; }
    .toolbar { gap: 8px; }
    .toolbar .search-in { min-width: 0; max-width: none; width: 100%; flex: 1 1 100%; }
  }
@media (max-width: 900px) and (min-width: 641px){
    .page { padding: 22px 20px 56px; }
  }
/* ---- Toolbar ---- */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.search-in { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 220px; flex: 1; max-width: 340px; }
.search-in input { border: none; outline: none; background: none; font-family: var(--font-sans); font-size: 13px; color: var(--ink-900); width: 100%; }
.search-in .ico { color: var(--ink-400); }
.filter-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-700); }
.filter-btn:hover { border-color: var(--ink-400); }
.filter-btn.on { background: var(--sage-100); border-color: var(--forest-400); color: var(--forest-700); }
/* ---- DataTable ---- */
/* overflow-x auto lets a wide table scroll WITHIN the card on narrow
     viewports instead of blowing the page out; overflow-y hidden preserves
     the rounded-corner clip the card relied on. */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow-x: auto; overflow-y: hidden; box-shadow: var(--shadow-sm); }
table.dt { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.dt thead th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-400); padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-tint); white-space: nowrap; }
table.dt tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--ink-700); vertical-align: middle; }
table.dt tbody tr:last-child td { border-bottom: none; }
table.dt tbody tr { transition: background var(--dur-fast); }
table.dt tbody tr.clickable { cursor: pointer; }
table.dt tbody tr:hover { background: var(--bg-tint); }
table.dt .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-900); }
table.dt .center { text-align: center; }
table.dt .strong { font-weight: 600; color: var(--ink-900); }
.cell-name { display: flex; align-items: center; gap: 10px; }
.cell-name .nm { font-weight: 600; color: var(--ink-900); }
.cell-name .\!nm { font-weight: 600 !important; color: var(--ink-900) !important; }
.cell-name .sub { font-size: 11.5px; color: var(--ink-400); }
/* ---- Badges / pills ---- */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.badge .bdot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.badge-green { background: var(--success-bg); color: var(--success); }
.badge-sage { background: var(--sage-100); color: var(--forest-700); }
.badge-amber { background: color-mix(in srgb, var(--warning) 15%, var(--surface)); color: var(--warning); }
.badge-red { background: color-mix(in srgb, var(--danger) 13%, var(--surface)); color: var(--danger); }
.badge-gray { background: var(--bg-tint); color: var(--ink-500); }
.badge-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--ink-500); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--sage-100); color: var(--forest-700); font-size: 12px; font-weight: 500; border: 1px solid var(--sage-200); }
/* ---- Tabs ---- */
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { font-size: 13.5px; font-weight: 600; color: var(--ink-400); background: none; border: none; padding: 12px 0; position: relative; white-space: nowrap; }
.tab:hover { color: var(--ink-700); }
.tab.active { color: var(--forest-700); }
.tab.\!active { color: var(--forest-700) !important; }
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--forest-700); border-radius: 2px; }
.tab.\!active::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -1px !important; height: 2px !important; background: var(--forest-700) !important; border-radius: 2px !important; }
.tab .tcount { color: var(--ink-300); font-weight: 600; }
/* ---- Progress ---- */
.prog { height: 8px; border-radius: 999px; background: var(--sage-100); overflow: hidden; }
.prog > i { display: block; height: 100%; background: var(--forest-600); border-radius: 999px; }
.prog-lg { height: 10px; }
/* ---- Bar chart ---- */
.barchart .bc .bar { width: 100%; max-width: 42px; background: var(--forest-600); border-radius: 6px 6px 0 0; transition: height var(--dur); }
.barchart .bc .bar.alt { background: var(--sage-300); }
/* ---- Fern voice line (serif italic, signature) ---- */
.fern-voice { display: flex; gap: 11px; align-items: flex-start; padding: 14px 16px; background: var(--sage-100); border: 1px solid var(--sage-200); border-radius: var(--r-md); }
.fern-voice .fv-leaf { width: 20px; height: 26px; color: var(--forest-600); flex: none; margin-top: 1px; }
.fern-voice .fv-txt { font-family: var(--font-serif); font-style: italic; font-size: 15.5px; line-height: 1.5; color: var(--ink-700); }
.fern-voice .fv-txt b { font-style: normal; font-weight: 600; color: var(--forest-700); }
/* ---- Kanban ---- */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: thin; }
.kcol { flex: 0 0 268px; background: var(--bg-tint); border: 1px solid var(--border); border-radius: var(--r-lg); display: flex; flex-direction: column; max-height: calc(100vh - 240px); }
.kcol.over { outline: 2px solid var(--forest-400); outline-offset: -2px; }
.kcol-head { display: flex; align-items: center; gap: 8px; padding: 13px 14px 10px; }
.kcol-head .kc-name { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--forest-700); }
.kcol-head .kc-count { font-size: 11.5px; font-weight: 700; color: var(--ink-400); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.kcol-head .kc-sum { margin-left: auto; font-size: 11.5px; color: var(--ink-500); font-weight: 600; }
.kcol-body { padding: 4px 10px 12px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 9px; }
.kcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 13px; box-shadow: var(--shadow-xs); cursor: grab; transition: box-shadow var(--dur-fast), transform var(--dur-fast), border-color var(--dur-fast); }
.kcard:hover { box-shadow: var(--shadow-md); border-color: var(--sage-300); transform: translateY(-1px); }
.kcard.overdue { border-left: 3px solid var(--danger); }
.kcard .kc-nm { font-weight: 700; font-size: 14px; color: var(--ink-900); }
.kcard .kc-amt { font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--forest-700); margin-top: 3px; }
.kcard .kc-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 11.5px; color: var(--ink-400); }
.kcard .kc-drop { border: 1px dashed var(--border-strong); border-radius: var(--r-md); padding: 14px; text-align: center; font-size: 11.5px; color: var(--ink-400); }
/* ---- Forms ---- */
.field { margin-bottom: 15px; }
.field > label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-700); margin-bottom: 6px; }
.field .hint { font-size: 11.5px; color: var(--ink-400); margin-top: 5px; }
.input, .select, .textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); padding: 10px 12px; font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-900); outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--forest-400); box-shadow: 0 0 0 3px var(--sage-100); }
.textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
/* Native form controls: theme the raw <select>/<option>/<input>/<textarea>
     so any form using bare elements (e.g. the network builder's relationship
     picker, which styles its box inline) still gets themed text + a themed
     option-list popup in BOTH modes. The option popup is drawn by the OS and
     largely ignores CSS; setting background-color + color here plus the
     color-scheme flag on :root/.dark is what stops the white-in-dark-mode
     list. Light mode is unchanged: these tokens resolve to the same cream /
     white surface + dark ink that light mode already used. */
select, option, optgroup { background-color: var(--surface); color: var(--ink-900); }
.toggle { width: 42px; height: 24px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background var(--dur-fast); border: none; flex: none; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 999px; background: #fff; transition: transform var(--dur-fast); box-shadow: var(--shadow-xs); }
.toggle.on { background: var(--forest-600); }
.toggle.on::after { transform: translateX(18px); }
/* ---- Settings nav ---- */
.settings-wrap { display: grid; grid-template-columns: 210px 1fr; gap: 26px; align-items: start; }
@media (max-width: 860px){ .settings-wrap { grid-template-columns: 1fr; } }
.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.settings-nav .sn { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink-600); background: none; border: none; text-align: left; }
.settings-nav .sn:hover { background: var(--bg-tint); color: var(--ink-900); }
.settings-nav .sn.active { background: var(--sage-100); color: var(--forest-700); font-weight: 600; }
.settings-nav .sn.\!active { background: var(--sage-100) !important; color: var(--forest-700) !important; font-weight: 600 !important; }
/* ---- Drawer / Modal ---- */
.scrim { position: fixed; inset: 0; background: rgba(20,26,15,.42); backdrop-filter: blur(2px); z-index: 60; }
.\!drawer { position: fixed !important; top: 0 !important; right: 0 !important; height: 100vh !important; width: 640px !important; max-width: 94vw !important; background: var(--surface) !important; box-shadow: var(--shadow-lg) !important; z-index: 61 !important; display: flex !important; flex-direction: column !important; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 640px; max-width: 94vw; background: var(--surface); box-shadow: var(--shadow-lg); z-index: 61; display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.drawer-head h3 { font-size: 17px; font-weight: 700; margin: 0; }
.drawer-body { flex: 1; overflow-y: auto; padding: 22px; }
.drawer-foot { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }
.modal { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
/* ---- Empty / section ---- */
.\!empty { text-align: center !important; padding: 50px 24px !important; }
.empty { text-align: center; padding: 50px 24px; }
.\!empty .em-ic { width: 52px !important; height: 52px !important; border-radius: 14px !important; background: var(--sage-100) !important; color: var(--forest-600) !important; display: grid !important; place-items: center !important; margin: 0 auto 14px !important; }
.empty .em-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--sage-100); color: var(--forest-600); display: grid; place-items: center; margin: 0 auto 14px; }
.\!empty h3 { font-size: 17px !important; font-weight: 700 !important; margin: 0 0 6px !important; color: var(--ink-900) !important; }
.empty h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--ink-900); }
.\!empty p { font-size: 13.5px !important; color: var(--ink-500) !important; max-width: 42ch !important; margin: 0 auto !important; }
.empty p { font-size: 13.5px; color: var(--ink-500); max-width: 42ch; margin: 0 auto; }
.sec { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 14px; }
.sec h2 { font-size: 16px; font-weight: 700; color: var(--ink-900); margin: 0; }
.sec .ln { flex: 1; height: 1px; background: var(--border); }
.sec .mt { font-size: 12px; color: var(--ink-400); }
.roadmap-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--warning) 13%, var(--surface)); color: var(--warning); font-size: 11px; font-weight: 700; }
/* ---- DataTable check + name cells ---- */
.dt-check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border-strong); background: var(--surface); display: inline-block; vertical-align: middle; }
table.dt th.dt-checkcol, table.dt td.dt-checkcol { width: 40px; }
/* ---- Detail sidebar layout (donor profile / detail pages) ---- */
.\!detail { display: grid !important; grid-template-columns: 320px 1fr !important; gap: 22px !important; align-items: start !important; }
.detail { display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; }
@media (max-width: 980px){ .\!detail { grid-template-columns: 1fr !important; } .detail { grid-template-columns: 1fr; } }
.dsb { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 20px; }
.dsb-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.dsb-av { width: 66px; height: 66px; border-radius: 999px; background: var(--sage-200); color: var(--forest-700); display: grid; place-items: center; font-weight: 700; font-size: 22px; }
.dsb-name { font-family: var(--font-sans); font-weight: 700; font-size: 19px; color: var(--ink-900); letter-spacing: -.01em; }
.dsb-sub { font-size: 12.5px; color: var(--ink-500); }
.dsb-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.dsb-facts { display: grid; gap: 0; margin-top: 4px; }
.fact { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.fact:last-child { border-bottom: none; }
.fact .fk { font-size: 12px; color: var(--ink-400); font-weight: 500; }
.fact .fv { font-size: 13px; color: var(--ink-900); font-weight: 600; text-align: right; }
/* ---- Info grid (drawers / detail) ---- */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.info-grid .ig { background: var(--surface); padding: 13px 15px; }
.info-grid .ig .k { font-size: 11px; color: var(--ink-400); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.info-grid .ig .v { font-size: 14px; color: var(--ink-900); font-weight: 600; margin-top: 3px; }
.info-grid .ig .\!v { font-size: 14px !important; color: var(--ink-900) !important; font-weight: 600 !important; margin-top: 3px !important; }
/* ---- Timeline / activity ---- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl-item { position: relative; padding: 4px 0 20px; }
.tl-item::before { content: ""; position: absolute; left: -23px; top: 6px; width: 12px; height: 12px; border-radius: 999px; background: var(--surface); border: 2px solid var(--forest-400); }
.tl-item.accent::before { background: var(--forest-600); border-color: var(--forest-600); }
.tl-when { font-size: 11.5px; color: var(--ink-400); font-weight: 600; }
.tl-body { font-size: 13.5px; color: var(--ink-700); margin-top: 2px; }
.tl-body b { color: var(--ink-900); font-weight: 600; }
/* ---- Meters (pledge / fund progress) ---- */
.meter-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 12.5px; }
.meter-row .ml { color: var(--ink-700); font-weight: 500; }
.meter-row .mv { color: var(--ink-500); font-variant-numeric: tabular-nums; }
.meter-row .\!mv { color: var(--ink-500) !important; font-variant-numeric: tabular-nums !important; }
/* ---- Insights RFM ---- */
.rfm-score { display: flex; align-items: baseline; gap: 8px; }
.rfm-score .big { font-family: var(--font-sans); font-weight: 700; font-size: 40px; color: var(--forest-700); letter-spacing: -.02em; }
.rfm-score .of { font-size: 14px; color: var(--ink-400); }
.rfm-bars { display: grid; gap: 12px; }
.rfm-bars .rb .rl { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.rfm-bars .rb .rl .lab { color: var(--ink-700); font-weight: 600; }
.rfm-bars .rb .rl .sc { color: var(--ink-400); }
.gauge { position: relative; width: 100%; height: 8px; background: var(--sage-100); border-radius: 999px; overflow: hidden; }
.gauge > i { display: block; height: 100%; border-radius: 999px; }
/* ---- Segmented toggle (Reports / Moves view switch) ---- */
.seg { display: inline-flex; background: var(--bg-tint); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { font-size: 12.5px; font-weight: 600; color: var(--ink-500); background: none; border: none; padding: 6px 13px; border-radius: 7px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.seg button:hover { color: var(--ink-900); }
.seg button.on { background: var(--surface); color: var(--forest-700); box-shadow: var(--shadow-xs); }
/* ---- Toggle rows (settings / operator services) ---- */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.toggle-row:last-child { border-bottom: none; }
.toggle-row .tr-t { font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.toggle-row .tr-d { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.setval { font-size: 13px; color: var(--ink-700); font-weight: 500; }
/* ---- Mono chips + tabular nums (audit log) ---- */
.codechip { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; background: var(--bg-tint); color: var(--forest-600); padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); }
.tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
/* ---- Alerts inbox ---- */
.alert-list { display: flex; flex-direction: column; }
.alert-row { display: flex; align-items: center; gap: 14px; padding: 15px 4px; border-bottom: 1px solid var(--border); transition: background var(--dur-fast); }
.alert-row:last-child { border-bottom: none; }
.alert-row:hover { background: var(--bg-tint); }
.alert-row.read { opacity: .55; }
.alert-sev { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 999px; }
.alert-mid { flex: 1; min-width: 0; }
.alert-mid .am-t { font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
.alert-mid .am-b { font-size: 12.5px; color: var(--ink-600); margin-top: 2px; }
.alert-when { font-size: 11.5px; color: var(--ink-400); font-weight: 600; white-space: nowrap; flex: none; }
/* ---- Standalone KPI icon tile (report/integration/nav cards) ---- */
.kpi-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--sage-100); color: var(--forest-600); display: grid; place-items: center; flex: none; }
/* ---- Branding (settings / operator branding) ---- */
.brand-mark-lg { width: 64px; height: 64px; border-radius: 16px; background: var(--forest-800); color: #F4F6EE; display: grid; place-items: center; font-family: var(--font-serif); font-size: 30px; font-weight: 500; flex: none; }
.color-field { display: flex; align-items: center; gap: 10px; }
.color-swatch { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-strong); flex: none; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 38px; height: 38px; border-radius: 10px; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border) inset; cursor: pointer; transition: transform var(--dur-fast); }
.swatch.on { border-color: var(--surface); box-shadow: 0 0 0 2px var(--forest-600); }
.brand-preview { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.brand-preview .bp-band { height: 56px; }
.brand-preview .bp-body { padding: 16px; }
.brand-preview .bp-t { font-family: var(--font-serif); font-size: 17px; font-weight: 500; color: var(--ink-900); }
.brand-preview .bp-s { font-size: 12.5px; color: var(--ink-500); margin-top: 3px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-4 {
  bottom: 1rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-4 {
  left: 1rem;
}
.right-0 {
  right: 0px;
}
.right-4 {
  right: 1rem;
}
.top-4 {
  top: 1rem;
}
.top-full {
  top: 100%;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.m-0 {
  margin: 0px;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-20 {
  height: 5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-8 {
  height: 2rem;
}
.h-\[13px\] {
  height: 13px;
}
.h-\[14px\] {
  height: 14px;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[350px\] {
  height: 350px;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-screen {
  height: 100vh;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-80 {
  max-height: 20rem;
}
.max-h-96 {
  max-height: 24rem;
}
.max-h-\[28rem\] {
  max-height: 28rem;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-\[240px\] {
  min-height: 240px;
}
.min-h-\[300px\] {
  min-height: 300px;
}
.min-h-\[400px\] {
  min-height: 400px;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-\[13px\] {
  width: 13px;
}
.w-\[14px\] {
  width: 14px;
}
.w-\[18px\] {
  width: 18px;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-full {
  min-width: 100%;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.origin-top-right {
  transform-origin: top right;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-full {
  --tw-translate-y: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-0 {
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {
  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-move {
  cursor: move;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-\[color\:var\(--border\)\] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border);
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 238 / var(--tw-divide-opacity, 1));
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(231 232 226 / var(--tw-divide-opacity, 1));
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 16px;
}
.rounded-md {
  border-radius: 12px;
}
.rounded-none {
  border-radius: 0px;
}
.rounded-xl {
  border-radius: 20px;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-\[color\:var\(--border\)\] {
  border-color: var(--border);
}
.border-\[color\:var\(--danger\)\] {
  border-color: var(--danger);
}
.border-\[color\:var\(--sage-200\)\] {
  border-color: var(--sage-200);
}
.border-\[color\:var\(--success\)\] {
  border-color: var(--success);
}
.border-\[color\:var\(--warning\)\] {
  border-color: var(--warning);
}
.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(200 214 192 / var(--tw-border-opacity, 1));
}
.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(61 126 82 / var(--tw-border-opacity, 1));
}
.border-danger-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 183 163 / var(--tw-border-opacity, 1));
}
.border-danger-500 {
  --tw-border-opacity: 1;
  border-color: rgb(176 70 46 / var(--tw-border-opacity, 1));
}
.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 238 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(231 232 226 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(213 216 206 / var(--tw-border-opacity, 1));
}
.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(58 69 54 / var(--tw-border-opacity, 1));
}
.border-gray-800 {
  --tw-border-opacity: 1;
  border-color: rgb(35 46 31 / var(--tw-border-opacity, 1));
}
.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.border-neutral-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
}
.border-neutral-300 {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 212 / var(--tw-border-opacity, 1));
}
.border-primary-200 {
  --tw-border-opacity: 1;
  border-color: rgb(200 214 192 / var(--tw-border-opacity, 1));
}
.border-primary-600 {
  --tw-border-opacity: 1;
  border-color: rgb(31 69 43 / var(--tw-border-opacity, 1));
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[color\:color-mix\(in_srgb\2c var\(--danger\)_10\%\2c var\(--surface\)\)\] {
  background-color: color-mix(in srgb,var(--danger) 10%,var(--surface));
}
.bg-\[color\:color-mix\(in_srgb\2c var\(--danger\)_13\%\2c var\(--surface\)\)\] {
  background-color: color-mix(in srgb,var(--danger) 13%,var(--surface));
}
.bg-\[color\:color-mix\(in_srgb\2c var\(--warning\)_15\%\2c var\(--surface\)\)\] {
  background-color: color-mix(in srgb,var(--warning) 15%,var(--surface));
}
.bg-\[color\:var\(--bg-tint\)\] {
  background-color: var(--bg-tint);
}
.bg-\[color\:var\(--sage-100\)\] {
  background-color: var(--sage-100);
}
.bg-\[color\:var\(--success-bg\)\] {
  background-color: var(--success-bg);
}
.bg-\[color\:var\(--surface\)\] {
  background-color: var(--surface);
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(221 230 215 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 242 231 / var(--tw-bg-opacity, 1));
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(78 154 99 / var(--tw-bg-opacity, 1));
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(61 126 82 / var(--tw-bg-opacity, 1));
}
.bg-danger-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 241 237 / var(--tw-bg-opacity, 1));
}
.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 238 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(231 232 226 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 250 247 / var(--tw-bg-opacity, 1));
}
.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(35 46 31 / var(--tw-bg-opacity, 1));
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(24 32 21 / var(--tw-bg-opacity, 1));
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-neutral-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}
.bg-neutral-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.bg-neutral-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}
.bg-primary-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(221 230 215 / var(--tw-bg-opacity, 1));
}
.bg-primary-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 242 231 / var(--tw-bg-opacity, 1));
}
.bg-primary-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 69 43 / var(--tw-bg-opacity, 1));
}
.bg-primary-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 42 24 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-\[url\(\"data\:image\/svg\+xml\;charset\=utf-8\2c \%3Csvg\%20xmlns\%3D\%27http\%3A\%2F\%2Fwww\.w3\.org\%2F2000\%2Fsvg\%27\%20viewBox\%3D\%270\%200\%2020\%2020\%27\%20fill\%3D\%27\%236b7280\%27\%3E\%3Cpath\%20fill-rule\%3D\%27evenodd\%27\%20d\%3D\%27M5\.23\%207\.21a\.75\.75\%200\%20011\.06\.02L10\%2011\.168l3\.71-3\.938a\.75\.75\%200\%20111\.08\%201\.04l-4\.25\%204\.5a\.75\.75\%200\%2001-1\.08\%200l-4\.25-4\.5a\.75\.75\%200\%2001\.02-1\.06z\%27\%20clip-rule\%3D\%27evenodd\%27\%2F\%3E\%3C\%2Fsvg\%3E\"\)\] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%20fill%3D%27%236b7280%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M5.23%207.21a.75.75%200%20011.06.02L10%2011.168l3.71-3.938a.75.75%200%20111.08%201.04l-4.25%204.5a.75.75%200%2001-1.08%200l-4.25-4.5a.75.75%200%2001.02-1.06z%27%20clip-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E");
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-blue-50 {
  --tw-gradient-from: #EAF2E7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 242 231 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-indigo-50 {
  --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
}
.bg-\[length\:1\.25rem_1\.25rem\] {
  background-size: 1.25rem 1.25rem;
}
.bg-\[right_0\.5rem_center\] {
  background-position: right 0.5rem center;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.fill-current {
  fill: currentColor;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-9 {
  padding-right: 2.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: var(--font-figtree), Figtree, ui-sans-serif, system-ui, sans-serif;
}
.font-serif {
  font-family: var(--font-newsreader), Newsreader, Georgia, Times New Roman, serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11\.5px\] {
  font-size: 11.5px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.italic {
  font-style: italic;
}
.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.text-\[\#123456\] {
  --tw-text-opacity: 1;
  color: rgb(18 52 86 / var(--tw-text-opacity, 1));
}
.text-\[\#7E8C6A\] {
  --tw-text-opacity: 1;
  color: rgb(126 140 106 / var(--tw-text-opacity, 1));
}
.text-\[color\:var\(--danger\)\] {
  color: var(--danger);
}
.text-\[color\:var\(--forest-600\)\] {
  color: var(--forest-600);
}
.text-\[color\:var\(--forest-700\)\] {
  color: var(--forest-700);
}
.text-\[color\:var\(--ink-400\)\] {
  color: var(--ink-400);
}
.text-\[color\:var\(--ink-500\)\] {
  color: var(--ink-500);
}
.text-\[color\:var\(--ink-600\)\] {
  color: var(--ink-600);
}
.text-\[color\:var\(--ink-700\)\] {
  color: var(--ink-700);
}
.text-\[color\:var\(--ink-900\)\] {
  color: var(--ink-900);
}
.text-\[color\:var\(--success\)\] {
  color: var(--success);
}
.text-\[color\:var\(--warning\)\] {
  color: var(--warning);
}
.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(78 154 99 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(61 126 82 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(46 99 64 / var(--tw-text-opacity, 1));
}
.text-danger-500 {
  --tw-text-opacity: 1;
  color: rgb(176 70 46 / var(--tw-text-opacity, 1));
}
.text-danger-600 {
  --tw-text-opacity: 1;
  color: rgb(156 62 41 / var(--tw-text-opacity, 1));
}
.text-danger-700 {
  --tw-text-opacity: 1;
  color: rgb(126 50 34 / var(--tw-text-opacity, 1));
}
.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(231 232 226 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(213 216 206 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(154 161 147 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(118 126 112 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(94 102 91 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(58 69 54 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(35 46 31 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(24 32 21 / var(--tw-text-opacity, 1));
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-neutral-500 {
  --tw-text-opacity: 1;
  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
}
.text-neutral-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
}
.text-neutral-700 {
  --tw-text-opacity: 1;
  color: rgb(64 64 64 / var(--tw-text-opacity, 1));
}
.text-neutral-800 {
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}
.text-neutral-900 {
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity, 1));
}
.text-primary-500 {
  --tw-text-opacity: 1;
  color: rgb(78 154 99 / var(--tw-text-opacity, 1));
}
.text-primary-600 {
  --tw-text-opacity: 1;
  color: rgb(31 69 43 / var(--tw-text-opacity, 1));
}
.text-primary-700 {
  --tw-text-opacity: 1;
  color: rgb(25 58 36 / var(--tw-text-opacity, 1));
}
.text-primary-800 {
  --tw-text-opacity: 1;
  color: rgb(20 51 30 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.overline {
  text-decoration-line: overline;
}
.line-through {
  text-decoration-line: line-through;
}
.decoration-dotted {
  text-decoration-style: dotted;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
  opacity: 0;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.shadow {
  --tw-shadow: 0 1px 3px rgba(31, 38, 25, 0.06), 0 1px 2px rgba(31, 38, 25, 0.04);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color), 0 1px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 12px 32px rgba(31, 38, 25, 0.10), 0 4px 10px rgba(31, 38, 25, 0.05);
  --tw-shadow-colored: 0 12px 32px var(--tw-shadow-color), 0 4px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 3px rgba(31, 38, 25, 0.06), 0 1px 2px rgba(31, 38, 25, 0.04);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color), 0 1px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 48px rgba(31, 38, 25, 0.12), 0 6px 14px rgba(31, 38, 25, 0.06);
  --tw-shadow-colored: 0 20px 48px var(--tw-shadow-color), 0 6px 14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-blue-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(78 154 99 / var(--tw-ring-opacity, 1));
}
.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Screen reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
/* Shimmer animation for skeleton loaders */
.animate-shimmer {
    background: linear-gradient(
      90deg,
      rgb(var(--color-bg-tertiary)) 0%,
      rgb(var(--color-bg-secondary)) 50%,
      rgb(var(--color-bg-tertiary)) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }
@keyframes shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
/* Touch action for mobile */
/* Safe area insets for notched devices */
/* Hide scrollbar but keep functionality */
/* Forest scrollbar for the deep-green sidebar navigation */
.scrollbar-dark {
    scrollbar-width: thin;
    scrollbar-color: #3D5A44 #102A18;
  }
.scrollbar-dark::-webkit-scrollbar {
    width: 8px;
  }
.scrollbar-dark::-webkit-scrollbar-track {
    background: #102A18;
  }
.scrollbar-dark::-webkit-scrollbar-thumb {
    background: #3D5A44;
    border-radius: 8px;
    border: 2px solid #102A18;
  }
.scrollbar-dark::-webkit-scrollbar-thumb:hover {
    background: #4E7A5C;
  }
/* TRUNCATE (Sylwia #16): replaces the inline ellipsis trio
     `style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}`.
     Wave 2 swaps the inline object for className="truncate-ellipsis".
     (Named -ellipsis so it never collides with Tailwind's own `.truncate`,
     which is functionally the same but this makes the migration explicit.) */
.truncate-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
/* SPACING HELPERS (Sylwia #21: magic margins). Bottom-margin steps mapped
     to the spacing scale so `style={{ marginBottom: 16 }}` -> className="mb-space-4".
     Only the recurring inline values are provided; reach for Tailwind's own
     spacing utilities for anything off-ladder. */
.mb-space-3 { margin-bottom: var(--space-3); }
.mb-space-5 { margin-bottom: var(--space-5); }
.mt-space-2 { margin-top: var(--space-2); }
.mt-space-3 { margin-top: var(--space-3); }
.mt-space-4 { margin-top: var(--space-4); }
/* MEASURE HELPERS (Sylwia #32: magic dims). Named max-widths so
     `style={{ maxWidth: 420 }}` -> className="measure-md". */

/* ==========================================================================
   Fern Console, faithful port of the design system's admin.css shell +
   data-dense components. Tokens below are the EXACT values from the design's
   colors_and_type.css; the component classes below are translated verbatim
   from admin.css (`:root[data-theme="dark"]` remapped to the app's `.dark`).
   These class names are namespaced and do not collide with Tailwind utilities.
   ========================================================================== */

:root {
  /* Tell the browser this is a light UI so native form controls (the option
     dropdown popup, checkboxes, scrollbars) paint light chrome. The .dark
     block below flips this to dark so those same native controls follow the
     theme instead of rendering a white option list on the dark canvas. */
  color-scheme: light;

  /* shell metrics */
  --side-w: 288px;
  --side-w-collapsed: 68px;
  --header-h: 60px;
  --admin-radius: 12px;

  /* fonts */
  --font-sans: var(--font-figtree), 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --font-serif: var(--font-newsreader), 'Newsreader', Georgia, 'Times New Roman', serif;
  --text-base: 14px;

  /* Brand palette (set at runtime by TenantThemeProvider from the tenant's
     saved theme; unset -> these fall back to Fern's forest defaults below).
     Chrome reads the --forest-* tokens, so anchoring the primary forest
     shades on --brand-* is what makes a tenant's saved colors actually
     paint the sidebar / primary buttons / active nav / brand mark. */
  --brand-primary: #3A4D2D;
  --brand-secondary: #1B2512;
  --brand-accent: #283425;

  /* forest greens - the two darkest shades (used by the sidebar, primary
     button and brand mark) and the active-nav shade now inherit the brand
     override when one is present, else keep the Fern defaults. */
  --forest-900: var(--brand-secondary, #1B2512);
  --forest-800: var(--brand-primary, #3A4D2D);
  --forest-700: var(--brand-accent, #283425);
  --forest-600: #5E7046;
  --forest-500: #6F8455;
  --forest-400: #93A471;
  --forest-300: #B8C49C;

  /* sage tints */
  --sage-100: #ECEFE4;
  --sage-200: #DDE3D2;
  --sage-300: #C6CFB6;

  /* warm neutrals */
  --bg: #FCFBF6;
  --bg-tint: #F3F4EC;
  --surface: #FFFFFF;
  --surface-2: #FBFAF3;
  --border: #E7E7DE;
  --border-strong: #D8D9CC;

  /* inks */
  --ink-900: #21271C;
  --ink-700: #444B3D;
  --ink-600: #545B49;
  --ink-500: #626856;
  --ink-400: #8C9180;
  --ink-300: #AEB3A3;

  /* semantic */
  --success: #4E7A45;
  --success-bg: #E5EFDD;
  --warning: #A8772E;
  --danger: #AC4A2E;
  --on-forest: #F3F6EC;

  /* radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* warm-tinted elevation */
  --shadow-xs: 0 1px 2px rgba(27, 33, 18, 0.05);
  --shadow-sm: 0 1px 3px rgba(27, 33, 18, 0.07), 0 1px 2px rgba(27, 33, 18, 0.05);
  --shadow-md: 0 4px 14px rgba(27, 33, 18, 0.08), 0 2px 6px rgba(27, 33, 18, 0.05);
  --shadow-lg: 0 12px 32px rgba(27, 33, 18, 0.13), 0 4px 10px rgba(27, 33, 18, 0.06);

  /* motion */
  --dur: 0.18s;
  --dur-fast: 0.12s;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ======================================================================
     STYLING FOUNDATION (Sylwia review #16/#21/#29/#31/#32).
     One home for the color literals, spacing steps and dimensions that
     were previously hardcoded inline across ~124 pages. Wave 2 migrates
     `style={{ color: '#21271C' }}` -> `style={{ color: 'var(--ink-strong)' }}`
     (or a Tailwind token / utility class), and `marginBottom: 52` ->
     `var(--space-8)` etc. Adding a token here changes the value in ONE place.

     COLOR TOKENS. The recurring inline hexes Sylwia cited, aliased onto the
     existing design-system tokens where an equivalent already exists (so
     there is no visual change - the alias resolves to the same value), plus
     the handful that had no named home.
       #FCFBF6 -> --bg (warm cream canvas; alias --canvas)
       #21271C -> --ink-900 / --ink-strong (dark ink; already tokenized)
       #DDECC9 -> --status-success-bg (sage success fill; already tokenized)
       #fff    -> --surface (white surface; alias --white)
       #3a2a12 -> --brown-strong (already tokenized)
     ---------------------------------------------------------------------- */
  --canvas: var(--bg);              /* #FCFBF6 warm cream page canvas */
  --white: #FFFFFF;                 /* #fff literal surface/knob */

  /* Recurring inline status + neutral hexes that had no named home. Values
     are the EXACT literals grepped from the inline styles, so tokenizing is a
     no-op visually. Grouped by role. */
  --ink-neutral-555: #555555;       /* #555 muted body text used inline */
  --ink-neutral-888: #888888;       /* #888 secondary label text */
  --ink-neutral-444: #444444;       /* #444 near-ink text */
  --hairline-ccc: #CCCCCC;          /* #ccc inline hairline border */
  --hairline-d6: #D6D6D6;           /* #d6d6d6 inline border */
  --hairline-e2: #E2E2E2;           /* #e2e2e2 inline border */
  --panel-f6: #F6F6F6;              /* #f6f6f6 recessed inline panel */
  --status-error-fg: #B42318;       /* #b42318 error text */
  --status-error-fg-alt: #B3261E;   /* #b3261e alt error text */
  --status-error-fg-strong: #C0392B;/* #c0392b strong error text */
  --status-success-fg-alt: #1A7F37; /* #1a7f37 success text */
  --status-warning-fg-alt: #E0A500; /* #e0a500 amber warning text */
  --surface-cream-f6e7cf: #F6E7CF;  /* #F6E7CF warm cream chip fill */
  --forest-ink-2f4025: #2F4025;     /* #2f4025 deep forest ink used inline */

  /* ======================================================================
     SPACING SCALE. A 4px base step so magic inline margins/paddings have a
     named equivalent. Wave 2 replaces `marginBottom: 52` etc. with a token.
     Covers the literals grepped inline (4/8/12/16/20/24/32/52).
       --space-1 = 4px    --space-5 = 20px
       --space-2 = 8px    --space-6 = 24px
       --space-3 = 12px   --space-7 = 32px
       --space-4 = 16px   --space-8 = 52px
     ---------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 52px;

  /* ======================================================================
     DIMENSION TOKENS. Named max-widths for the magic `maxWidth: 420` /
     `maxWidth: 560` inline literals Sylwia flagged (#32).
       --measure-xs = 320px   --measure-lg = 560px
       --measure-sm = 360px   --measure-xl = 720px
       --measure-md = 420px   --measure-content = 1100px
     ---------------------------------------------------------------------- */
  --measure-xs: 320px;
  --measure-sm: 360px;
  --measure-md: 420px;
  --measure-lg: 560px;
  --measure-xl: 720px;
  --measure-content: 1100px;
}

/* ---- Green-identity DARK MODE (class-based, matches app .dark) ---- */
.dark {
  /* Flip native control chrome to dark so the select option-list popup,
     scrollbars and checkboxes stop rendering light-on-dark. */
  color-scheme: dark;
  --bg:        #12180D;
  --bg-tint:   #1A2113;
  --surface:   #1B2413;
  --surface-2: #202A16;
  --border:    #2C3820;
  --border-strong: #3A4A2A;
  --ink-900:   #EEF1E5;
  --ink-700:   #CBD3BB;
  --ink-600:   #B4BDA2;
  --ink-500:   #9CA588;
  --ink-400:   #9BA585;
  --ink-300:   #889271;
  --sage-100:  #26311A;
  --sage-200:  #2E3B20;
  --sage-300:  #3A4A2A;
  --forest-800: #6F8455;
  --forest-700: #5E7046;
  --forest-600: #93A471;
  --forest-400: #B8C49C;
  --forest-300: #C6CFB6;
  --success-bg: #223019;
  --on-forest: #10180B;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
}


/* ==========================================================================
   STYLING FOUNDATION - global element styling (#18) + utilities (#16/#21).
   Kept in its OWN @layer blocks at the end so it does not fight the design
   system's component classes above or the Tailwind base reset.
   ========================================================================== */

.placeholder\:text-gray-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(154 161 147 / var(--tw-text-opacity, 1));
}

.placeholder\:text-gray-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(154 161 147 / var(--tw-text-opacity, 1));
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.hover\:border-gray-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(154 161 147 / var(--tw-border-opacity, 1));
}

.hover\:border-primary-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(168 201 154 / var(--tw-border-opacity, 1));
}

.hover\:bg-\[color\:var\(--bg-tint\)\]:hover {
  background-color: var(--bg-tint);
}

.hover\:bg-amber-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(221 230 215 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(46 99 64 / var(--tw-bg-opacity, 1));
}

.hover\:bg-danger-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 241 237 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 238 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(231 232 226 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(251 250 247 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(35 46 31 / var(--tw-bg-opacity, 1));
}

.hover\:bg-neutral-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.hover\:bg-neutral-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}

.hover\:bg-neutral-900:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(25 58 36 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.hover\:text-\[color\:var\(--forest-900\)\]:hover {
  color: var(--forest-900);
}

.hover\:text-\[color\:var\(--ink-700\)\]:hover {
  color: var(--ink-700);
}

.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(61 126 82 / var(--tw-text-opacity, 1));
}

.hover\:text-danger-600:hover {
  --tw-text-opacity: 1;
  color: rgb(156 62 41 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(94 102 91 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgb(58 69 54 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
  color: rgb(24 32 21 / var(--tw-text-opacity, 1));
}

.hover\:text-primary-700:hover {
  --tw-text-opacity: 1;
  color: rgb(25 58 36 / var(--tw-text-opacity, 1));
}

.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.hover\:text-red-800:hover {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:decoration-solid:hover {
  text-decoration-style: solid;
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.focus\:fixed:focus {
  position: fixed;
}

.focus\:left-4:focus {
  left: 1rem;
}

.focus\:top-4:focus {
  top: 1rem;
}

.focus\:z-50:focus {
  z-index: 50;
}

.focus\:z-\[100\]:focus {
  z-index: 100;
}

.focus\:rounded-md:focus {
  border-radius: 12px;
}

.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(78 154 99 / var(--tw-border-opacity, 1));
}

.focus\:bg-primary-600:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(31 69 43 / var(--tw-bg-opacity, 1));
}

.focus\:px-4:focus {
  padding-left: 1rem;
  padding-right: 1rem;
}

.focus\:py-2:focus {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.focus\:text-white:focus {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(78 154 99 / var(--tw-ring-opacity, 1));
}

.focus\:ring-primary-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(78 154 99 / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:outline:focus-visible {
  outline-style: solid;
}

.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}

.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}

.focus-visible\:outline-\[color\:var\(--forest-600\)\]:focus-visible {
  outline-color: var(--forest-600);
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-\[color\:var\(--forest-700\)\]:focus-visible {
  --tw-ring-color: var(--forest-700);
}

.focus-visible\:ring-amber-600:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(217 119 6 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-blue-500:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(78 154 99 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-danger-500:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(176 70 46 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-neutral-700:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(64 64 64 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-primary-500:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(78 154 99 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-primary-600:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(31 69 43 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-primary-700:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(25 58 36 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-red-500:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.active\:bg-gray-50:active {
  --tw-bg-opacity: 1;
  background-color: rgb(251 250 247 / var(--tw-bg-opacity, 1));
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-70:disabled {
  opacity: 0.7;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.dark\:divide-gray-700:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(58 69 54 / var(--tw-divide-opacity, 1));
}

.dark\:divide-gray-700\/50:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(58 69 54 / 0.5);
}

.dark\:border-blue-500:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(78 154 99 / var(--tw-border-opacity, 1));
}

.dark\:border-blue-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(36 80 47 / var(--tw-border-opacity, 1));
}

.dark\:border-danger-400:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(197 106 72 / var(--tw-border-opacity, 1));
}

.dark\:border-danger-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(101 41 29 / var(--tw-border-opacity, 1));
}

.dark\:border-emerald-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-600:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(94 102 91 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(58 69 54 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-700\/50:is(.dark *) {
  border-color: rgb(58 69 54 / 0.5);
}

.dark\:border-red-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}

.dark\:bg-amber-900\/20:is(.dark *) {
  background-color: rgb(120 53 15 / 0.2);
}

.dark\:bg-amber-900\/30:is(.dark *) {
  background-color: rgb(120 53 15 / 0.3);
}

.dark\:bg-blue-400:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(111 180 131 / var(--tw-bg-opacity, 1));
}

.dark\:bg-blue-500:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(78 154 99 / var(--tw-bg-opacity, 1));
}

.dark\:bg-blue-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(22 49 31 / var(--tw-bg-opacity, 1));
}

.dark\:bg-blue-900\/30:is(.dark *) {
  background-color: rgb(22 49 31 / 0.3);
}

.dark\:bg-danger-900\/20:is(.dark *) {
  background-color: rgb(78 33 24 / 0.2);
}

.dark\:bg-danger-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(44 18 12 / var(--tw-bg-opacity, 1));
}

.dark\:bg-emerald-900\/20:is(.dark *) {
  background-color: rgb(6 78 59 / 0.2);
}

.dark\:bg-emerald-900\/30:is(.dark *) {
  background-color: rgb(6 78 59 / 0.3);
}

.dark\:bg-gray-700:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(58 69 54 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(35 46 31 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-800\/50:is(.dark *) {
  background-color: rgb(35 46 31 / 0.5);
}

.dark\:bg-gray-800\/80:is(.dark *) {
  background-color: rgb(35 46 31 / 0.8);
}

.dark\:bg-gray-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(24 32 21 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-900\/80:is(.dark *) {
  background-color: rgb(24 32 21 / 0.8);
}

.dark\:bg-green-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1));
}

.dark\:bg-primary-500:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(78 154 99 / var(--tw-bg-opacity, 1));
}

.dark\:bg-primary-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(16 42 24 / var(--tw-bg-opacity, 1));
}

.dark\:bg-primary-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(11 30 17 / var(--tw-bg-opacity, 1));
}

.dark\:bg-red-900\/30:is(.dark *) {
  background-color: rgb(127 29 29 / 0.3);
}

.dark\:bg-yellow-900\/30:is(.dark *) {
  background-color: rgb(113 63 18 / 0.3);
}

.dark\:from-blue-900\/50:is(.dark *) {
  --tw-gradient-from: rgb(22 49 31 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(22 49 31 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:to-indigo-900\/50:is(.dark *) {
  --tw-gradient-to: rgb(49 46 129 / 0.5) var(--tw-gradient-to-position);
}

.dark\:text-amber-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(111 180 131 / var(--tw-text-opacity, 1));
}

.dark\:text-danger-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(197 106 72 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.dark\:text-emerald-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(243 244 238 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(231 232 226 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(213 216 206 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(154 161 147 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-500:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(118 126 112 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-600:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(94 102 91 / var(--tw-text-opacity, 1));
}

.dark\:text-green-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.dark\:text-primary-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(168 201 154 / var(--tw-text-opacity, 1));
}

.dark\:text-primary-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(124 180 137 / var(--tw-text-opacity, 1));
}

.dark\:text-red-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.dark\:text-red-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.dark\:text-white:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark\:text-yellow-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.dark\:ring-offset-gray-900:is(.dark *) {
  --tw-ring-offset-color: #182015;
}

.dark\:placeholder\:text-gray-500:is(.dark *)::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(118 126 112 / var(--tw-text-opacity, 1));
}

.dark\:placeholder\:text-gray-500:is(.dark *)::placeholder {
  --tw-text-opacity: 1;
  color: rgb(118 126 112 / var(--tw-text-opacity, 1));
}

.dark\:hover\:border-gray-500:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(118 126 112 / var(--tw-border-opacity, 1));
}

.dark\:hover\:bg-blue-800:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(36 80 47 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-danger-900\/20:hover:is(.dark *) {
  background-color: rgb(78 33 24 / 0.2);
}

.dark\:hover\:bg-gray-600:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(94 102 91 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-gray-700:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(58 69 54 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-gray-800:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(35 46 31 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-gray-800\/50:hover:is(.dark *) {
  background-color: rgb(35 46 31 / 0.5);
}

.dark\:hover\:bg-gray-900\/40:hover:is(.dark *) {
  background-color: rgb(24 32 21 / 0.4);
}

.dark\:hover\:bg-primary-400:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(124 180 137 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-red-900\/30:hover:is(.dark *) {
  background-color: rgb(127 29 29 / 0.3);
}

.dark\:hover\:text-danger-400:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(197 106 72 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-gray-100:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(243 244 238 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-gray-200:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(231 232 226 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-gray-300:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(213 216 206 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-primary-300:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(168 201 154 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-red-300:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-red-400:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.dark\:focus\:ring-offset-gray-900:focus:is(.dark *) {
  --tw-ring-offset-color: #182015;
}

.dark\:focus-visible\:ring-danger-400:focus-visible:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(197 106 72 / var(--tw-ring-opacity, 1));
}

.dark\:focus-visible\:ring-primary-400:focus-visible:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(124 180 137 / var(--tw-ring-opacity, 1));
}

.dark\:focus-visible\:ring-offset-gray-800:focus-visible:is(.dark *) {
  --tw-ring-offset-color: #232E1F;
}

.dark\:focus-visible\:ring-offset-gray-900:focus-visible:is(.dark *) {
  --tw-ring-offset-color: #182015;
}

.dark\:active\:bg-gray-700:active:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(58 69 54 / var(--tw-bg-opacity, 1));
}

@media (min-width: 640px) {
  .sm\:left-auto {
    left: auto;
  }
  .sm\:right-4 {
    right: 1rem;
  }
  .sm\:block {
    display: block;
  }
  .sm\:inline {
    display: inline;
  }
  .sm\:flex {
    display: flex;
  }
  .sm\:hidden {
    display: none;
  }
  .sm\:w-96 {
    width: 24rem;
  }
  .sm\:w-auto {
    width: auto;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:items-center {
    align-items: center;
  }
  .sm\:justify-center {
    justify-content: center;
  }
  .sm\:justify-between {
    justify-content: space-between;
  }
  .sm\:gap-4 {
    gap: 1rem;
  }
  .sm\:p-6 {
    padding: 1.5rem;
  }
  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .sm\:pb-14 {
    padding-bottom: 3.5rem;
  }
  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 768px) {
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .md\:block {
    display: block;
  }
  .md\:inline {
    display: inline;
  }
  .md\:hidden {
    display: none;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:p-8 {
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .lg\:flex {
    display: flex;
  }
  .lg\:hidden {
    display: none;
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}