/* =============================================================
   Unityzm Sovereign Trust — Design Tokens
   Built on shadcn/ui foundations, adapted for institutional /
   national-grade settlement infrastructure.
   ============================================================= */

/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("53343939-3280-4278-891e-6be28899ed53") 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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("15635176-1585-486b-9e4b-7ff1716f328a") 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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("023f979f-9238-4ba6-b467-2670b91a57d0") 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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("b4ea0c82-6956-452f-b822-0faa10937ced") 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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("138f2625-ccf2-4cb5-8b29-5e56022dbc37") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("4829610e-7d90-4a03-a2ff-94a60d58be19") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("22dac167-2ebc-4c02-a107-53576b9e9ea2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("1d1bcfd9-7c8b-40c0-9e2d-6720da21508b") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("89cb5698-c809-4376-96c4-15ea5a53feb2") 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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("3dc99262-e256-4403-b7fa-4cb61a555401") 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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("8fa5aeee-34fc-44dc-beab-94c7074c7b84") 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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("138f2625-ccf2-4cb5-8b29-5e56022dbc37") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("4829610e-7d90-4a03-a2ff-94a60d58be19") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("22dac167-2ebc-4c02-a107-53576b9e9ea2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("1d1bcfd9-7c8b-40c0-9e2d-6720da21508b") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("89cb5698-c809-4376-96c4-15ea5a53feb2") 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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("3dc99262-e256-4403-b7fa-4cb61a555401") 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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("8fa5aeee-34fc-44dc-beab-94c7074c7b84") 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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("138f2625-ccf2-4cb5-8b29-5e56022dbc37") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("4829610e-7d90-4a03-a2ff-94a60d58be19") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("22dac167-2ebc-4c02-a107-53576b9e9ea2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("1d1bcfd9-7c8b-40c0-9e2d-6720da21508b") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("89cb5698-c809-4376-96c4-15ea5a53feb2") 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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("3dc99262-e256-4403-b7fa-4cb61a555401") 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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("8fa5aeee-34fc-44dc-beab-94c7074c7b84") 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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("138f2625-ccf2-4cb5-8b29-5e56022dbc37") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("4829610e-7d90-4a03-a2ff-94a60d58be19") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("22dac167-2ebc-4c02-a107-53576b9e9ea2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("1d1bcfd9-7c8b-40c0-9e2d-6720da21508b") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("89cb5698-c809-4376-96c4-15ea5a53feb2") 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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("3dc99262-e256-4403-b7fa-4cb61a555401") 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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("8fa5aeee-34fc-44dc-beab-94c7074c7b84") 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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("0c3cb055-b94f-458d-9b18-9dbb62bbb78c") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("5afa77e1-0303-4a27-9497-a5a1347abbca") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c85b9f3d-044c-4bf3-a525-a553b73e4406") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("b142eb91-6662-49ca-892d-4daa556e6b1b") 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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("d56b45b2-c490-4d4e-b602-a384ff8cf339") 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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("ad690586-010e-4b01-a319-bf6c9cd292d1") 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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("0c3cb055-b94f-458d-9b18-9dbb62bbb78c") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("5afa77e1-0303-4a27-9497-a5a1347abbca") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("c85b9f3d-044c-4bf3-a525-a553b73e4406") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("b142eb91-6662-49ca-892d-4daa556e6b1b") 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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("d56b45b2-c490-4d4e-b602-a384ff8cf339") 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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("ad690586-010e-4b01-a319-bf6c9cd292d1") 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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("0c3cb055-b94f-458d-9b18-9dbb62bbb78c") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("5afa77e1-0303-4a27-9497-a5a1347abbca") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c85b9f3d-044c-4bf3-a525-a553b73e4406") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("b142eb91-6662-49ca-892d-4daa556e6b1b") 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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("d56b45b2-c490-4d4e-b602-a384ff8cf339") 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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ad690586-010e-4b01-a319-bf6c9cd292d1") 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;
}


