/* ibm-plex-sans-cyrillic-ext-400-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/ibm-plex-sans-cyrillic-ext-400-normal-g30qAdWV.woff2) format('woff2'), url(/assets/ibm-plex-sans-cyrillic-ext-400-normal-Dsrv2Tcn.woff) format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* ibm-plex-sans-cyrillic-400-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/ibm-plex-sans-cyrillic-400-normal-DZqxrq2p.woff2) format('woff2'), url(/assets/ibm-plex-sans-cyrillic-400-normal-BTotfTJu.woff) format('woff'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* ibm-plex-sans-greek-400-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/ibm-plex-sans-greek-400-normal-_efipK4i.woff2) format('woff2'), url(/assets/ibm-plex-sans-greek-400-normal-D9ESIMu3.woff) format('woff'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } /* ibm-plex-sans-vietnamese-400-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/ibm-plex-sans-vietnamese-400-normal-DG4YqDda.woff2) format('woff2'), url(/assets/ibm-plex-sans-vietnamese-400-normal-fK1oJ5dG.woff) format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* ibm-plex-sans-latin-ext-400-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/ibm-plex-sans-latin-ext-400-normal-C5H60-Va.woff2) format('woff2'), url(/assets/ibm-plex-sans-latin-ext-400-normal-RBey6euL.woff) format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ibm-plex-sans-latin-400-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/ibm-plex-sans-latin-400-normal-CDDApCn2.woff2) format('woff2'), url(/assets/ibm-plex-sans-latin-400-normal-CYLoc0-x.woff) format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }/* ibm-plex-sans-cyrillic-ext-500-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/ibm-plex-sans-cyrillic-ext-500-normal-Cs5J6C77.woff2) format('woff2'), url(/assets/ibm-plex-sans-cyrillic-ext-500-normal-DB5PtV2g.woff) format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* ibm-plex-sans-cyrillic-500-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/ibm-plex-sans-cyrillic-500-normal-CocWQlwt.woff2) format('woff2'), url(/assets/ibm-plex-sans-cyrillic-500-normal-ByOcLdNv.woff) format('woff'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* ibm-plex-sans-greek-500-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/ibm-plex-sans-greek-500-normal-JMMifIXV.woff2) format('woff2'), url(/assets/ibm-plex-sans-greek-500-normal-CuWXN6rf.woff) format('woff'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } /* ibm-plex-sans-vietnamese-500-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/ibm-plex-sans-vietnamese-500-normal-e4dixQRQ.woff2) format('woff2'), url(/assets/ibm-plex-sans-vietnamese-500-normal-BEb3_waV.woff) format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* ibm-plex-sans-latin-ext-500-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/ibm-plex-sans-latin-ext-500-normal-DakdToA3.woff2) format('woff2'), url(/assets/ibm-plex-sans-latin-ext-500-normal-D0aIdm-b.woff) format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ibm-plex-sans-latin-500-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/ibm-plex-sans-latin-500-normal-6ng42L7E.woff2) format('woff2'), url(/assets/ibm-plex-sans-latin-500-normal-BgVn5rGT.woff) format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }/* ibm-plex-sans-cyrillic-ext-600-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/ibm-plex-sans-cyrillic-ext-600-normal-DUMzJB7m.woff2) format('woff2'), url(/assets/ibm-plex-sans-cyrillic-ext-600-normal-Bz0x94Yp.woff) format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* ibm-plex-sans-cyrillic-600-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/ibm-plex-sans-cyrillic-600-normal-71GNu3SW.woff2) format('woff2'), url(/assets/ibm-plex-sans-cyrillic-600-normal-BGq0mW3O.woff) format('woff'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* ibm-plex-sans-greek-600-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/ibm-plex-sans-greek-600-normal-DzTrcv_p.woff2) format('woff2'), url(/assets/ibm-plex-sans-greek-600-normal-D-CqTdkO.woff) format('woff'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } /* ibm-plex-sans-vietnamese-600-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/ibm-plex-sans-vietnamese-600-normal-DpPYBSTl.woff2) format('woff2'), url(/assets/ibm-plex-sans-vietnamese-600-normal-DgdngZtN.woff) format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* ibm-plex-sans-latin-ext-600-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/ibm-plex-sans-latin-ext-600-normal-DOrvGEcy.woff2) format('woff2'), url(/assets/ibm-plex-sans-latin-ext-600-normal-DIrixKbi.woff) format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ibm-plex-sans-latin-600-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/ibm-plex-sans-latin-600-normal-CuJfVYMP.woff2) format('woff2'), url(/assets/ibm-plex-sans-latin-600-normal-Cu4Hd6ag.woff) format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }/* ibm-plex-sans-cyrillic-ext-700-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/ibm-plex-sans-cyrillic-ext-700-normal-BmRLXWpJ.woff2) format('woff2'), url(/assets/ibm-plex-sans-cyrillic-ext-700-normal-DCQwxkRk.woff) format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* ibm-plex-sans-cyrillic-700-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/ibm-plex-sans-cyrillic-700-normal-D_uavGvn.woff2) format('woff2'), url(/assets/ibm-plex-sans-cyrillic-700-normal-RFb1v-CK.woff) format('woff'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* ibm-plex-sans-greek-700-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/ibm-plex-sans-greek-700-normal-wyJ6jzdA.woff2) format('woff2'), url(/assets/ibm-plex-sans-greek-700-normal-CkZN0sRy.woff) format('woff'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } /* ibm-plex-sans-vietnamese-700-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/ibm-plex-sans-vietnamese-700-normal-CkEo6LDy.woff2) format('woff2'), url(/assets/ibm-plex-sans-vietnamese-700-normal-BV5B8Are.woff) format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* ibm-plex-sans-latin-ext-700-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/ibm-plex-sans-latin-ext-700-normal-aMgXseD4.woff2) format('woff2'), url(/assets/ibm-plex-sans-latin-ext-700-normal-DZH6Xh-4.woff) format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ibm-plex-sans-latin-700-normal */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/ibm-plex-sans-latin-700-normal-Bxkt5Cjx.woff2) format('woff2'), url(/assets/ibm-plex-sans-latin-700-normal-Bth3BMcD.woff) format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }/* ibm-plex-sans-condensed-cyrillic-ext-600-normal */ @font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-display: swap; font-weight: 600; src: url(data:font/woff2;base64,d09GMgABAAAAAAVsABAAAAAACiAAAAUUAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cKAZgAFQIQgmCcxEQCoNAg0ELDgABNgIkAxgEIAWDSgdGDINWG/cICK4HeEMa9QvHYUYoWISVufhyPO4rK4wq8QCvG/Z+khpQ9VQUKmJGR7VhNlofJtO7WzYT/m8t/bOzfITh2QAfBfFyYSBXUpF13botgcrzFYYlS+gb3HN6PVb2Pa4Ohav2P3Vx21PdwH74+5m+WGikRhOOaID//63f/qKCK3XA6Xdii6sAOUw+PJpdIB2Anpo55RTBIV+qjt97ogBkBAqERo6uaAAeDSgHkzpSJOpY48behSnQAuzbkigomguDqKglYMKfHRZrCf1AlOVYhsJAxQBiIALAuOGVBA0F6YM49791KCQBmVJAFwBRhnoKpCggAmKgDgwBddDygBwehQaqIm7SB+UEjwrl396mQnbvWd+AKeW8YuRrU69KowkVkuwYc+WOB0Cu3Jc6lGLDLDYSQR09HcCnD1kChQkKYercxyFczSuF8qkSb9MnBHjJYocCFVJSNOqVw9JOCqpQgjq2cChwIfXJcZvRdS1hreQsLY5beZaOJiO9A3LSRtMZWwbP5nUhsvq5o3Nvw1xJHjovwDe0qrU1w6GgeTgJnM2TKBkj4TG6fszfTmIKE4gct53aUtsiHx3ZuHKNbPokiRTJr6fOPSZGNpY2uvazL0zr7Oao/dUhF2Q71l6e5prRuobWFa3FYrAQJslH21rjYqt54UWK143ZgDs0rCC3xm1GKeHo1BzXUfEEVNSZ6gKtAft/g9ehEAoT6luKvAGS1OoABOOJ9JhyWXWAigA5IAaGANMASIC/RQAEkCSpBzQV1f0VMnRv8Us4dqdxJqia56CZmaC5eyMce5kpDp396Gv2/GdHbzbIEmfOhOYs9VU7L7LnR8x6/imK1SO5tdXnLFQW9naoNqxorzQebJ1StVTlLgoR11a8P3n4ZJcuP8Ph+zBo/B/yaQNtbZXGQ6Oi0uWTtlS6N3nYbZr/2GNs/R7MisJ7eIrDE2rWSldwNUrwOyUwaq4Cd2n8BGYa3KqAn8Ue3dht437u2u0pq1RpxY4iFCgOFMREEIhA7WRgjSdbE/2KVhO4dZu2yzBMRwttm3jXaAYuwt9bnuCJvxYQ3r+NI/wabY0ndIEk9pZYLw6FvktTDkZAHsZADsa7oUzogZSJOB632//uQPD+xr5ZUn3gb5Wr4G/wE8PLAfi5/vf/yZ1kD0JAAQSQhH+TvDMBCyA7k4rhIcL7aShHI0mh5w9ARbU4fVgIIAMi6BcJBFQ2BEOJAGB+yECL5LnVUrSea7ECa/O0VcuwGtCy3JI+o1YSsNaCBTMyuLjM6zdn1IwF85zmjZrgNG3OMJdqPhVKFahUY8KgFfV6TZlXaNqUAQ71Bk0aVWDahAFNBs2ZN9p2Eh5OiYrNpG6WyOTDutlhiyb0muM5OH7S+UlHBsOnDxpAqIw1PWP1N5Dh33MWkcDNIx15iI341TkznIh8EyaQQjIfdA9qOEiWHviLThSAMi12j6gIhEABDhjR3OLmUTc8Xl1JcBckhS/Ndysg7ylEg8qHSaTFwFeXxAkVyEIDVM4vlnWSxApdpBdlPcsgQjA7AxFJo3Dh2+7wCpIinsSPYTpJcYuSszCfdA4SE86iVcrlFs4PZzGOTWmSJhxnsep5JYtkQ5OTxdP6Ax7Q5OVKcvzAswSFUsUJY4GxqFQWF9fvLJVEsSR2WrBqq1Ri3qcxppmXRyAOesqEw+VL4P/T91QuG7RTc/O4M9wbpAe7BD38wA6kBzu501DH2KTfNcYBrFtwDQA=) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAASIAA0AAAAABWQAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAABMAAAAB4AAAAeRHRMdUdTVUIAAAFQAAAAJwAAACi4/LjqT1MvMgAAAXgAAABTAAAAYGncofljbWFwAAABzAAAADwAAABUAMohV2dhc3AAAAIIAAAAEAAAABAAGAAhZ2x5ZgAAAhgAAADEAAAAxFI/PixoZWFkAAAC3AAAADYAAAA2GuVJ6WhoZWEAAAMUAAAAHgAAACQHjQKuaG10eAAAAzQAAAAXAAAAGAZoAEFsb2NhAAADTAAAAA4AAAAOAIwAjG1heHAAAANcAAAAHAAAACAAGAC1bmFtZQAAA3gAAADeAAAByiPTQMdwb3N0AAAEWAAAADAAAABG/6irTAABAAAACgAcABwAAURGTFQACAAEAAAAAP//AAAAAAAAeNpjYGRgYOBiUANCJhc3nxAGoZzEkjwGPgYQYAER//+DSABaSQVVAHjaLYUxDkBAFAXnv10k6NSSLZQuoBOdiH4rB9K6isrlWGEyk8GrVcSB9nRYvttGtAFUFXkmRxLexM88rcFGCKer7856b9YE7ABQqQsI6AGbcwjaAHjaY2BgYAJiZiAWAZKMYJqFwQFI8zBwAOVYgCxeBgWGBQpb/v8HspF5jP+//n/8P/V+AEgfAgAAknEOOQABAAMACAAKABAABf//AA8AAgAgAAABiAMMAAMABwAAEyERISURIxEgAWj+mAEQuAMM/PRYAlz9pAAAAQAh//QCJALGADYAAAUiJjU0NjcjNTM/ATUHIzUhPgE1NCYjIgcnPgEzMhYVFAYHMxUjDwEVNzMVIQYVFBYzMjcXDgEBLmtkCQhPdk9GaaIBQgcGJi1GLj4gZDhkWwkIT3ZOR2mh/r8NLzNILj4hZAxcTRIlEU4xIAoHTg4fDyskN0smLFtNEiYRTjAiCghOGyArJDdLJi0AAAEAAAABAMSgvffYXw889QAJA+gAAAAA2zdCSwAAAADc58KH/ur+9gSfBHcAIAAJAAIAAAAAAAB42mNgZGBgYfz3Fkhe+Pfq3yuW+UARVMAGALBLB0AAAHjaY1zBoMAAAlcgmMmFQRFEAwAsfQOtAAAAABUAFQAVABUAYgBiAAB42mNgZGBgYGMIZGBnSALSIB4CsDAwAgASBQDOeNqVkEWWQkEQBGPcZznrPsC4u7s7ssLdHc7GCTgV+frhrPgaVZ2lwCwhJhibnBO7x+ZbPMYljRaPs0y9xRNcU2vxZI9mihUCLZ5mk90WL4sgQkF3hmM2dOfxkyMquyBeJy9O6J+WN6zzD+555Ylr3vjUSZAKP3hJSXkjVUqV1uQJklTktTwJef5l52wuKTBsKeNO63vSymZEo+b9lh2mKPaSa+fpxJtOBtPJEbR2UGSGsklDhio5+cJ2L4ZtNtniSNTKblU56dbFVyR0m56IvLWCtkaOkq203gTmuEO8AAB42mNgYgCD/1sZIhiwATYgZmRkYmBmZGZkYS/NyzQwMHAB0UYGTiYQvqMBANKMCJs=) format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* ibm-plex-sans-condensed-vietnamese-600-normal */ @font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/ibm-plex-sans-condensed-vietnamese-600-normal-CdKbmnAp.woff2) format('woff2'), url(/assets/ibm-plex-sans-condensed-vietnamese-600-normal--5ui7us-.woff) format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* ibm-plex-sans-condensed-latin-ext-600-normal */ @font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/ibm-plex-sans-condensed-latin-ext-600-normal-CBdNZ9Ci.woff2) format('woff2'), url(/assets/ibm-plex-sans-condensed-latin-ext-600-normal-DvCwRnqE.woff) format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ibm-plex-sans-condensed-latin-600-normal */ @font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/ibm-plex-sans-condensed-latin-600-normal-CRd5VyFf.woff2) format('woff2'), url(/assets/ibm-plex-sans-condensed-latin-600-normal-6XnkKYvF.woff) format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }/* ibm-plex-mono-cyrillic-ext-400-normal */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/ibm-plex-mono-cyrillic-ext-400-normal-xuaO2J-f.woff2) format('woff2'), url(/assets/ibm-plex-mono-cyrillic-ext-400-normal-DMdlQ8Kv.woff) format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* ibm-plex-mono-cyrillic-400-normal */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/ibm-plex-mono-cyrillic-400-normal-BSMlKf0J.woff2) format('woff2'), url(/assets/ibm-plex-mono-cyrillic-400-normal-CEL4l2ZJ.woff) format('woff'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* ibm-plex-mono-vietnamese-400-normal */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/ibm-plex-mono-vietnamese-400-normal-BulugwFq.woff2) format('woff2'), url(/assets/ibm-plex-mono-vietnamese-400-normal-DDuiU_S-.woff) format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* ibm-plex-mono-latin-ext-400-normal */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/ibm-plex-mono-latin-ext-400-normal-BmRBH3aV.woff2) format('woff2'), url(/assets/ibm-plex-mono-latin-ext-400-normal-D3D2R8hC.woff) format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ibm-plex-mono-latin-400-normal */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/ibm-plex-mono-latin-400-normal-DMJ8VG8y.woff2) format('woff2'), url(/assets/ibm-plex-mono-latin-400-normal-CvHOgSBP.woff) format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }/* ibm-plex-mono-cyrillic-ext-500-normal */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/ibm-plex-mono-cyrillic-ext-500-normal-BqneJy0T.woff2) format('woff2'), url(/assets/ibm-plex-mono-cyrillic-ext-500-normal-BIfNGwUT.woff) format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* ibm-plex-mono-cyrillic-500-normal */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/ibm-plex-mono-cyrillic-500-normal-Bq9vWWag.woff2) format('woff2'), url(/assets/ibm-plex-mono-cyrillic-500-normal-Ael50iVv.woff) format('woff'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* ibm-plex-mono-vietnamese-500-normal */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/ibm-plex-mono-vietnamese-500-normal-DZ4AoWbu.woff2) format('woff2'), url(/assets/ibm-plex-mono-vietnamese-500-normal-C8zxqsMH.woff) format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* ibm-plex-mono-latin-ext-500-normal */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/ibm-plex-mono-latin-ext-500-normal-CAhNIIs5.woff2) format('woff2'), url(/assets/ibm-plex-mono-latin-ext-500-normal-CZ70TYgx.woff) format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ibm-plex-mono-latin-500-normal */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/ibm-plex-mono-latin-500-normal-DSY6xOcd.woff2) format('woff2'), url(/assets/ibm-plex-mono-latin-500-normal-CB9ihrfo.woff) format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }/* ibm-plex-mono-cyrillic-ext-600-normal */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/ibm-plex-mono-cyrillic-ext-600-normal-V-xxqcpd.woff2) format('woff2'), url(/assets/ibm-plex-mono-cyrillic-ext-600-normal-9HEixskS.woff) format('woff'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* ibm-plex-mono-cyrillic-600-normal */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/ibm-plex-mono-cyrillic-600-normal-CTOM6hUh.woff2) format('woff2'), url(/assets/ibm-plex-mono-cyrillic-600-normal-fLZuRloM.woff) format('woff'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* ibm-plex-mono-vietnamese-600-normal */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/ibm-plex-mono-vietnamese-600-normal-D2EvbN8M.woff2) format('woff2'), url(/assets/ibm-plex-mono-vietnamese-600-normal-iLQfcSjf.woff) format('woff'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* ibm-plex-mono-latin-ext-600-normal */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/ibm-plex-mono-latin-ext-600-normal-D38SheWl.woff2) format('woff2'), url(/assets/ibm-plex-mono-latin-ext-600-normal-DmB0ttJJ.woff) format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ibm-plex-mono-latin-600-normal */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/ibm-plex-mono-latin-600-normal-BgSNZQsw.woff2) format('woff2'), url(/assets/ibm-plex-mono-latin-600-normal-DWFSQ4vo.woff) format('woff'); 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; }/* ============================================================ HyperLane Control — design tokens (single source of truth) ============================================================ Mirrors the "HyperLane Control" design system artifact. Three layers: 1. Tenant inputs --brand-accent, --tenant-bg, --tenant-surface, --tenant-text, --tenant-text-muted, --tenant-border. Written inline on by BrandingContext. Only the dark theme reads the surface/text inputs; every theme reads --brand-accent. 2. Theme tokens --ground, --surface, --ink, --signal, --sev-* … defined per [data-theme]. New code uses ONLY these. 3. Legacy aliases --bg-base, --text, --accent, --bg, --danger … kept so the ~5.7k existing var() references keep working. They point at layer 2 and must never be given literal values again. Dark ("Control room") is the default; light ("Back office") is opt-in via (see src/theme/ThemeContext.tsx). */ /* ── Layer 2: theme tokens ─────────────────────────────────── */ :root, :root[data-theme="dark"] { color-scheme: dark; --brand: var(--brand-accent, #4cb8f0); --ground: var(--tenant-bg, #0a0f14); --surface: var(--tenant-surface, #111820); --surface-raised: color-mix(in oklab, var(--surface), white 5%); --surface-sunken: color-mix(in oklab, var(--ground), black 20%); --hover: color-mix(in oklab, var(--surface), white 6%); --line: var(--tenant-border, #243140); --line-strong: color-mix(in oklab, var(--line), white 14%); --ink: var(--tenant-text, #e6edf3); --ink-strong: color-mix(in oklab, var(--ink), white 40%); --ink-muted: var(--tenant-text-muted, #9fb0c0); --ink-faint: #72859a; --signal: var(--brand); --signal-soft: color-mix(in oklab, var(--signal) 16%, var(--surface)); --on-signal: #04121c; --focus: color-mix(in oklab, var(--signal), white 25%); --sev-critical: #ff6b6b; --sev-critical-soft: #3a1416; --sev-high: #ff9f43; --sev-high-soft: #3a2410; --sev-medium: #f5d04a; --sev-medium-soft: #332b0c; --sev-low: #4fd18b; --sev-low-soft: #10301f; --sev-info: #9fb0c0; /* General-purpose status colours (not alarm severity). */ --ok: #22c55e; --caution: #f59e0b; --fault: #ef4444; /* Event families + map resources (alarm pop-up colour code, Springtec #23). */ --evt-device: #4d9bff; --map-patrol: #4d9bff; --map-sign: #ffb020; --scrim: rgba(3, 6, 9, 0.72); --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55); --scrollbar: color-mix(in oklab, var(--line), white 8%); } :root[data-theme="light"] { color-scheme: light; --ground: #f3f5f7; --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #e9edf1; --hover: #eef2f5; --line: #d5dce3; --line-strong: #a9b6c3; --ink: #131b24; --ink-strong: #05090d; --ink-muted: #4f5f6f; --ink-faint: #6b7a89; /* Brand colours are picked for dark backgrounds; darken for 4.5:1 on white. */ --signal: color-mix(in oklab, var(--brand) 62%, black); --signal-soft: color-mix(in oklab, var(--brand) 14%, white); --on-signal: #ffffff; --focus: var(--signal); --sev-critical: #b3261e; --sev-critical-soft: #fcebea; --sev-high: #a44a00; --sev-high-soft: #fdf0e3; --sev-medium: #7a5d00; --sev-medium-soft: #fbf5dc; --sev-low: #1b7340; --sev-low-soft: #e5f5eb; --sev-info: #4f5f6f; --ok: #1b7340; --caution: #8a5a00; --fault: #b3261e; --evt-device: #1f5fbf; --map-patrol: #1f5fbf; --map-sign: #8a5a00; --scrim: rgba(19, 27, 36, 0.45); --shadow-overlay: 0 12px 32px rgba(19, 27, 36, 0.18); --scrollbar: #c3ccd5; } /* ── Theme-independent scales ─────────────────────────────── */ :root { /* Type — six styles, nothing below 12px (caption). */ --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-sans: var(--font); --font-display: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace; --fs-caption: 12px; --lh-caption: 16px; --fs-data: 13px; --lh-data: 20px; --fs-body: 14px; --lh-body: 20px; --fs-subtitle: 16px; --lh-subtitle: 24px; --fs-title: 20px; --lh-title: 28px; --fs-display: 28px; --lh-display: 34px; /* Spacing — 4px grid. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; /* Shape */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-full: 9999px; /* Sizing */ --control-h: 36px; --control-h-sm: 28px; --control-h-touch: 44px; --tap-min: 44px; --sidebar-w: 240px; --sidebar-col: 64px; --topbar-h: 52px; /* Video surfaces stay black in both themes. */ --video-bg: #000000; --on-video: #ffffff; /* Glass chrome + HUD over the 3D globe (SkyView). Theme-independent: the globe is always dark, so the chrome stays dark in both themes. */ --glass-bg: rgba(10, 14, 22, 0.72); --glass-border: rgba(255, 255, 255, 0.09); --glass-hover: rgba(255, 255, 255, 0.16); --glass-blur: blur(20px) saturate(1.4); --glass-ink: #e8eaed; --glass-muted: rgba(232, 234, 237, 0.55); --hud-normal: #3fd8ff; --hud-nvg: #33ff4d; --hud-flir: #f2f2f2; --hud-crt: #ffaa00; --hud-noir: #d9d4c7; /* Motion */ --ease: 150ms cubic-bezier(0.4, 0, 0.2, 1); --ease-out: 200ms cubic-bezier(0, 0, 0.2, 1); /* Breakpoints — duplicated in src/hooks/useBreakpoint.ts; keep in sync. */ --bp-phone: 480px; --bp-tablet: 768px; --bp-desktop: 1024px; --bp-wide: 1400px; /* ── Layer 3: legacy aliases (do not add literals here) ───── */ --bg-base: var(--ground); --bg-surface: var(--surface); --bg-elevated: var(--surface-raised); --bg-overlay: color-mix(in oklab, var(--surface-raised), var(--ink) 4%); --bg-hover: var(--hover); --bg-active: var(--signal-soft); --border: var(--line); --border-muted: color-mix(in oklab, var(--line), var(--ground) 50%); --border-focus: var(--focus); --text: var(--ink); --text-strong: var(--ink-strong); --text-muted: var(--ink-muted); --text-subtle: var(--ink-faint); --accent: var(--signal); --accent-light: color-mix(in oklab, var(--signal), var(--ink) 20%); --accent-dim: color-mix(in srgb, var(--signal) 12%, transparent); --accent-glow: color-mix(in srgb, var(--signal) 25%, transparent); --success: var(--ok); --success-dim: color-mix(in srgb, var(--ok) 10%, transparent); --warning: var(--caution); --warning-dim: color-mix(in srgb, var(--caution) 10%, transparent); --error: var(--fault); --error-dim: color-mix(in srgb, var(--fault) 10%, transparent); /* Formerly declared in App.css, which overrode index.css. */ --bg: var(--ground); --bg-2: var(--surface); --bg-3: var(--surface-raised); --text-dim: var(--ink-muted); --accent-hover: var(--accent-light); --danger: var(--fault); --warn: var(--caution); /* Old shadow + radius names */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: var(--shadow-overlay); --r-sm: var(--radius-sm); --r: var(--radius-md); --r-lg: var(--radius-lg); --r-xl: 14px; --r-full: var(--radius-full); /* Old spacing + type scale. Deprecated: use --space-N / --fs-*. */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 20px; --space-2xl: 24px; --font-xs: 10px; --font-sm: 11px; --font-md: 12px; --font-lg: 13px; --font-xl: 15px; --font-2xl: 18px; --font-3xl: 24px; } /* On phones, tighten the legacy scale so page chrome stops eating space. */ @media (max-width: 767px) { :root { --space-lg: 12px; --space-xl: 14px; --space-2xl: 16px; --font-xl: 14px; --font-2xl: 16px; --font-3xl: 20px; } } @media (prefers-reduced-motion: reduce) { :root { --ease: 0ms linear; --ease-out: 0ms linear; } } /* Tailwind, compiled at build time (see tailwind.config.js). Kept at the very top so the design-system rules below still override Tailwind's preflight and utilities — the same cascade order the old Play CDN produced, since its injected \3c style> came before this file. */ *, ::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(59 130 246 / 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(59 130 246 / 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: #e5e7eb; /* 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-sans); /* 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: var(--font-mono); /* 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: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 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; } .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; } } .\!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; } .z-50 { z-index: 50; } .col-span-full { grid-column: 1 / -1; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-2\.5 { margin-bottom: 0.625rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .ml-2 { margin-left: 0.5rem; } .mr-2 { margin-right: 0.5rem; } .mt-0\.5 { margin-top: 0.125rem; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-px { margin-top: 1px; } .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 !important; } .grid { display: grid; } .contents { display: contents; } .\!hidden { display: none !important; } .hidden { display: none; } .h-2 { height: 0.5rem; } .h-full { height: 100%; } .max-h-\[80vh\] { max-height: 80vh; } .max-h-\[90vh\] { max-height: 90vh; } .min-h-0 { min-height: 0px; } .w-48 { width: 12rem; } .w-full { width: 100%; } .min-w-0 { min-width: 0px; } .min-w-\[200px\] { min-width: 200px; } .max-w-2xl { max-width: 42rem; } .max-w-lg { max-width: 32rem; } .max-w-md { max-width: 28rem; } .max-w-sm { max-width: 24rem; } .max-w-xs { max-width: 20rem; } .flex-1 { flex: 1 1 0%; } .shrink { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } .grow { flex-grow: 1; } .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)); } .select-all { -webkit-user-select: all; -moz-user-select: all; user-select: all; } .resize { resize: both; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, 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; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-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)); } .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)); } .self-center { align-self: center; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-y-auto { overflow-y: auto; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .break-words { overflow-wrap: break-word; } .break-all { word-break: break-all; } .rounded { border-radius: 0.25rem; } .rounded-full { border-radius: 9999px; } .rounded-lg { border-radius: 0.5rem; } .rounded-md { border-radius: 0.375rem; } .rounded-xl { border-radius: 0.75rem; } .rounded-t { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .rounded-t-2xl { border-top-left-radius: 1rem; border-top-right-radius: 1rem; } .rounded-t-xl { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; } .border { border-width: 1px; } .border-b { border-bottom-width: 1px; } .border-b-2 { border-bottom-width: 2px; } .border-amber-200 { --tw-border-opacity: 1; border-color: rgb(253 230 138 / var(--tw-border-opacity, 1)); } .border-blue-200 { --tw-border-opacity: 1; border-color: rgb(191 219 254 / var(--tw-border-opacity, 1)); } .border-blue-300 { --tw-border-opacity: 1; border-color: rgb(147 197 253 / var(--tw-border-opacity, 1)); } .border-blue-600 { --tw-border-opacity: 1; border-color: rgb(37 99 235 / var(--tw-border-opacity, 1)); } .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); } .border-green-200 { --tw-border-opacity: 1; border-color: rgb(187 247 208 / var(--tw-border-opacity, 1)); } .border-green-300 { --tw-border-opacity: 1; border-color: rgb(134 239 172 / var(--tw-border-opacity, 1)); } .border-red-200 { --tw-border-opacity: 1; border-color: rgb(254 202 202 / var(--tw-border-opacity, 1)); } .border-red-300 { --tw-border-opacity: 1; border-color: rgb(252 165 165 / var(--tw-border-opacity, 1)); } .border-transparent { border-color: transparent; } .bg-amber-50 { --tw-bg-opacity: 1; background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1)); } .bg-black\/40 { background-color: rgb(0 0 0 / 0.4); } .bg-black\/50 { background-color: rgb(0 0 0 / 0.5); } .bg-blue-100 { --tw-bg-opacity: 1; background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1)); } .bg-blue-50 { --tw-bg-opacity: 1; background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); } .bg-blue-600 { --tw-bg-opacity: 1; background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); } .bg-cyan-100 { --tw-bg-opacity: 1; background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1)); } .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); } .bg-gray-200 { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); } .bg-gray-50 { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); } .bg-gray-600 { --tw-bg-opacity: 1; background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1)); } .bg-gray-700 { --tw-bg-opacity: 1; background-color: rgb(55 65 81 / 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-50 { --tw-bg-opacity: 1; background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1)); } .bg-green-500 { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); } .bg-green-600 { --tw-bg-opacity: 1; background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); } .bg-orange-100 { --tw-bg-opacity: 1; background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1)); } .bg-orange-400 { --tw-bg-opacity: 1; background-color: rgb(251 146 60 / 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-500 { --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .bg-yellow-100 { --tw-bg-opacity: 1; background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1)); } .bg-yellow-50 { --tw-bg-opacity: 1; background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1)); } .bg-yellow-500 { --tw-bg-opacity: 1; background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1)); } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .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-12 { padding-top: 3rem; padding-bottom: 3rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .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; } .pt-2 { padding-top: 0.5rem; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .font-mono { font-family: var(--font-mono); } .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; } .capitalize { text-transform: capitalize; } .italic { font-style: italic; } .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; } .text-amber-800 { --tw-text-opacity: 1; color: rgb(146 64 14 / var(--tw-text-opacity, 1)); } .text-blue-600 { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity, 1)); } .text-blue-700 { --tw-text-opacity: 1; color: rgb(29 78 216 / var(--tw-text-opacity, 1)); } .text-blue-800 { --tw-text-opacity: 1; color: rgb(30 64 175 / var(--tw-text-opacity, 1)); } .text-cyan-700 { --tw-text-opacity: 1; color: rgb(14 116 144 / var(--tw-text-opacity, 1)); } .text-gray-300 { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity, 1)); } .text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1)); } .text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity, 1)); } .text-gray-600 { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } .text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity, 1)); } .text-gray-900 { --tw-text-opacity: 1; color: rgb(17 24 39 / 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-green-800 { --tw-text-opacity: 1; color: rgb(22 101 52 / var(--tw-text-opacity, 1)); } .text-orange-600 { --tw-text-opacity: 1; color: rgb(234 88 12 / var(--tw-text-opacity, 1)); } .text-orange-800 { --tw-text-opacity: 1; color: rgb(154 52 18 / 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-700 { --tw-text-opacity: 1; color: rgb(161 98 7 / 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; } .line-through { text-decoration-line: line-through; } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; } .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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-2xl { --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px 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 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 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 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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 { --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(3px + 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); } .blur { --tw-blur: blur(8px); 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); } .drop-shadow { --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); 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); } .invert { --tw-invert: invert(100%); 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); } .sepia { --tw-sepia: sepia(100%); 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); } .\!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) !important; } .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-filter { 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; } .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } .\[-\:\.\] { -: .; } /* ============================================================ TCSS Design System — Global Styles ============================================================ */ /* Design tokens live in ./styles/tokens.css (imported first in main.tsx). */ /* ── Reset ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body, #root { height: 100%; width: 100%; overflow: hidden; } body { font-family: var(--font); font-size: 13px; line-height: 1.5; color: var(--text); background: var(--bg-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-light); } img, svg { display: block; } /* ── Scrollbars ──────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--line-strong); } /* ── Buttons (reset) ─────────────────────────────────────── */ button { font-family: var(--font); font-size: inherit; border: none; background: none; cursor: pointer; color: inherit; border-radius: var(--r); line-height: 1; transition: background var(--ease), color var(--ease), border-color var(--ease), opacity var(--ease); } button:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } /* ── Form elements ───────────────────────────────────────── */ input, select, textarea { font-family: var(--font); font-size: 12px; background: var(--bg-surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r); padding: 6px 10px 6px 20px; outline: none; transition: border-color var(--ease), box-shadow var(--ease); width: 100%; } /* Browser autofill (username/password) paints its own background over ours — Chrome/Edge only respect this box-shadow-inset override, not a plain background-color. Keeps autofilled fields matching the dark theme instead of flashing white/cream. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--bg-surface) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; } input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; border: none; background: none; flex-shrink: 0; } /* Undo the base input's padding/border/background box — a range input has no text to pad and should render as just its track (see .tcss-slider), not a bordered field with a sliver of track floating inside it. */ input[type="range"] { padding: 0; border: none; background: none; } input:focus, select:focus, textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-dim); } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 28px; } /* ── Typography ──────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { color: var(--text-strong); font-weight: 600; line-height: 1.3; } /* ── Utility classes ─────────────────────────────────────── */ .tcss-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 12px; font-weight: 500; border-radius: var(--r); border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); cursor: pointer; white-space: nowrap; transition: background var(--ease), border-color var(--ease), color var(--ease); } .tcss-btn:hover { background: var(--bg-overlay); border-color: #253554; color: var(--text-strong); } .tcss-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .tcss-btn-primary:hover { background: var(--accent-light); border-color: var(--accent-light); } .tcss-btn-danger { background: var(--error-dim); border-color: rgba(239,68,68,0.3); color: var(--error); } .tcss-btn-danger:hover { background: rgba(239,68,68,0.2); } .tcss-btn-sm { padding: 4px 10px; font-size: 11px; } /* Disabled state — without this, a disabled button (e.g. wizard "Next" gated on a required selection) is functionally blocked but looks identical to an enabled one, since :hover above would otherwise still apply. The compound :disabled:hover selectors win on specificity regardless of source order. */ .tcss-btn:disabled, .tcss-btn:disabled:hover, .tcss-btn-primary:disabled, .tcss-btn-primary:disabled:hover, .tcss-btn-danger:disabled, .tcss-btn-danger:disabled:hover { opacity: 0.4; cursor: not-allowed; } .tcss-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; } .tcss-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .tcss-card-title { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .tcss-table { width: 100%; border-collapse: collapse; font-size: 12px; } .tcss-table th { padding: 8px 12px; text-align: left; font-size: 10px; font-weight: 600; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--border); white-space: nowrap; } .tcss-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-muted); color: var(--text); vertical-align: middle; } .tcss-table tr:last-child td { border-bottom: none; } .tcss-table tbody tr:hover td { background: var(--bg-hover); } .tcss-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-full); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; } .badge-critical { background: rgba(220,38,38,0.15); color: #fca5a5; border: 1px solid rgba(220,38,38,0.25); } .badge-high { background: rgba(234,88,12,0.15); color: #fdba74; border: 1px solid rgba(234,88,12,0.25); } .badge-medium { background: rgba(217,119,6,0.15); color: #fcd34d; border: 1px solid rgba(217,119,6,0.25); } .badge-low { background: rgba(22,163,74,0.15); color: #86efac; border: 1px solid rgba(22,163,74,0.25); } .badge-info { background: rgba(2,132,199,0.15); color: #7dd3fc; border: 1px solid rgba(2,132,199,0.25); } .badge-llm { background: rgba(147,51,234,0.15); color: #c4b5fd; border: 1px solid rgba(147,51,234,0.25); } .badge-online { background: rgba(34,197,94,0.12); color: #4ade80; border: 1px solid rgba(34,197,94,0.2); } .badge-offline { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.2); } .tcss-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: var(--r-full); font-size: 10px; font-weight: 500; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted); } .tcss-stat { font-size: 28px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.03em; line-height: 1; } .tcss-label { font-size: 10px; font-weight: 600; /* Caption labels: use --text-muted (~7.3:1), not --text-subtle — at 10px uppercase the faintest tier is unreadable on the dark-blue surface. */ color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .tcss-divider { height: 1px; background: var(--border); margin: 16px 0; } .tcss-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 48px 24px; color: var(--text-muted); font-size: 13px; } .tcss-empty svg { opacity: 0.3; } .dot-online { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0; } .dot-offline { width: 7px; height: 7px; border-radius: 50%; background: var(--error); flex-shrink: 0; } .dot-warn { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); flex-shrink: 0; } /* Pulse animation for active alarms */ @keyframes pulse-ring { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2.2); } } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spin { animation: spin 0.8s linear infinite; } @keyframes slide-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } /* Waving three-dot "loading" indicator — chat-typing style */ @keyframes wave-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-6px); opacity: 1; } } .wave-dots { display: inline-flex; align-items: center; gap: 5px; } .wave-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-light); animation: wave-dot 1.1s ease-in-out infinite; } .wave-dots span:nth-child(2) { animation-delay: 0.15s; } .wave-dots span:nth-child(3) { animation-delay: 0.3s; } .anim-fade-in { animation: fade-in 200ms ease-out both; } /* Tabs */ .tcss-tabs { display: flex; gap: 2px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r); padding: 3px; } .tcss-tab { padding: 5px 14px; font-size: 12px; font-weight: 500; border-radius: var(--r-sm); color: var(--text-muted); border: none; background: transparent; cursor: pointer; transition: background var(--ease), color var(--ease); white-space: nowrap; } .tcss-tab:hover { color: var(--text); background: var(--bg-hover); } .tcss-tab.active { background: var(--bg-overlay); color: var(--text-strong); font-weight: 600; } /* Filter bar */ .tcss-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0; } /* Progress/bar chart */ .tcss-bar-track { height: 6px; background: var(--bg-overlay); border-radius: var(--r-full); overflow: hidden; } .tcss-bar-fill { height: 100%; border-radius: var(--r-full); transition: width 0.4s var(--ease-out); } /* Confidence slider — a draggable-pin meter bar, used in place of a plain select where the value is a threshold along a 0-100 range. Track shows the same low/warn/good bands as ConfText's text color. */ /* The visible track is drawn by the browser's own ::-webkit-slider-runnable-track / ::-moz-range-track pseudo-element, which sits on top of the input's own box — setting `background` on .tcss-slider itself paints something that pseudo-element then covers, so it only shows through during the browser's native hover/active highlight. Style the track pseudo-elements directly so the gradient is always visible, not just while dragging. */ .tcss-slider { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 16px; background: transparent; outline: none; cursor: pointer; margin: 6px 0 2px; } .tcss-slider::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-full); background: linear-gradient( to right, var(--text-subtle) 0%, var(--text-subtle) 60%, var(--warning) 60%, var(--warning) 80%, var(--success) 80%, var(--success) 100% ); } .tcss-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-surface); box-shadow: 0 0 0 1px var(--accent); cursor: grab; } .tcss-slider::-webkit-slider-thumb:active { cursor: grabbing; } .tcss-slider::-moz-range-track { height: 6px; border-radius: var(--r-full); background: linear-gradient( to right, var(--text-subtle) 0%, var(--text-subtle) 60%, var(--warning) 60%, var(--warning) 80%, var(--success) 80%, var(--success) 100% ); } .tcss-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-surface); box-shadow: 0 0 0 1px var(--accent); cursor: grab; } /* Mono text */ .mono { font-family: var(--font-mono); font-size: 11px; } /* Truncate */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Page layout */ .page { flex: 1; overflow: auto; display: flex; flex-direction: column; padding: 20px 24px; gap: 20px; min-height: 0; } .page-fill { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; } /* Section header inside a page */ .section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* Grid layouts */ .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } @media (max-width: 1400px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 750px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } } /* Placeholder loading shimmer */ @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .skeleton { background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-elevated) 50%, var(--bg-surface) 75%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; border-radius: var(--r); } /* ── LiveView component ──────────────────────────────────── */ .live-view { display: flex; flex-direction: column; width: 100%; height: 100%; background: #000; } .live-view-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--bg-surface); border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 8px; } .live-view-header h3 { font-size: 13px; font-weight: 600; color: var(--text-strong); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-view-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .video-container { flex: 1; min-height: 0; position: relative; background: #000; overflow: hidden; } .video-container video, .video-container img { width: 100%; height: 100%; display: block; -o-object-fit: contain; object-fit: contain; } /* Compact mode — fills the parent container (position: relative) */ .live-view-compact { position: absolute; inset: 0; overflow: hidden; background: #000; } .live-view-compact video, .live-view-compact img { width: 100%; height: 100%; display: block; -o-object-fit: cover; object-fit: cover; } .compact-overlay { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: 6px 8px; z-index: 1; pointer-events: none; } .compact-name { font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 75%; } .status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; } .status-dot.playing { background: var(--success); box-shadow: 0 0 5px rgba(34,197,94,0.6); } .status-dot.connecting { background: var(--warning); } .status-dot.error { background: var(--error); } .status-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); letter-spacing: 0.04em; } .status-badge.playing { background: var(--success-dim); color: var(--success); border: 1px solid rgba(34,197,94,0.25); } .status-badge.connecting { background: var(--warning-dim); color: var(--warning); border: 1px solid rgba(245,158,11,0.25); } .status-badge.error { background: var(--error-dim); color: var(--error); border: 1px solid rgba(239,68,68,0.25); } /* ── NOC video slot ──────────────────────────────────────── */ .noc-slot { position: relative; overflow: hidden; background: #000; border: 1px solid #111; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: border-color var(--ease), box-shadow var(--ease); display: flex; align-items: center; justify-content: center; min-height: 0; } .noc-slot:hover { border-color: #253554; } .noc-slot.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(14,165,233,0.2); } .noc-slot.drag-over { border-color: var(--accent); background: var(--bg-active); box-shadow: 0 0 0 2px var(--accent), inset 0 0 20px rgba(14,165,233,0.08); } .noc-slot .slot-expand-hint { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-sm); padding: 3px 7px; font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.7); letter-spacing: 0.04em; opacity: 0; transition: opacity 150ms; pointer-events: none; } .noc-slot:hover .slot-expand-hint { opacity: 1; } /* Hide the LiveView compact-overlay camera name in slots — the bottom bar handles it */ .noc-slot .compact-overlay .compact-name { display: none; } .noc-slot .compact-overlay { justify-content: flex-end; padding: 6px 8px; } /* ── Modal overlay ───────────────────────────────────────── */ @keyframes modal-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .noc-modal-backdrop { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.82); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); animation: fade-in 160ms ease-out both; } .noc-modal { width: min(1160px, 96vw); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.04); display: flex; flex-direction: column; animation: modal-in 200ms cubic-bezier(0.16,1,0.3,1) both; } /* ── Asset list camera row ───────────────────────────────── */ .asset-row { padding: 7px 12px; display: flex; align-items: center; gap: 8px; cursor: grab; border-bottom: 1px solid var(--border-muted); border-left: 2px solid transparent; transition: background var(--ease), border-color var(--ease); } .asset-row:active { cursor: grabbing; } .asset-row:hover { background: var(--bg-hover); } .asset-row.active { background: var(--bg-active); border-left-color: var(--accent); } /* ── Severity color tokens ───────────────────────────────── */ .text-critical { color: #fca5a5; } .text-high { color: #fdba74; } .text-medium { color: #fcd34d; } .text-low { color: #86efac; } .text-info { color: #7dd3fc; } .text-success { color: #4ade80; } .text-error { color: #f87171; } .text-accent { color: var(--accent); } .text-muted { color: var(--text-muted); } .text-strong { color: var(--text-strong); } /* Login page — hide hero panel on narrow viewports */ @media (max-width: 900px) { .login-hero { display: none !important; } } /* ════════════════════════════════════════════════════════════ Responsive utility classes ──────────────────────────────────────────────────────────── These let inline-style page components opt into responsive behavior without writing custom media queries. The class names are explicit about *which* breakpoint they target so it's obvious at a glance what happens on which device. ════════════════════════════════════════════════════════════ */ /* ── Visibility ───────────────────────────────────────────── .hide-phone — hidden < 768px .show-phone-only — visible only < 768px .hide-tablet-down — hidden < 1024px (phones AND tablets) .hide-desktop-up — hidden >= 1024px */ @media (max-width: 767px) { .hide-phone { display: none !important; } } @media (min-width: 768px) { .show-phone-only { display: none !important; } } @media (max-width: 1023px) { .hide-tablet-down { display: none !important; } } @media (min-width: 1024px) { .hide-desktop-up { display: none !important; } } /* ── Layout transforms ────────────────────────────────────── .stack-on-phone — turn a flex/grid row into a column on phones, with each child taking full width. Useful for two-pane page layouts that must reflow into a single column. .stack-on-tablet — same idea but kicks in below 1024px so tablet portrait gets stacked too. */ @media (max-width: 767px) { .stack-on-phone { display: flex !important; flex-direction: column !important; } .stack-on-phone > * { width: 100% !important; min-width: 0 !important; } } @media (max-width: 1023px) { .stack-on-tablet { display: flex !important; flex-direction: column !important; } .stack-on-tablet > * { width: 100% !important; min-width: 0 !important; } } /* ── Horizontal overflow guards ───────────────────────────── .scroll-x-on-phone — wrap any fixed-width table or grid in this on phones it scrolls horizontally instead of breaking the page layout. */ @media (max-width: 767px) { .scroll-x-on-phone { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ── Touch-friendly tap targets ───────────────────────────── Anything an officer / field user must tap should clear the 44×44 px minimum. Apply to icon buttons & nav controls. */ .tap-target { min-height: var(--tap-min); min-width: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; } /* ── Modal width responsive helper ────────────────────────── The .noc-modal class already uses min(1160px, 96vw); this helper provides smaller defaults for narrower dialogs. */ .modal-sm { width: min(420px, 96vw) !important; } .modal-md { width: min(640px, 96vw) !important; } .modal-lg { width: min(960px, 96vw) !important; } .modal-xl { width: min(1280px, 96vw) !important; } /* ── Page padding shrinks on phones ───────────────────────── The .page utility already exists (line ~393); we tighten it on small screens so the content gets more room. */ @media (max-width: 767px) { .page { padding: var(--space-md) var(--space-md); gap: var(--space-md); } .tcss-card { padding: var(--space-md); } } /* ── Section header wraps cleanly on phones ──────────────── */ @media (max-width: 767px) { .section-header { gap: var(--space-sm); } } /* ── Filter bars on phones ────────────────────────────────── .tcss-filter-bar already uses flex-wrap; add some breathing room so dropdowns/inputs don't crowd each other. */ @media (max-width: 767px) { .tcss-filter-bar { gap: var(--space-sm); padding: var(--space-sm) 0; } .tcss-filter-bar > * { flex: 1 1 auto; min-width: 0; } .tcss-filter-bar input, .tcss-filter-bar select { min-height: 36px; /* easier to tap, still compact */ } } /* ── Form inputs get a touch-friendly minimum on phones ──── */ @media (max-width: 767px) { input, select, textarea { font-size: 14px; /* prevents iOS auto-zoom on focus (< 16px triggers it) */ padding: 8px 10px; } } /* ── Buttons get larger tap area on phones ──────────────── */ @media (max-width: 767px) { .tcss-btn { padding: 8px 14px; font-size: 13px; min-height: 36px; } .tcss-btn-sm { padding: 6px 10px; font-size: 12px; min-height: 32px; } } /* ── Drop the .grid-auto min-column on phones ───────────── The 220px minmax inherits desktop assumptions; on phones, stack single column to avoid 180px-wide unreadable cards. */ @media (max-width: 480px) { .grid-auto { grid-template-columns: 1fr; } } /* ── Stat numbers shrink on phones ──────────────────────── */ @media (max-width: 767px) { .tcss-stat { font-size: 22px; } } .hover\:bg-gray-50:hover { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); } .hover\:bg-green-50:hover { --tw-bg-opacity: 1; background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1)); } .hover\:bg-green-700:hover { --tw-bg-opacity: 1; background-color: rgb(21 128 61 / 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\:text-gray-600:hover { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } .hover\:text-gray-700:hover { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity, 1)); } .hover\:text-gray-900:hover { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity, 1)); } .hover\:underline:hover { text-decoration-line: underline; } .hover\:opacity-100:hover { opacity: 1; } .disabled\:opacity-50:disabled { opacity: 0.5; } @media (min-width: 640px) { .sm\:max-w-2xl { max-width: 42rem; } .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .sm\:items-center { align-items: center; } .sm\:rounded-xl { border-radius: 0.75rem; } } @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } } @media (min-width: 1280px) { .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } * { margin: 0; padding: 0; box-sizing: border-box; } /* Tokens (--bg, --danger, --warn …) are legacy aliases in ./styles/tokens.css. */ body { background: var(--bg); color: var(--text); font-family: var(--font); } .app { height: 100vh; display: flex; flex-direction: column; background: var(--bg); } /* ── Header ─────────────────────────────────── */ .app-header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 48px; background: var(--bg-2); border-bottom: 1px solid var(--border); flex-shrink: 0; } .header-left { display: flex; align-items: center; gap: 10px; } .app-logo { font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: 2px; } .app-name { font-size: 13px; color: var(--text-dim); } .version { font-size: 11px; color: #555; background: var(--bg-3); padding: 2px 8px; border-radius: 4px; } /* ── Tab navigation ──────────────────────────── */ .tab-nav { display: flex; gap: 4px; } .tab-btn { background: none; border: none; color: var(--text-dim); padding: 6px 16px; font-size: 13px; cursor: pointer; border-radius: 4px; transition: color 0.15s, background 0.15s; } .tab-btn:hover { color: var(--text); background: var(--bg-3); } .tab-btn.active { color: var(--accent); background: #4fc3f715; font-weight: 600; } /* ── Layout ──────────────────────────────────── */ .app-layout { display: flex; flex: 1; overflow: hidden; } .sidebar { width: 260px; background: var(--bg-2); border-right: 1px solid var(--border); overflow-y: auto; flex-shrink: 0; } .main-content { flex: 1; overflow: auto; display: flex; flex-direction: column; } .placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: #555; font-size: 15px; } /* ── Alarm badge on tab ──────────────────────── */ .alarm-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; margin-left: 6px; vertical-align: middle; } /* ── SSE live status ─────────────────────────── */ .sse-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; } .sse-status.live { color: var(--success); } .sse-status.connecting { color: var(--warn); } .sse-status.offline { color: #555; } /* ── Stream Manager ──────────────────────────── */ .stream-manager-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); } .stream-manager-header h2 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim); } .btn-add { background: none; border: 1px solid var(--accent); color: var(--accent); padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; } .btn-add:hover { background: #4fc3f720; } .add-stream-form { padding: 10px 14px; display: flex; flex-direction: column; gap: 7px; border-bottom: 1px solid var(--border); } .add-stream-form input { background: var(--bg-3); border: 1px solid #333; color: var(--text); padding: 7px 10px; border-radius: 4px; font-size: 12px; } .add-stream-form input:focus { outline: none; border-color: var(--accent); } .error { color: var(--danger); font-size: 12px; } .btn-primary { background: var(--accent); color: #000; border: none; padding: 7px 14px; border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 12px; } .btn-primary:hover { background: var(--accent-hover); } .stream-list { list-style: none; } .stream-item { display: flex; align-items: center; border-bottom: 1px solid #161616; } .stream-name { flex: 1; background: none; border: none; color: var(--text); padding: 10px 14px; text-align: left; cursor: pointer; font-size: 13px; } .stream-name:hover { background: #1a1a2e; color: var(--accent); } .btn-remove { background: none; border: none; color: #444; padding: 10px 12px; cursor: pointer; font-size: 13px; } .btn-remove:hover { color: var(--danger); } .no-streams { padding: 20px 14px; color: #555; font-size: 12px; text-align: center; } /* ── Live View ───────────────────────────────── */ .live-view { height: 100%; display: flex; flex-direction: column; } .live-view-compact { position: relative; width: 100%; height: 100%; } .live-view-compact video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; background: #000; } .compact-overlay { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent); z-index: 2; pointer-events: none; } .compact-name { font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); } .status-dot { width: 7px; height: 7px; border-radius: 50%; } .status-dot.connecting { background: var(--warn); } .status-dot.playing { background: var(--success); } .status-dot.error { background: var(--danger); } .live-view-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--bg-2); border-bottom: 1px solid var(--border); } .live-view-header h3 { font-size: 14px; font-weight: 500; } .live-view-controls { display: flex; align-items: center; gap: 8px; } .status-badge { font-size: 10px; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .status-badge.connecting { background: #ff980020; color: var(--warn); } .status-badge.playing { background: #4caf5020; color: var(--success); } .status-badge.error { background: #ef535020; color: var(--danger); } .live-view-controls select { background: var(--bg-3); border: 1px solid #333; color: var(--text); padding: 3px 7px; border-radius: 4px; font-size: 12px; } .video-container { flex: 1; background: #000; display: flex; align-items: center; justify-content: center; min-height: 0; } .video-container video { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } /* ── Video Grid ──────────────────────────────── */ .video-grid-wrapper { display: flex; flex-direction: column; flex: 1; min-height: 0; /* Must be able to shrink below its content's intrinsic width — the playback footer bar (timeline + tools) would otherwise push the wrapper wide and blow out the grid's 1fr columns. */ min-width: 0; padding: 12px; gap: 10px; } .grid-toolbar { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .grid-size-btn { background: var(--bg-base); border: 1px solid var(--border); color: var(--text-muted); padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; } .grid-size-btn:hover { border-color: var(--accent); color: var(--text); } .grid-size-btn.active { background: #4fc3f720; border-color: var(--accent); color: var(--accent); } /* Icon-only variant — tighter, square-ish; label lives in the tooltip. */ .grid-size-btn.icon { padding: 6px 9px; } /* Custom-split editor: a thin accent line, shown only on the hovered cell's mergeable edge. Clean at rest; clicking it merges. */ .merge-handle { background: var(--accent); border-radius: 999px; opacity: 0.85; box-shadow: 0 0 6px rgba(79, 195, 247, 0.7); transition: opacity 0.12s; z-index: 3; } .merge-handle:hover { opacity: 1; } /* Segmented group for the 1×1…6×6 sizes — reads as one control, not 6 boxes. */ .grid-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .grid-seg .grid-size-btn { border: none; border-right: 1px solid var(--border); border-radius: 0; } .grid-seg .grid-size-btn:last-child { border-right: none; } .grid-hint { margin-left: 10px; font-size: 11px; color: #444; } .grid-container { display: grid; grid-template-columns: repeat(var(--grid-cols), 1fr); /* Rows share the available height so the whole grid fits without scrolling. */ grid-template-rows: repeat(var(--grid-rows, 1), 1fr); gap: 4px; flex: 1; min-height: 0; } /* Whole-grid fullscreen (⛶): the wrapper (grid + playback footer bar) fills the screen so the Playback transport stays visible. Grid keeps its 1fr tracks. */ .video-grid-wrapper:fullscreen { width: 100vw; height: 100vh; background: #000; box-sizing: border-box; } .grid-fs-footer { flex-shrink: 0; min-width: 0; overflow: hidden; } .grid-cell { position: relative; background: #050505; border: 2px solid transparent; border-radius: 4px; overflow: hidden; cursor: pointer; transition: border-color 0.15s; min-height: 0; min-width: 0; /* Cells fill their grid track (rows/cols are 1fr) so the grid fits the container height — no per-cell aspect-ratio forcing overflow. */ } .grid-cell:hover { border-color: #333; } .grid-cell.selected { border-color: var(--accent); } /* Repositioning: make the whole filled tile the drag source. Without disabling drag on the inner