:root {
  /* ----------------------------------------------------------
     COLOR — Neutral scale (zinc-based, our "ink")
     ---------------------------------------------------------- */
  --ink-0:   #ffffff;
  --ink-50:  #fafafa;
  --ink-100: #f4f4f5;
  --ink-150: #ececee;
  --ink-200: #e4e4e7;
  --ink-300: #d4d4d8;
  --ink-400: #a1a1aa;
  --ink-500: #71717a;
  --ink-600: #52525b;
  --ink-700: #3f3f46;
  --ink-800: #27272a;
  --ink-900: #18181b;
  --ink-950: #09090b;

  /* ----------------------------------------------------------
     COLOR — Sovereign accent (deep institutional blue)
     Reserved for primary actions, focus rings, key brand marks
     ---------------------------------------------------------- */
  --sov-50:  #eef3fb;
  --sov-100: #d6e1f3;
  --sov-200: #adc1e6;
  --sov-300: #7d99d3;
  --sov-400: #4f72bb;
  --sov-500: #3253a0;
  --sov-600: #243f82;
  --sov-700: #1d3268;
  --sov-800: #172551;
  --sov-900: #111a3a;

  /* ----------------------------------------------------------
     COLOR — Semantic (settlement lifecycle)
     ---------------------------------------------------------- */
  --emerald-50:  #ecfdf5;
  --emerald-200: #a7f3d0;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;

  --amber-50:  #fffbeb;
  --amber-200: #fde68a;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;

  --rose-50:   #fef2f2;
  --rose-200:  #fecaca;
  --rose-500:  #ef4444;
  --rose-600:  #dc2626;
  --rose-700:  #b91c1c;

  --sky-50:    #f0f9ff;
  --sky-200:   #bae6fd;
  --sky-500:   #0ea5e9;
  --sky-600:   #0284c7;

  /* ----------------------------------------------------------
     SEMANTIC TOKENS (shadcn naming convention)
     ---------------------------------------------------------- */
  --background:       var(--ink-0);
  --foreground:       var(--ink-950);

  --muted:            var(--ink-100);
  --muted-foreground: var(--ink-500);

  --card:             var(--ink-0);
  --card-foreground:  var(--ink-950);

  --popover:          var(--ink-0);
  --popover-foreground: var(--ink-950);

  --border:           var(--ink-200);
  --border-strong:    var(--ink-300);
  --input:            var(--ink-200);

  --primary:              var(--ink-900);
  --primary-foreground:   var(--ink-0);

  --secondary:            var(--ink-100);
  --secondary-foreground: var(--ink-900);

  --accent:               var(--sov-600);
  --accent-foreground:    var(--ink-0);

  --destructive:          var(--rose-600);
  --destructive-foreground: var(--ink-0);

  --success:              var(--emerald-600);
  --warning:              var(--amber-600);
  --info:                 var(--sky-600);

  --ring:                 var(--sov-500);

  /* Subtle stripe used for "ledger" / "merkle" surface accents */
  --ledger-stripe: repeating-linear-gradient(
    135deg,
    transparent 0 6px,
    rgba(15, 23, 42, .035) 6px 7px
  ); /* @kind color */

  /* ----------------------------------------------------------
     RADIUS — restrained, institutional
     ---------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius:    6px;     /* default */
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* ----------------------------------------------------------
     SHADOWS — flat by default, used sparingly
     ---------------------------------------------------------- */
  --shadow-xs: 0 1px 0 rgba(9, 9, 11, .04);
  --shadow-sm: 0 1px 2px rgba(9, 9, 11, .06), 0 1px 1px rgba(9, 9, 11, .04);
  --shadow:    0 2px 4px rgba(9, 9, 11, .06), 0 1px 2px rgba(9, 9, 11, .04);
  --shadow-md: 0 4px 12px rgba(9, 9, 11, .08), 0 2px 4px rgba(9, 9, 11, .04);
  --shadow-lg: 0 12px 32px rgba(9, 9, 11, .10), 0 4px 8px rgba(9, 9, 11, .04);
  --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--ring) 30%, transparent);

  /* ----------------------------------------------------------
     SPACING (4px base)
     ---------------------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ----------------------------------------------------------
     TYPOGRAPHY — base
     ---------------------------------------------------------- */
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:  'Instrument Serif', 'Iowan Old Style', Georgia, serif;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mark:   0.18em;   /* eyebrow / monogram */

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.55;
  --leading-loose: 1.7;

  /* ----------------------------------------------------------
     TYPE SCALE — semantic
     ---------------------------------------------------------- */
  --text-display:  48px / 1.05 var(--font-sans);
  --text-h1:       32px / 1.15 var(--font-sans);
  --text-h2:       24px / 1.2  var(--font-sans);
  --text-h3:       18px / 1.3  var(--font-sans);
  --text-h4:       15px / 1.35 var(--font-sans);
  --text-body:     14px / 1.55 var(--font-sans);
  --text-body-lg:  16px / 1.6  var(--font-sans);
  --text-small:    13px / 1.5  var(--font-sans);
  --text-xs:       12px / 1.4  var(--font-sans);
  --text-mono:     13px / 1.45 var(--font-mono);
  --text-mark:     11px / 1    var(--font-sans);  /* uppercase eyebrow */
}

/* =============================================================
   SEMANTIC ELEMENT STYLES (use as a layer or extract to classes)
   ============================================================= */

.ds-display {
  font: 600 var(--text-display);
  letter-spacing: var(--tracking-tight);
  color: var(--foreground);
}

.ds-h1 {
  font: 600 var(--text-h1);
  letter-spacing: var(--tracking-snug);
  color: var(--foreground);
}

.ds-h2 {
  font: 600 var(--text-h2);
  letter-spacing: var(--tracking-snug);
  color: var(--foreground);
}

.ds-h3 {
  font: 600 var(--text-h3);
  letter-spacing: var(--tracking-snug);
  color: var(--foreground);
}

.ds-h4 {
  font: 600 var(--text-h4);
  color: var(--foreground);
}

.ds-body {
  font: 400 var(--text-body);
  color: var(--foreground);
}

.ds-body-muted {
  font: 400 var(--text-body);
  color: var(--muted-foreground);
}

.ds-small {
  font: 400 var(--text-small);
  color: var(--muted-foreground);
}

.ds-mono {
  font: 500 var(--text-mono);
  color: var(--foreground);
}

.ds-mark {
  font: 600 var(--text-mark);
  letter-spacing: var(--tracking-mark);
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.ds-serif-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

/* =============================================================
   BASE
   ============================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 400 var(--text-body);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: color-mix(in oklab, var(--accent) 25%, transparent);
}


/* ===== designer block ===== */
/* =============================================================
   Unityzm — Focus Mode (/admin/focus · /portal/focus)
   Mission-control wall · Sovereign Trust system, dark-first.
   Per claude-design/FOCUS_MODE_AND_OPS_DESIGN_BRIEF.md Part 2.
   ============================================================= */

/* ---------- dark token remap (matches roadmap_admin) ---------- */
html[data-theme="dark"] {
  --ink-0: #09090b;  --ink-50: #111113; --ink-100: #1b1b1e; --ink-150: #202023;
  --ink-200: #27272a; --ink-300: #3f3f46; --ink-400: #71717a; --ink-500: #a1a1aa;
  --ink-600: #d4d4d8; --ink-700: #e4e4e7; --ink-800: #f4f4f5; --ink-900: #fafafa; --ink-950: #ffffff;
  --border: #232327; --border-strong: #3f3f46;
  --emerald-50: rgba(16,185,129,.12); --emerald-200: rgba(16,185,129,.35); --emerald-600: #34d399; --emerald-700: #6ee7b7;
  --amber-50: rgba(245,158,11,.12); --amber-200: rgba(245,158,11,.35); --amber-600: #fbbf24; --amber-700: #fbbf24;
  --rose-50: rgba(239,68,68,.12); --rose-200: rgba(239,68,68,.35); --rose-500: #fb7185; --rose-600: #fb7185; --rose-700: #fda4af;
  --sky-50: rgba(14,165,233,.12); --sky-200: rgba(14,165,233,.35); --sky-600: #38bdf8;
  --sov-50: rgba(79,114,187,.14); --sov-100: rgba(79,114,187,.22); --sov-200: rgba(79,114,187,.45); --sov-600: #4f72bb; --sov-700: #7d99d3;
  --violet-50: rgba(139,92,246,.13); --violet-200: rgba(139,92,246,.38); --violet-600: #a78bfa;
  --ledger-stripe: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.035) 6px 7px);
  --shadow-xs: 0 1px 0 rgba(0,0,0,.4); --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.4);
}

/* ---------- lane palette ---------- */
:root {
  --lane-agent:    var(--violet-600, #7c3aed);
  --lane-platform: var(--sky-600);
  --lane-ops:      var(--amber-600);
  --lane-finance:  var(--emerald-600);

  /* wall-scale knobs (bumped by [data-wall]) */
  --n-size: 24px;      /* kpi value */
  --lbl-size: 11.5px;  /* kpi label */
  --e-size: 13px;      /* stream event text */
  --t-size: 10.5px;    /* timestamps */
  --latest-size: 11px; /* corner latest line */
  --head-size: 10px;   /* corner eyebrow */
}
html[data-wall] {
  --n-size: 36px; --lbl-size: 13.5px; --e-size: 17px; --t-size: 12.5px;
  --latest-size: 13px; --head-size: 12px; --sq-v: 24px; --sq-t: 11px; --sq-s: 12px;
}
:root { --sq-v: 21px; --sq-t: 9.5px; --sq-s: 11px; }

html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--ink-0); color: var(--ink-900);
  font-family: var(--font-sans); font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* =============================================================
   STAGE — full-bleed canvas
   ============================================================= */
.stage {
  position: fixed; inset: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  padding: 0 36px 80px;
}
html[data-wall] .stage { padding-bottom: 40px; }
.stage::before { /* faint ledger stripe halo behind the centre */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--ledger-stripe);
  -webkit-mask-image: radial-gradient(58% 52% at 50% 46%, #000 0%, transparent 72%);
          mask-image: radial-gradient(58% 52% at 50% 46%, #000 0%, transparent 72%);
  opacity: .5;
}

/* ---------- hairline (top bar) ---------- */
.hairline {
  height: 54px; display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--border); position: relative; z-index: 5;
}
.hairline .lockup { display: inline-flex; align-items: center; gap: 10px; }
.hairline .lockup img { width: 20px; height: 20px; }
.hairline .lockup b { font: 600 13.5px/1 var(--font-sans); color: var(--ink-950); }
.hairline .modechip {
  font: 600 9.5px/1 var(--font-sans); letter-spacing: var(--tracking-mark); text-transform: uppercase;
  color: var(--sov-700); border: 1px solid var(--sov-200); background: var(--sov-50);
  border-radius: var(--radius-sm); padding: 4px 7px;
}
.hairline .route { font: 500 11.5px/1 var(--font-mono); color: var(--ink-500); padding-left: 14px; border-left: 1px solid var(--border-strong); }
.hairline .scopelbl { font: 500 11px/1 var(--font-sans); color: var(--ink-500); }
.hairline .scopelbl b { color: var(--ink-800); font-weight: 600; }
.hairline .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.livechip { display: inline-flex; align-items: center; gap: 7px; font: 600 10px/1 var(--font-sans); letter-spacing: var(--tracking-mark); text-transform: uppercase; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; color: var(--ink-600); }
.livechip .d { width: 7px; height: 7px; border-radius: 999px; background: var(--ink-400); }
body[data-state="live"] .livechip { color: var(--emerald-700); border-color: var(--emerald-200); }
body[data-state="live"] .livechip .d { background: var(--emerald-600); box-shadow: 0 0 0 3px color-mix(in oklab, var(--emerald-600) 22%, transparent); }
body[data-state="stale"] .livechip { color: var(--amber-700); border-color: var(--amber-200); }
body[data-state="stale"] .livechip .d { background: var(--amber-600); }
body[data-state="connecting"] .livechip { color: var(--sky-600); border-color: var(--sky-200); }
body[data-state="connecting"] .livechip .d { background: var(--sky-600); }
body[data-state="quiet"] .livechip { color: var(--emerald-700); border-color: var(--emerald-200); }
body[data-state="quiet"] .livechip .d { background: var(--emerald-600); }
@media (prefers-reduced-motion: no-preference) {
  body[data-state="live"] .livechip .d, body[data-state="connecting"] .livechip .d { animation: fpulse 2.2s ease-in-out infinite; }
  @keyframes fpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}

.hairline .lastev { font: 500 11px/1 var(--font-mono); color: var(--ink-500); white-space: nowrap; min-width: 150px; text-align: right; }
.hairline .lastev b { color: var(--ink-800); font-weight: 600; }
.hairline .clock { font: 600 13px/1 var(--font-mono); color: var(--ink-900); letter-spacing: .02em; white-space: nowrap; min-width: 70px; }
.exitbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: transparent;
  color: var(--ink-700); font: 600 12px/1 var(--font-sans); cursor: pointer; text-decoration: none;
  transition: background 120ms, border-color 120ms;
}
.exitbtn:hover { background: var(--ink-100); }
.exitbtn kbd { font: 600 9.5px/1 var(--font-mono); color: var(--ink-500); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); padding: 2px 4px; }
html[data-wall] .exitbtn { display: none; }

/* stale banner */
.stalebar {
  display: none; align-items: center; gap: 9px; justify-content: center;
  font: 500 11.5px/1 var(--font-sans); color: var(--amber-700);
  border-bottom: 1px solid var(--amber-200); background: var(--amber-50);
  padding: 7px 0; position: relative; z-index: 5;
}
.stalebar .mono { font-size: 10.5px; }
body[data-state="stale"] .stalebar { display: flex; }
body[data-state="stale"] .stage { grid-template-rows: auto auto minmax(0, 1fr); }

/* =============================================================
   FIELD — corners + centre stream
   ============================================================= */
.field {
  position: relative; z-index: 2; min-height: 0;
  --colL: minmax(280px, 360px); --colR: minmax(280px, 360px);
  display: grid; grid-template-columns: var(--colL) minmax(0, 1fr) var(--colR);
  gap: 40px; padding-top: 26px;
}
.field.lmin { --colL: 56px; }
.field.rmin { --colR: 56px; }
.fcol { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 0; position: relative; }

/* rail toggle handle (sits in the gap) */
.railtog {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 22px; height: 52px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--ink-50); color: var(--ink-400); cursor: pointer;
  font: 600 13px/1 var(--font-sans); padding: 0;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.railtog:hover { background: var(--ink-100); color: var(--ink-900); border-color: var(--border-strong); }
#togL { right: -31px; }
#togR { left: -31px; }

/* collapsed rail — mini status stack */
.fc-mini { display: none; flex-direction: column; align-items: center; gap: 9px; padding: 8px 0; }
.fc-mini .ld { width: 7px; height: 7px; border-radius: 999px; }
.fc[data-lane="agent"]    .fc-mini .ld { background: var(--lane-agent);    box-shadow: 0 0 0 3px var(--violet-50); }
.fc[data-lane="platform"] .fc-mini .ld { background: var(--lane-platform); box-shadow: 0 0 0 3px var(--sky-50); }
.fc[data-lane="ops"]      .fc-mini .ld { background: var(--lane-ops);      box-shadow: 0 0 0 3px var(--amber-50); }
.fc[data-lane="finance"]  .fc-mini .ld { background: var(--lane-finance);  box-shadow: 0 0 0 3px var(--emerald-50); }
.mspark { display: flex; align-items: flex-end; gap: 2px; height: 18px; width: 36px; }
.mspark i { flex: 1; min-width: 1px; border-radius: 1px; background: var(--ink-300); }
.fc[data-lane="agent"]    .mspark i:last-child { background: var(--lane-agent); }
.fc[data-lane="platform"] .mspark i:last-child { background: var(--lane-platform); }
.fc[data-lane="ops"]      .mspark i:last-child { background: var(--lane-ops); }
.fc[data-lane="finance"]  .mspark i:last-child { background: var(--lane-finance); }
.fc-mini .mv { font: 600 9.5px/1 var(--font-mono); color: var(--ink-700); max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-mini .mdot { width: 6px; height: 6px; border-radius: 999px; }
.fc-mini .mdot.ok   { background: var(--emerald-600); box-shadow: 0 0 0 3px var(--emerald-50); }
.fc-mini .mdot.warn { background: var(--amber-600);   box-shadow: 0 0 0 3px var(--amber-50); }
.fc-mini .mdot.bad  { background: var(--rose-500);    box-shadow: 0 0 0 3px var(--rose-50); }
.fcol.min .fc { display: flex; justify-content: center; }
.fcol.min .fc > *:not(.fc-mini) { display: none; }
.fcol.min .fc-mini { display: flex; }

/* ---------- corner cluster <.focus_corner> ---------- */
.fc { min-width: 0; }
.fc-h { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.fc-h .ld { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }
.fc[data-lane="agent"]    .ld { background: var(--lane-agent);    box-shadow: 0 0 0 3px var(--violet-50); }
.fc[data-lane="platform"] .ld { background: var(--lane-platform); box-shadow: 0 0 0 3px var(--sky-50); }
.fc[data-lane="ops"]      .ld { background: var(--lane-ops);      box-shadow: 0 0 0 3px var(--amber-50); }
.fc[data-lane="finance"]  .ld { background: var(--lane-finance);  box-shadow: 0 0 0 3px var(--emerald-50); }
.fc-h h2 { font: 600 var(--head-size)/1 var(--font-sans); letter-spacing: var(--tracking-mark); text-transform: uppercase; color: var(--ink-600); margin: 0; white-space: nowrap; }
.fc-h .sub { margin-left: auto; font: 500 calc(var(--head-size) - .5px)/1 var(--font-mono); color: var(--ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fc-kpis { display: flex; flex-direction: column; }
.k { display: flex; align-items: baseline; gap: 12px; padding: calc(9px + (var(--n-size) - 24px) * .25) 0; border-bottom: 1px solid var(--ink-100); }
.k:last-child { border-bottom: none; }
.k .lbl { flex: 1; min-width: 0; font: 500 var(--lbl-size)/1.3 var(--font-sans); color: var(--ink-500); }
.k b.v { font: 600 var(--n-size)/1 var(--font-mono); letter-spacing: -0.01em; color: var(--ink-950); white-space: nowrap; }
.k b.v small { font-size: calc(var(--n-size) * .55); font-weight: 600; color: var(--ink-500); margin-right: 2px; }
.k .delta { font: 600 calc(var(--lbl-size) - .5px)/1 var(--font-mono); white-space: nowrap; }
.k .delta.up { color: var(--emerald-700); }
.k .delta.down { color: var(--rose-600); }
.k .delta.flat { color: var(--ink-400); }
.k.warn b.v { color: var(--amber-700); }
.k.bad b.v { color: var(--rose-600); }
.k .schip { font: 600 calc(var(--head-size) - .5px)/1 var(--font-sans); letter-spacing: var(--tracking-mark); text-transform: uppercase; padding: 5px 8px; border-radius: var(--radius-sm); white-space: nowrap; }
.k .schip.ok   { background: var(--emerald-50); color: var(--emerald-700); border: 1px solid var(--emerald-200); }
.k .schip.warn { background: var(--amber-50); color: var(--amber-700); border: 1px solid var(--amber-200); }
.k .schip.idle { background: var(--ink-100); color: var(--ink-500); border: 1px solid var(--border); }
@media (prefers-reduced-motion: no-preference) {
  .k.bump b.v { animation: kbump .9s ease; }
  @keyframes kbump { 0% { color: var(--sov-700); } 100% { } }
}

/* autonomy / mix row */
.k .mix { flex: 1.6; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mixbar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--ink-100); }
.mixbar i { height: 100%; }
.mixbar i.m1 { background: var(--emerald-600); }
.mixbar i.m2 { background: var(--sky-600); }
.mixbar i.m3 { background: var(--violet-600, var(--sov-600)); }
.mixlbl { display: flex; gap: 12px; font: 500 calc(var(--t-size))/1 var(--font-mono); color: var(--ink-500); }
.mixlbl b { color: var(--ink-800); font-weight: 600; }

/* mini trend */
.fc-trend { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 12px; }
.fc-trend i { flex: 1; min-width: 2px; border-radius: 1px; background: var(--ink-200); }
.fc[data-lane="agent"]    .fc-trend i:last-child { background: var(--lane-agent); }
.fc[data-lane="platform"] .fc-trend i:last-child { background: var(--lane-platform); }
.fc[data-lane="ops"]      .fc-trend i:last-child { background: var(--lane-ops); }
.fc[data-lane="finance"]  .fc-trend i:last-child { background: var(--lane-finance); }

/* latest line */
.fc-latest { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; min-width: 0; }
.fc-latest .t { font: 500 var(--t-size)/1 var(--font-mono); color: var(--ink-400); flex-shrink: 0; }
.fc-latest p { flex: 1; min-width: 0; margin: 0; font: 400 var(--latest-size)/1.45 var(--font-sans); color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =============================================================
   CENTRE STREAM <.focus_stream>
   ============================================================= */
.centre { display: flex; flex-direction: column; min-height: 0; max-width: 640px; width: 100%; justify-self: center; }
body[data-ops="on"] .centre { max-width: 820px; }

/* ---------- ops board (squares) — shown when both rails are tucked ---------- */
.opsgrid { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding-bottom: 18px; }
body[data-ops="on"] .opsgrid { display: grid; }
.sq {
  aspect-ratio: 1.18 / 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  text-align: left; padding: 13px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--ink-50); color: inherit; font-family: inherit;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.sq:hover { background: var(--ink-100); border-color: var(--border-strong); }
.sq:active { transform: scale(.985); }
.sq .sq-h { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sq .sq-h .ld { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.sq[data-lane="agent"]    .sq-h .ld { background: var(--lane-agent); }
.sq[data-lane="platform"] .sq-h .ld { background: var(--lane-platform); }
.sq[data-lane="ops"]      .sq-h .ld { background: var(--lane-ops); }
.sq[data-lane="finance"]  .sq-h .ld { background: var(--lane-finance); }
.sq .sq-h span:last-child { font: 600 var(--sq-t)/1.25 var(--font-sans); letter-spacing: var(--tracking-mark); text-transform: uppercase; color: var(--ink-500); }
.sq b.v { font: 600 var(--sq-v)/1 var(--font-mono); letter-spacing: -0.01em; color: var(--ink-950); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sq b.v small { font-size: calc(var(--sq-v) * .55); font-weight: 600; color: var(--ink-500); margin-right: 2px; }
.sq.warn b.v { color: var(--amber-700); }
.sq.bad b.v { color: var(--rose-600); }
.sq .sub { font: 400 var(--sq-s)/1.35 var(--font-sans); color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
body[data-state="connecting"] .sq b.v { visibility: visible; }
.chips { display: flex; align-items: center; gap: 7px; justify-content: center; padding-bottom: 14px; }
.chips .c-lbl { font: 600 9px/1 var(--font-sans); letter-spacing: var(--tracking-mark); text-transform: uppercase; color: var(--ink-400); margin-right: 4px; }
.lanechip {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--border); background: transparent;
  font: 600 11px/1 var(--font-sans); color: var(--ink-500); cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms, opacity 120ms;
}
.lanechip .ld { width: 6px; height: 6px; border-radius: 999px; }
.lanechip[data-lane="agent"] .ld { background: var(--lane-agent); }
.lanechip[data-lane="platform"] .ld { background: var(--lane-platform); }
.lanechip[data-lane="ops"] .ld { background: var(--lane-ops); }
.lanechip[data-lane="finance"] .ld { background: var(--lane-finance); }
.lanechip.on { background: var(--ink-100); color: var(--ink-900); border-color: var(--border-strong); }
.lanechip:not(.on) { opacity: .5; }
.lanechip:hover { opacity: 1; }

.stream { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.stream::after { /* bottom fade */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--ink-0));
}
.evlist { display: flex; flex-direction: column; }

.ev { display: grid; grid-template-columns: 3px auto auto 1fr; gap: 12px; align-items: baseline; padding: calc(10px + (var(--e-size) - 13px) * .6) 4px; border-bottom: 1px solid var(--ink-100); }
.ev .tick { align-self: stretch; border-radius: 2px; background: var(--ink-200); }
.ev[data-lane="agent"] .tick { background: var(--lane-agent); }
.ev[data-lane="platform"] .tick { background: var(--lane-platform); }
.ev[data-lane="ops"] .tick { background: var(--lane-ops); }
.ev[data-lane="finance"] .tick { background: var(--lane-finance); }
.ev .t { font: 500 var(--t-size)/1 var(--font-mono); color: var(--ink-400); }
.ev .ln { font: 600 calc(var(--t-size) - 1px)/1 var(--font-mono); letter-spacing: .1em; width: calc(var(--t-size) * 5.4); }
.ev[data-lane="agent"] .ln { color: var(--lane-agent); }
.ev[data-lane="platform"] .ln { color: var(--lane-platform); }
.ev[data-lane="ops"] .ln { color: var(--lane-ops); }
.ev[data-lane="finance"] .ln { color: var(--lane-finance); }
.ev p { margin: 0; font: 400 var(--e-size)/1.5 var(--font-sans); color: var(--ink-700); min-width: 0; }
.ev p b { font-weight: 600; color: var(--ink-950); }
.ev p .mono { font-size: calc(var(--e-size) - 1.5px); color: var(--ink-500); }
@media (prefers-reduced-motion: no-preference) {
  .ev.arrive { animation: evin 360ms cubic-bezier(.2,.7,.3,1); }
  @keyframes evin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}
.ev.hidden-lane { display: none; }

/* quiescent state */
.quiet { display: none; flex-direction: column; align-items: center; gap: 12px; padding: 96px 0; text-align: center; }
.quiet .qd { width: 8px; height: 8px; border-radius: 999px; background: var(--emerald-600); box-shadow: 0 0 0 4px var(--emerald-50); margin-bottom: 10px; }
.quiet h3 { font: 400 calc(var(--e-size) * 2.1)/1.2 var(--font-serif); letter-spacing: -0.01em; color: var(--ink-800); margin: 0; white-space: nowrap; }
.quiet h3 i { font-style: italic; color: var(--sov-700); }
.quiet p { font: 400 calc(var(--e-size) - .5px)/1.5 var(--font-sans); color: var(--ink-500); margin: 0; }
body[data-state="quiet"] .quiet { display: flex; }
body[data-state="quiet"] .evlist { display: none; }

/* connecting skeletons */
.sk { position: relative; overflow: hidden; background: var(--ink-100); border-radius: var(--radius-sm); color: transparent !important; }
.sk * { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
    animation: shimmer 1.4s infinite; }
  @keyframes shimmer { to { transform: translateX(100%); } }
}

/* =============================================================
   PROTOTYPE CONTROLS (design-review only — not product chrome)
   ============================================================= */
.proto {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 80;
  display: flex; align-items: center; gap: 12px;
  background: color-mix(in oklab, var(--ink-50) 92%, transparent);
  backdrop-filter: blur(10px); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 7px 9px 7px 16px; box-shadow: var(--shadow-lg);
  transition: opacity 220ms, transform 220ms;
}
.proto .p-lbl { font: 600 8.5px/1 var(--font-sans); letter-spacing: var(--tracking-mark); text-transform: uppercase; color: var(--ink-400); }
.proto .seg { display: flex; gap: 2px; background: var(--ink-100); border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.proto .seg button {
  height: 26px; padding: 0 11px; border: none; border-radius: 999px; background: transparent;
  font: 600 11px/1 var(--font-sans); color: var(--ink-500); cursor: pointer; white-space: nowrap;
  transition: background 120ms, color 120ms;
}
.proto .seg button:hover { color: var(--ink-900); }
.proto .seg button.on { background: var(--ink-950); color: var(--ink-0); }
.proto .wallbtn {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: transparent;
  font: 600 11px/1 var(--font-sans); color: var(--ink-700); cursor: pointer;
  transition: background 120ms;
}
.proto .wallbtn:hover { background: var(--ink-100); }
.proto .wallbtn.on { background: var(--sov-600); border-color: var(--sov-600); color: #fff; }
html[data-wall] .proto.tucked { opacity: 0; transform: translateX(-50%) translateY(60px); pointer-events: none; }

@media (max-width: 1100px) {
  .field { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(240px, 300px); gap: 24px; }
  .hairline .scopelbl { display: none; }
}


/* ===== designer block ===== */

  /* ---- auth page (uses dark token remap from focus-mode.css) ---- */
  body.auth { display: grid; place-items: center; min-height: 100vh; position: relative; }
  body.auth::before {
    content: ""; position: fixed; inset: 0; pointer-events: none;
    background-image: var(--ledger-stripe);
    -webkit-mask-image: radial-gradient(50% 60% at 50% 42%, #000 0%, transparent 70%);
            mask-image: radial-gradient(50% 60% at 50% 42%, #000 0%, transparent 70%);
    opacity: .5;
  }

  .acard { position: relative; z-index: 2; width: 372px; display: flex; flex-direction: column; }
  .acard .lockup { display: flex; align-items: center; gap: 10px; margin-bottom: 34px; }
  .acard .lockup img { width: 22px; height: 22px; }
  .acard .lockup b { font: 600 14px/1 var(--font-sans); color: var(--ink-950); }
  .acard .lockup .modechip { margin-left: auto; font: 600 9.5px/1 var(--font-sans); letter-spacing: var(--tracking-mark); text-transform: uppercase; color: var(--sov-700); border: 1px solid var(--sov-200); background: var(--sov-50); border-radius: var(--radius-sm); padding: 4px 7px; }

  .acard .eyebrow { font: 600 10px/1 var(--font-sans); letter-spacing: var(--tracking-mark); text-transform: uppercase; color: var(--ink-500); margin: 0 0 10px; }
  .acard h1 { font: 400 34px/1.15 var(--font-serif); letter-spacing: -0.015em; color: var(--ink-900); margin: 0 0 6px; }
  .acard h1 i { font-style: italic; color: var(--sov-700); }
  .acard .lede { font: 400 13px/1.55 var(--font-sans); color: var(--ink-500); margin: 0 0 28px; }
  .acard .lede b { color: var(--ink-800); font-weight: 600; }

  form { display: flex; flex-direction: column; gap: 16px; }
  .frow { display: flex; flex-direction: column; gap: 7px; }
  .frow .lblrow { display: flex; align-items: baseline; justify-content: space-between; }
  .frow label { font: 600 11px/1 var(--font-sans); color: var(--ink-600); }
  .frow .aux { font: 500 11px/1 var(--font-sans); color: var(--sov-700); text-decoration: none; }
  .frow .aux:hover { text-decoration: underline; }
  .frow input[type="text"], .frow input[type="password"] {
    height: 40px; padding: 0 12px; border-radius: var(--radius);
    border: 1px solid var(--border-strong); background: var(--ink-50);
    color: var(--ink-900); font: 400 13.5px/1 var(--font-sans);
    transition: border-color 120ms, box-shadow 120ms; outline: none; width: 100%; box-sizing: border-box;
  }
  .frow input::placeholder { color: var(--ink-400); }
  .frow input:focus { border-color: var(--sov-600); box-shadow: 0 0 0 3px var(--sov-50); }

  .pinrow { display: flex; gap: 8px; }
  .pinrow input {
    flex: 1; min-width: 0; height: 50px; text-align: center;
    border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--ink-50);
    color: var(--ink-950); font: 600 20px/1 var(--font-mono); outline: none;
    transition: border-color 120ms, box-shadow 120ms;
  }
  .pinrow input:focus { border-color: var(--sov-600); box-shadow: 0 0 0 3px var(--sov-50); }
  .pinhint { font: 400 11.5px/1.5 var(--font-sans); color: var(--ink-500); margin: 0; }
  .pinhint b { color: var(--ink-800); font-weight: 600; }

  .signin {
    height: 42px; border: none; border-radius: var(--radius); cursor: pointer;
    background: var(--sov-600); color: #fff; font: 600 13px/1 var(--font-sans);
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    transition: filter 120ms, transform 120ms; margin-top: 4px;
  }
  .signin:hover { filter: brightness(1.12); }
  .signin:active { transform: scale(.99); }
  .signin[disabled] { opacity: .55; cursor: default; filter: none; }
  .signin .spin { width: 13px; height: 13px; border-radius: 999px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; display: none; }
  .signin.busy .spin { display: inline-block; }
  @media (prefers-reduced-motion: no-preference) { .signin.busy .spin { animation: aspin .7s linear infinite; } @keyframes aspin { to { transform: rotate(360deg); } } }

  .divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; }
  .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  .divider span { font: 600 9.5px/1 var(--font-sans); letter-spacing: var(--tracking-mark); text-transform: uppercase; color: var(--ink-400); }

  .altbtn {
    height: 40px; border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: transparent; color: var(--ink-700); font: 600 12.5px/1 var(--font-sans);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: background 120ms;
  }
  .altbtn:hover { background: var(--ink-100); }
  .altbtn .ic { font: 600 11px/1 var(--font-mono); color: var(--ink-500); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); padding: 3px 5px; letter-spacing: .12em; }

  .modeswap { display: none; }
  body[data-auth="password"] .modeswap.pw { display: flex; }
  body[data-auth="pin"] .modeswap.pin { display: flex; }

  .afoot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; height: 52px; display: flex; align-items: center; justify-content: center; gap: 14px; border-top: 1px solid var(--border); }
  .afoot .route { font: 500 11px/1 var(--font-mono); color: var(--ink-500); }
  .afoot .sep { width: 3px; height: 3px; border-radius: 999px; background: var(--ink-300); }
  .afoot p { margin: 0; font: 400 11px/1 var(--font-sans); color: var(--ink-400); }

  .err { display: none; font: 500 11.5px/1.45 var(--font-sans); color: var(--rose-600); margin: 0; }
  body[data-err="on"] .err { display: block; }
  @media (prefers-reduced-motion: no-preference) {
    body[data-err="on"] .acard form { animation: ashake 280ms ease; }
    @keyframes ashake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
  }


/* ── Quick-access method tabs + pattern/passkey (functional port additions) ── */
.methodtabs { display:flex; gap:6px; margin: 14px 0 16px; flex-wrap:wrap; }
.methodtab {
  flex:1 1 auto; min-width:72px; cursor:pointer;
  border:1px solid var(--border-strong, #e4e4e7); border-radius:999px;
  background:transparent; color:var(--ink-600,#52525b);
  font: 600 12px/1 'Inter', sans-serif; padding:8px 10px; transition:.15s;
}
.methodtab[aria-selected="true"] {
  background:var(--sov-600,#243f82); border-color:var(--sov-600,#243f82); color:#fff;
}
.patternwrap { display:flex; justify-content:center; padding:6px 0 2px; }
#patternGrid { display:grid; grid-template-columns:repeat(3, 56px); gap:18px; touch-action:none; }
.pdot {
  width:56px; height:56px; border-radius:999px; display:grid; place-items:center;
  border:1px solid var(--border-strong,#e4e4e7); background:var(--ink-50,#fafafa);
}
.pdot::after { content:""; width:14px; height:14px; border-radius:999px; background:var(--ink-300,#d4d4d8); transition:.12s; }
.pdot.on { border-color:var(--sov-500,#3253a0); }
.pdot.on::after { background:var(--sov-600,#243f82); transform:scale(1.25); }
.passkeyblock { text-align:center; padding:8px 0; }
.passkeyglyph { font-size:34px; line-height:1; }
.passkeyblock p { color:var(--ink-500,#71717a); font:500 13px/1.5 'Inter',sans-serif; margin:8px 0 14px; }
.err.show { color:var(--amber-700,#b45309); }
.demowrap { margin-top:18px; padding-top:16px; border-top:1px solid var(--border-strong,#e4e4e7); text-align:center; }
.demobtn {
  display:inline-block; border:1px solid var(--border-strong,#e4e4e7); border-radius:999px;
  padding:9px 16px; font:600 13px/1 'Inter',sans-serif; color:var(--ink-700,#3f3f46); text-decoration:none;
}
.demobtn:hover { background:var(--ink-100,#f4f4f5); }
.createrow { text-align:center; margin-top:14px; font:500 13px/1 'Inter',sans-serif; color:var(--ink-500,#71717a); }
.createrow a { color:var(--sov-600,#243f82); font-weight:600; text-decoration:none; }

/* Self-contained full-screen overlay so the auth screen centers + uses the
   cream theme regardless of the host app layout (which is dark + nested). */
.authscreen {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 28px; overflow: auto;
  background: #faf9f5; color: var(--ink-900, #18181b);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.authscreen .afoot { position: static; }

/* ── Isolate the overlay from the host app's same-named theme vars (--ink-*,
   --foreground, --input, …) which bleed in at body scope and break colours.
   Re-assert the designer LIGHT palette on .authscreen so it is authoritative. ── */
.authscreen {
  --ink-0:#ffffff; --ink-50:#fafafa; --ink-100:#f4f4f5; --ink-150:#ececee;
  --ink-200:#e4e4e7; --ink-300:#d4d4d8; --ink-400:#a1a1aa; --ink-500:#71717a;
  --ink-600:#52525b; --ink-700:#3f3f46; --ink-800:#27272a; --ink-900:#18181b; --ink-950:#09090b;
  --background:#ffffff; --foreground:#18181b; --card:#ffffff; --card-foreground:#18181b;
  --popover:#ffffff; --popover-foreground:#18181b; --muted:#f4f4f5; --muted-foreground:#71717a;
  --border:#e4e4e7; --border-strong:#d4d4d8; --input:#e4e4e7; --ring:#eef3fb;
  color:#18181b;
}
.authscreen .acard { background:#ffffff; }
.authscreen h1 { color:#18181b; }
.authscreen input { background:#ffffff !important; color:#18181b !important; border:1px solid #d4d4d8 !important; }
.authscreen input::placeholder { color:#a1a1aa !important; }

/* ════ Theme toggle (default dark) ════════════════════════════════════════════
   data-theme on .authscreen drives both modes. The --ink scale is INVERTED for
   dark so every designer rule (color:var(--ink-900), bg:var(--ink-0), …) themes
   automatically. These [data-theme=…] selectors outrank the earlier .authscreen
   overrides, so they win. */
.authscreen[data-theme="dark"] {
  --ink-0:#18181b; --ink-50:#1f1f23; --ink-100:#232327; --ink-150:#27272a;
  --ink-200:#3f3f46; --ink-300:#52525b; --ink-400:#71717a; --ink-500:#a1a1aa;
  --ink-600:#d4d4d8; --ink-700:#e4e4e7; --ink-800:#f4f4f5; --ink-900:#fafafa; --ink-950:#ffffff;
  --background:#0b0b0d; --foreground:#fafafa; --card:#18181b; --card-foreground:#fafafa;
  --popover:#18181b; --popover-foreground:#fafafa; --muted:#232327; --muted-foreground:#a1a1aa;
  --border:#27272a; --border-strong:#3f3f46; --input:#27272a; --ring:#1d3268;
  background:#0b0b0d; color:#fafafa;
}
.authscreen[data-theme="dark"] .acard { background:#18181b; border-color:#27272a; }
.authscreen[data-theme="dark"] h1 { color:#fafafa; }
.authscreen[data-theme="dark"] input { background:#0b0b0d !important; color:#fafafa !important; border:1px solid #3f3f46 !important; }
.authscreen[data-theme="dark"] input::placeholder { color:#71717a !important; }

.authscreen[data-theme="light"] {
  --ink-0:#ffffff; --ink-50:#fafafa; --ink-100:#f4f4f5; --ink-150:#ececee;
  --ink-200:#e4e4e7; --ink-300:#d4d4d8; --ink-400:#a1a1aa; --ink-500:#71717a;
  --ink-600:#52525b; --ink-700:#3f3f46; --ink-800:#27272a; --ink-900:#18181b; --ink-950:#09090b;
  --background:#ffffff; --foreground:#18181b; --card:#ffffff; --card-foreground:#18181b;
  --popover:#ffffff; --popover-foreground:#18181b; --muted:#f4f4f5; --muted-foreground:#71717a;
  --border:#e4e4e7; --border-strong:#d4d4d8; --input:#e4e4e7; --ring:#eef3fb;
  background:#faf9f5; color:#18181b;
}
.authscreen[data-theme="light"] .acard { background:#ffffff; }
.authscreen[data-theme="light"] h1 { color:#18181b; }
.authscreen[data-theme="light"] input { background:#ffffff !important; color:#18181b !important; border:1px solid #d4d4d8 !important; }
.authscreen[data-theme="light"] input::placeholder { color:#a1a1aa !important; }

.themetoggle {
  position:fixed; top:16px; right:16px; z-index:60;
  width:40px; height:40px; border-radius:999px; cursor:pointer; line-height:1;
  display:grid; place-items:center; font-size:17px;
  border:1px solid var(--border-strong); background:var(--card); color:var(--foreground);
}
.themetoggle:hover { background:var(--muted); }

/* ════ Platform-aligned theme: html[data-theme] (set pre-paint + by the shared
   ThemeToggle hook) drives the auth screen. Default DARK; light when the
   platform theme is light. These outrank earlier .authscreen theme rules. ════ */
.authscreen,
html[data-theme="dark"] .authscreen {
  --ink-0:#18181b; --ink-50:#1f1f23; --ink-100:#232327; --ink-150:#27272a;
  --ink-200:#3f3f46; --ink-300:#52525b; --ink-400:#71717a; --ink-500:#a1a1aa;
  --ink-600:#d4d4d8; --ink-700:#e4e4e7; --ink-800:#f4f4f5; --ink-900:#fafafa; --ink-950:#ffffff;
  --background:#0b0b0d; --foreground:#fafafa; --card:#18181b; --card-foreground:#fafafa;
  --popover:#18181b; --popover-foreground:#fafafa; --muted:#232327; --muted-foreground:#a1a1aa;
  --border:#27272a; --border-strong:#3f3f46; --input:#27272a; --ring:#1d3268;
  background:#0b0b0d; color:#fafafa;
}
.authscreen .acard,
html[data-theme="dark"] .authscreen .acard { background:#18181b; border-color:#27272a; }
.authscreen input,
html[data-theme="dark"] .authscreen input { background:#0b0b0d !important; color:#fafafa !important; border:1px solid #3f3f46 !important; }
.authscreen input::placeholder { color:#71717a !important; }

html[data-theme="light"] .authscreen {
  --ink-0:#ffffff; --ink-50:#fafafa; --ink-100:#f4f4f5; --ink-150:#ececee;
  --ink-200:#e4e4e7; --ink-300:#d4d4d8; --ink-400:#a1a1aa; --ink-500:#71717a;
  --ink-600:#52525b; --ink-700:#3f3f46; --ink-800:#27272a; --ink-900:#18181b; --ink-950:#09090b;
  --background:#ffffff; --foreground:#18181b; --card:#ffffff; --card-foreground:#18181b;
  --popover:#ffffff; --popover-foreground:#18181b; --muted:#f4f4f5; --muted-foreground:#71717a;
  --border:#e4e4e7; --border-strong:#d4d4d8; --input:#e4e4e7; --ring:#eef3fb;
  background:#faf9f5; color:#18181b;
}
html[data-theme="light"] .authscreen .acard { background:#ffffff; }
html[data-theme="light"] .authscreen input { background:#ffffff !important; color:#18181b !important; border:1px solid #d4d4d8 !important; }
html[data-theme="light"] .authscreen input::placeholder { color:#a1a1aa !important; }

/* Position the shared theme-toggle component on the auth screen */
.themetoggle-wrap { position:fixed; top:16px; right:16px; z-index:60; }

/* ════ FINAL: match the standalone demo exactly ═══════════════════════════════
   - transparent card (designer .acard has no box; content sits on the page bg)
   - dark page bg with the ledger-stripe hatch + radial vignette (the demo look)
   - theme-aware h1 (fixes the invisible "Welcome" on dark)
   These are last in source order so they win. */
.authscreen,
html[data-theme="dark"] .authscreen {
  background-color: #0a0a0b;
  background-image:
    radial-gradient(58% 52% at 50% 46%, rgba(0,0,0,.55) 0%, transparent 72%),
    repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.035) 6px 7px);
}
.authscreen .acard,
html[data-theme="dark"] .authscreen .acard,
html[data-theme="light"] .authscreen .acard {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.authscreen h1,
html[data-theme="dark"] .authscreen h1 { color: #fafafa !important; }
html[data-theme="light"] .authscreen h1 { color: #18181b !important; }

html[data-theme="light"] .authscreen {
  background-color: #faf9f5;
  background-image:
    radial-gradient(58% 52% at 50% 46%, rgba(0,0,0,.05) 0%, transparent 72%),
    repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.025) 6px 7px);
}