/* Fonts (self-hosted via @fontsource) */
/* inter-cyrillic-ext-300-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 300;
src: url(/assets/inter-cyrillic-ext-300-normal-CgCALhwJ.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-300-normal-RId2JxDB.woff) format('woff');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* inter-cyrillic-300-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 300;
src: url(/assets/inter-cyrillic-300-normal-BnqRxXuy.woff2) format('woff2'), url(/assets/inter-cyrillic-300-normal-LR1W_oT8.woff) format('woff');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* inter-greek-ext-300-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 300;
src: url(/assets/inter-greek-ext-300-normal-l2DDyC6M.woff2) format('woff2'), url(/assets/inter-greek-ext-300-normal-DLbbeei1.woff) format('woff');
unicode-range: U+1F00-1FFF;
}
/* inter-greek-300-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 300;
src: url(/assets/inter-greek-300-normal-DmGD3g_f.woff2) format('woff2'), url(/assets/inter-greek-300-normal-BrhSP0vQ.woff) format('woff');
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* inter-vietnamese-300-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 300;
src: url(/assets/inter-vietnamese-300-normal-Bdr24Bqb.woff2) format('woff2'), url(/assets/inter-vietnamese-300-normal-DDGmYYdT.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;
}
/* inter-latin-ext-300-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 300;
src: url(/assets/inter-latin-ext-300-normal-CPgO9Ksf.woff2) format('woff2'), url(/assets/inter-latin-ext-300-normal-Dp1L8vcn.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;
}
/* inter-latin-300-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 300;
src: url(/assets/inter-latin-300-normal-BVlfKGgI.woff2) format('woff2'), url(/assets/inter-latin-300-normal-i8F0SvXL.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;
}
/* inter-cyrillic-ext-400-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/assets/inter-cyrillic-ext-400-normal-BQZuk6qB.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-400-normal-DQukG94-.woff) format('woff');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* inter-cyrillic-400-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/assets/inter-cyrillic-400-normal-obahsSVq.woff2) format('woff2'), url(/assets/inter-cyrillic-400-normal-HOLc17fK.woff) format('woff');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* inter-greek-ext-400-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/assets/inter-greek-ext-400-normal-DGGRlc-M.woff2) format('woff2'), url(/assets/inter-greek-ext-400-normal-KugGGMne.woff) format('woff');
unicode-range: U+1F00-1FFF;
}
/* inter-greek-400-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/assets/inter-greek-400-normal-B4URO6DV.woff2) format('woff2'), url(/assets/inter-greek-400-normal-q2sYcFCs.woff) format('woff');
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* inter-vietnamese-400-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/assets/inter-vietnamese-400-normal-DMkecbls.woff2) format('woff2'), url(/assets/inter-vietnamese-400-normal-Bbgyi5SW.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;
}
/* inter-latin-ext-400-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/assets/inter-latin-ext-400-normal-C1nco2VV.woff2) format('woff2'), url(/assets/inter-latin-ext-400-normal-77YHD8bZ.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;
}
/* inter-latin-400-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/assets/inter-latin-400-normal-C38fXH4l.woff2) format('woff2'), url(/assets/inter-latin-400-normal-CyCys3Eg.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;
}
/* inter-cyrillic-ext-500-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(/assets/inter-cyrillic-ext-500-normal-B0yAr1jD.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-500-normal-BmqWE9Dz.woff) format('woff');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* inter-cyrillic-500-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(/assets/inter-cyrillic-500-normal-BasfLYem.woff2) format('woff2'), url(/assets/inter-cyrillic-500-normal-CxZf_p3X.woff) format('woff');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* inter-greek-ext-500-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(/assets/inter-greek-ext-500-normal-C4iEst2y.woff2) format('woff2'), url(/assets/inter-greek-ext-500-normal-2j5mBUwD.woff) format('woff');
unicode-range: U+1F00-1FFF;
}
/* inter-greek-500-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(/assets/inter-greek-500-normal-BIZE56-Y.woff2) format('woff2'), url(/assets/inter-greek-500-normal-Xzm54t5V.woff) format('woff');
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* inter-vietnamese-500-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(/assets/inter-vietnamese-500-normal-DOriooB6.woff2) format('woff2'), url(/assets/inter-vietnamese-500-normal-mJboJaSs.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;
}
/* inter-latin-ext-500-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(/assets/inter-latin-ext-500-normal-CV4jyFjo.woff2) format('woff2'), url(/assets/inter-latin-ext-500-normal-BxGbmqWO.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;
}
/* inter-latin-500-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(/assets/inter-latin-500-normal-Cerq10X2.woff2) format('woff2'), url(/assets/inter-latin-500-normal-BL9OpVg8.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;
}
/* inter-cyrillic-ext-600-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 600;
src: url(/assets/inter-cyrillic-ext-600-normal-Dfes3d0z.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-600-normal-Bcila6Z-.woff) format('woff');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* inter-cyrillic-600-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 600;
src: url(/assets/inter-cyrillic-600-normal-CWCymEST.woff2) format('woff2'), url(/assets/inter-cyrillic-600-normal-4D_pXhcN.woff) format('woff');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* inter-greek-ext-600-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 600;
src: url(/assets/inter-greek-ext-600-normal-DRtmH8MT.woff2) format('woff2'), url(/assets/inter-greek-ext-600-normal-B8X0CLgF.woff) format('woff');
unicode-range: U+1F00-1FFF;
}
/* inter-greek-600-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 600;
src: url(/assets/inter-greek-600-normal-plRanbMR.woff2) format('woff2'), url(/assets/inter-greek-600-normal-BZpKdvQh.woff) format('woff');
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* inter-vietnamese-600-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 600;
src: url(/assets/inter-vietnamese-600-normal-Cc8MFFhd.woff2) format('woff2'), url(/assets/inter-vietnamese-600-normal-BuLX-rYi.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;
}
/* inter-latin-ext-600-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 600;
src: url(/assets/inter-latin-ext-600-normal-D2bJ5OIk.woff2) format('woff2'), url(/assets/inter-latin-ext-600-normal-CIVaiw4L.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;
}
/* inter-latin-600-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 600;
src: url(/assets/inter-latin-600-normal-LgqL8muc.woff2) format('woff2'), url(/assets/inter-latin-600-normal-CiBQ2DWP.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;
}
/* inter-cyrillic-ext-700-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/assets/inter-cyrillic-ext-700-normal-BjwYoWNd.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-700-normal-LO58E6JB.woff) format('woff');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* inter-cyrillic-700-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/assets/inter-cyrillic-700-normal-CjBOestx.woff2) format('woff2'), url(/assets/inter-cyrillic-700-normal-DrXBdSj3.woff) format('woff');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* inter-greek-ext-700-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/assets/inter-greek-ext-700-normal-qfdV9bQt.woff2) format('woff2'), url(/assets/inter-greek-ext-700-normal-BoQ6DsYi.woff) format('woff');
unicode-range: U+1F00-1FFF;
}
/* inter-greek-700-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/assets/inter-greek-700-normal-C3JjAnD8.woff2) format('woff2'), url(/assets/inter-greek-700-normal-BUv2fZ6O.woff) format('woff');
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* inter-vietnamese-700-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/assets/inter-vietnamese-700-normal-DlLaEgI2.woff2) format('woff2'), url(/assets/inter-vietnamese-700-normal-BZaoP0fm.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;
}
/* inter-latin-ext-700-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/assets/inter-latin-ext-700-normal-Ca8adRJv.woff2) format('woff2'), url(/assets/inter-latin-ext-700-normal-TidjK2hL.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;
}
/* inter-latin-700-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/assets/inter-latin-700-normal-Yt3aPRUw.woff2) format('woff2'), url(/assets/inter-latin-700-normal-BLAVimhd.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;
}
/* jetbrains-mono-cyrillic-ext-400-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(data:font/woff2;base64,d09GMgABAAAAAASIABAAAAAACQQAAAQuAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbHhwoBmA/U1RBVF4AdBEICoRkhAALIAABNgIkAzoEIAWFAAeBFAwHG2oHKJ6DceNW4lJEFHn9tEOE37LNsvkjHr7f739rn3u+OSrSxLQytE91Dw2PYtNVq3Qaw/vJ7fUBMdOj/u2ImB98cT5WUx9F13ZKt06mU7tG1sAYcM26yCRX4f/0904bmwq8hwkUUMTRX61pa9C3xlpAGYw1vOu8C2SBZZFlld7DAW82RJWmwYMI1AJCKBNCIASqdZGFmtPSNQRhMpR0EKjWTwm6z6sJ+4jqhxjovTinVdRpZaQjaQzAYjI8NgAKDJCokgunCn9oUQE8VZd/F//+v6P4F1U9gLr58yNI/dJX9BAshEoJbTDogz7ocKoUsPvES8UK/aQIUQgpGgECBVLkOEV6iASTYgNAPKdNXayhDPL7IJuAZnEYSZ0eOLc9i5Rv5/+lEi3sW/kfnCf/+fTe0sxS7CKLx5erRJkKOixEqQaoqrvx5HN4iz4VhX0gS6DjFIWUzn/fIXJRVFY1NFRVNVeFt+SYmrK6vCU6eJsnKnJj5HTESMTQZOTI3Y/tzr3rUcOsiRy/ciP50s3Mycgxmhz9GMXhjzVH30ut796NHP0UUa31/Zoa6vCH6iPvdIM0IRANaT60FablmZlZd+UKNFy9NrvnFGxb5NC2CRxR0/rIyF/WNn+35sv9r+tHVhkseuWGKkCPPh96+GXt8Lc/Sh24ujfjf+tNw1lZWreiPuHb/PSpyjdv2rf/++ZE5TSKjFdZxYsBvr1sEHl5STuHZqYR7jGYGvGBBdjcaB5bODY1GAxMjsd0wDMIzXAXODRd74DxNMtO4YuYHclgLQRzp9KlUmxptCwv9bYgvWGD2xBW7r9413fdJu+mxzvzAUYeeONQvZP4kgfqZle4jhH/MWh+UbxgtJdrLdXLymNL53PRU0D3Q6FcXTfGqGcul6vrqhgLGAVSv+IVIfZOHpu+mlLqSlnj903j8mazXDsba/wbxhS/4Oubh1c5/uXDgt4j5KtnGEy5BIJHo0ur+jD+r2qCkuP1aRVM8EpUoRYSJyqNRA38uwDvHBNo0AejO2Z+ZYLLal1QiFyFh1EDQOgSCSCpjwwKU8yDbIjroEwne0G5Qca49cYp4AlqtQNZfWTQoFb1tRpFYAmRD+HXTkV4uQhG2bg4OKmyoypAsUGtWgQXyFxYrkpODeUxvGqIZA61erXo0sFG1UBGuPgpuon8RNUG2DhovAjZCBuZwtXrU3mQGki9+pm0eVZAXoWxLWTQoYHBPrJR4WunNxIFbCHfkTyPK+sqxjxDmGArZvf79JGJ3GwEqjwc7a7NIrl/7bJ7Nzu4+n1Ow6shEPnUrtVo7cnd5Wi5qCUbBIQbNKCP95FMCSZylEV5VCiiMqqiOmrKZ/I/C0gI1fyuulVcM2E1r4MhtcV/fbCD+HwEvVzH1dGNAzFE0FTbKzyQz3gootrNbN2a4PuG0j0JOgE=) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAAbUAA8AAAAACOgAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABWAAAABgAAAAcABQABEdQT1MAAAFwAAAAHgAAAB5EdEx1R1NVQgAAAZAAAAAnAAAAKLj8uOpPUy8yAAABuAAAAFEAAABgFwRca1NUQVQAAAIMAAAARgAAAF7mY9MfY21hcAAAAlQAAABRAAAAdAyHCodnYXNwAAACqAAAAAgAAAAIAAAAEGdseWYAAAKwAAAB6QAAAl7g5OpvaGVhZAAABJwAAAA2AAAANhSQ8UNoaGVhAAAE1AAAAB8AAAAkAcoBImhtdHgAAAT0AAAAHgAAADofBAM2bG9jYQAABRQAAAAgAAAAIATcBZ9tYXhwAAAFNAAAABwAAAAgAIcCb25hbWUAAAVQAAABEgAAAoA4pV3kcG9zdAAABmQAAABwAAAAlNdzMTB42mNgZGBg4GGAAEYgZAWTjCAeAAG0ABkAAQAAAAoAHAAcAAFERkxUAAgABAAAAAD//wAAAAAAAHjaY2BkYGDgYlADQiYXN58QBqGcxJI8Bj4GEGABEf//g0gAWkkFVQB42mNgYYpinMDAysDA1MUUwcDA4A2hGeMYjBgdgKIMDJwMUMDEzoAEvJyAxAEGXpaXzH/+XWFgYP7DqKPAwDj//nWgSjWmW0BZBQZWABNDDdYAAAB42kXIIQIBARQFwHl/QQIkWXInUAANXMOBJCcTd+KIGCjMNViq9/H0CM6P/S0j0bOwUqh08iEb8kPTXn3RiMoYhD90Nwc3AAB42lXIRwHCQBAF0JceehWAlTjhjikUgAVQA4mJLbdk5neUqHBVKWSv3XF2VCnt3AyevkVZv+sxBBbbq/6HfFP4hEcYQgEK82v1aHQ5RTs3FRQAAAAAAQAB//8AD3jabZA1tNRAFEDfTGDdfXHI2QQnZJJvK5ngDs13Welwt/78CtcS7xvcrcHKbXCtceh+wgtu437nXRCgC4BY9AGOXOAFYNHR0dzoKCGju8gJ6xiZaF3DWqcPBiSV5i2geaCgAlAJ77ghgjfiLC7KojvOZEmSXS63emXr5W7lsTLtXFMkRmks4ly+cYOEnvO2YLDNANv+9oJwhkpAAJAcHPG/1RC2BERc1ZGGMxYVWDyVSjc0NMaZELUf9e4JhCgNB3b2PiJRctuqZ0WPR8zilxutN/ji97vUBYMAnGjtzxjtK3wrDaMABo+R9KjWwNRUMppwuWS1QdfFZCIlMF2TxDGuJJlYW7OmVlvD+sx86b1hvC/l8yXf2hqZ66xbZ80yWzyD9/fzGaRzA58+nSOzYC+gw9AP+vyNqUAUhoD4lSnputbgUFPJ5O9Y+ReWlxkrc96naX08b3zk/KORb+E+VjYPmH1M6+UHeVlDtCzzGZ9FY8YMA8gPMsQA0jqaGkHT6cYSdVwl7Zs9Wzx+DyWUugPujd03T52ikrUvM26kF9PIcRmycuDBKcd3XRhPDgtnQACINzJ3fVl1tTB++3bc2S7kyD3cCQIQNMcSKaY2YOciE+d0zFbGjps6u0PILTFlRZHNJfAFnfeHtgAAAAABAAAAAjYEro52gl8PPPUAAwPoAAAAANvSppoAAAAA29rQ8vk5/tQEkgP8AAAABgACAAAAAAAAeNpjYGRgYP7z7woDA8uGn5Z/+1kmAUVQAR8Ar8AG6gB42mOKYIgCYiMkrAzCUHEbJJoBikHgCkMPAPDwCFUAAAAAABoAOwBGAFEAbwB3AKkAsQDmAQkBCQEJAQkBFgEveNpjYGRgYOBn3MGQx7CFgQ3MQwBmBiYALRoB+HjajJADbgVQEEXPZ20bQW3bthvXbr8Vp4to1KV0AV1Wb9JvZzJvzhvcB6CQL0wYzHnAj6E/yAYaDeVBNlJsMAfZxCy/QTbTy3eQLdTzGWQr3VwGuZhx2v/ZAIVUB9kc0TSUKJ8f5FIRHGPjnWs+2MKt+MYzt1xwr/jIk3JymR0X0wzIXKo7VbXjFvfLn3lTtCn7qPoB6+yyzb3qy8pdq/6hrj11fMj7OFbtEY+mrlU/516rVFCdVobplw/JEjVaCaqIYlUiUzOaW9aa/Q1idmlPXZHbCagW/B10XwaRi06VuVdMf+9DnIov6rlF8yzhUXxC/4c66Uz48UepqEN9N/Tzt2RwjOljsUUfj581AbaEXsIAAHjaY2BiAIP/qQxGQIqRAR3wA7EKw0lGJgYbRmZGFkZWRjZGdgZmRg5GTkYuRm42x6Si1LJU9tK8TAMTR1cI7WoB5btB+Zas6Ym5uYlgnoGjAZNzEF9icmlJanJ+bpJecmJxKg9IxtjADMwBAKDtHJg=) format('woff');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* jetbrains-mono-cyrillic-400-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/assets/jetbrains-mono-cyrillic-400-normal-BEIGL1Tu.woff2) format('woff2'), url(/assets/jetbrains-mono-cyrillic-400-normal-ugxPyKxw.woff) format('woff');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* jetbrains-mono-greek-400-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/assets/jetbrains-mono-greek-400-normal-C190GLew.woff2) format('woff2'), url(/assets/jetbrains-mono-greek-400-normal-B9oWc5Lo.woff) format('woff');
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* jetbrains-mono-vietnamese-400-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(data:font/woff2;base64,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) format('woff2'), url(/assets/jetbrains-mono-vietnamese-400-normal-CqNFfHCs.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;
}
/* jetbrains-mono-latin-ext-400-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/assets/jetbrains-mono-latin-ext-400-normal-Bc8Ftmh3.woff2) format('woff2'), url(/assets/jetbrains-mono-latin-ext-400-normal-fXTG6kC5.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;
}
/* jetbrains-mono-latin-400-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/assets/jetbrains-mono-latin-400-normal-V6pRDFza.woff2) format('woff2'), url(/assets/jetbrains-mono-latin-400-normal-6-qcROiO.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;
}
/* jetbrains-mono-cyrillic-ext-500-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(data:font/woff2;base64,d09GMgABAAAAAASUABAAAAAACRAAAAQ3AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbHhwoBmA/U1RBVEwAdBEICoRkg3oLIAABNgIkAzoEIAWFHgeBFAwHG3AHKB4HzukrRjyF5Gb4kQ/B873d17mv8TWkoqUUGaHodJCtoqntw7m8tiPWyGkfWDU/IMpzVk4zAs9Czv3c7Os5NvKFG1Ht9vBVXySRZpJc4tTrbM3sTRFcLa3zVboKWRIoAksKSKgqUQWEwlSoqjp44V5J9/kjd0+Fi5xaFjwJArgBAIJgIAgCCAI4CdNMqGuYXYUKdADLAkAAJwl6iX0+bZqEm1AH0Hu9rvrJHwxQG1Q/gFYwWYbgTRWgwEESVzbmtjQAt3DXO7Tu/+9Q/KNKWhTCgZ8fQSWoL0CUUgTBjgL8iEAcce7YHBeA8ZvogieCnxI0BCVeACCAAhBD/oDcAdUPABSgAX4kBPBTwjCAjwYSCneiqF65LUo/qXdYFrRwTujtMrKm07plTbSqLQFAiHBN7E4DG5wkiGXhCYBNETh3K/AciHN69iFfQjFOr9EXQQAAQXRNszs8PR0OH4fDV/dwGe76CHdj1MQa11DXYGcfZ6+B1X0OfwjY+i7KpQ1w9d+1z3/HydCB1f3U8A0fRFv+0bXxPWrZu3d9Nn4UcbLs/QCXLH/j3PCKblKOiZxLOR78W9brPo7eGTLz/F27ZPmePQdCB1YP4nJU91o4gU9cy64L3c3SPu8GfDn6ZXD2cGmllVqSxtD5vCXHm5xaeHlnpffx7DcPvXog5NnjA//cPz2btsz3yf+0MI8ri33tuv7upNbYmW5STbosW8bYItV/SPzxvXC0KnpWnFdC91oojit5Lyo6WcJQ1YzwBYbi52ohJVpcxfcHBqsv0nFz8U74rzS6M7r0RVlXZ3jJC4G92O//7Lm78VOtnUx+aQxAzsqPnrRr1t9zDrezKePvZ027x+fGte4s4NXu7/jEp3G9cM1bICYgACbuETUUD5wmenGXA/IBpAKVrl0AEJ5cqr6Q89tGq+SpqkDfX2DtG+pZ9teuae0AX98c301CX179InyErnSG8WCiABB4HFbVrw/lpTdBIOk82nXbpHKoQGyBpUovAAD4XQA8ZTUCeBJHIpI0v0FRrgcnckV3ANckrwYJKXEihQfdSKPER6XeExmEeEMmSe6QBwWmkZdmSOSthhibgIkBlUYreBKd/0NeVAE9WAyEaQpH6KikDWlUVg43Jy2FOmaYlsZhDEGZXO3mWEyWHI6zuaJkMlcSQ9k4F+KidIiFyZItGDc7r1pUj6wP6zrWB0/fbeeFeHl4YOvETMNiM8Ny+7OO6Qh2wur20YVxFts5dlORdl5Kwd5utR7SRcxqX8RA5Ehacha76hg7c6yzNm/Xf6vOLNrv544lIEkWg7xWo/ItBAeIJEmt0XgBwgM8gTifoiiLJroYYooNTeziEKe4zOoR/wvIKp89hSr+6jFAqw/LaonjmZHSscMNg4iPlWpFrO1RN3zkMU+/xUP+JQ99TbvTl1Vg0gtirT6lbwYAAAA=) format('woff2'), url(data:font/woff;base64,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) format('woff');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* jetbrains-mono-cyrillic-500-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(/assets/jetbrains-mono-cyrillic-500-normal-DmUKJPL_.woff2) format('woff2'), url(/assets/jetbrains-mono-cyrillic-500-normal-DJqRU3vO.woff) format('woff');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* jetbrains-mono-greek-500-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(/assets/jetbrains-mono-greek-500-normal-JpySY46c.woff2) format('woff2'), url(/assets/jetbrains-mono-greek-500-normal-D7SFKleX.woff) format('woff');
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* jetbrains-mono-vietnamese-500-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(data:font/woff2;base64,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) format('woff2'), url(/assets/jetbrains-mono-vietnamese-500-normal-DNRqzVM1.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;
}
/* jetbrains-mono-latin-ext-500-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(/assets/jetbrains-mono-latin-ext-500-normal-Cut-4mMH.woff2) format('woff2'), url(/assets/jetbrains-mono-latin-ext-500-normal-ckzbgY84.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;
}
/* jetbrains-mono-latin-500-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(/assets/jetbrains-mono-latin-500-normal-BWZEU5yA.woff2) format('woff2'), url(/assets/jetbrains-mono-latin-500-normal-CJOVTJB7.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;
}
/* jetbrains-mono-cyrillic-ext-600-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 600;
src: url(data:font/woff2;base64,d09GMgABAAAAAASIABAAAAAACQAAAAQtAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbHhwoBmA/U1RBVDYAdBEICoRkg3gLIAABNgIkAzoEIAWFIgeBFAwHG1wHKI7DuPEacDIiFJ/g+f47+1/7dIcdXTlD8DKqmcw4eIC+AOCPf6+qiWq3h6+aSCLNJDnkqX9Xl+rv/6dSBcwSBCzEoVqxNbp5SqPMYdKBQhBq1dK9ggSsgYUoGnHOqttMECvWjIJfPA8cjQAuAEAQLAiClASc7M6OkfbO/nHs6ACmCYBxZXKP4s9uXIHECh4AdEhX0yIHC6jzgAb65sshStMMChwEfWVjZe8Anset/6H93x8jOyL5fuS67z4Dlam+BPyH/pV2FLCZAOnU0XPzCQGiJ7AkXgSFhqDEB4AAoAAN2ExDgM10joCNfDQUbvxaXM8LovT79D9MEyYU9+q/myT9p/m8uWi2mLJBPbzcih2wYIPzBDFNvABt315OXwy8BaRnbo5hXsOS5taknX4FguiaZnd4vQ7HxnBnm3SPYXHrQbclvOgyDhsHnZPO8f3G5I2fbr34Y7+hzRozVzyw5bKHdu03plXgvE9FO/Uz4/xPUKd8/PHk+R+JODnlg1lDTv3Qed77zDNqRszaqHUQT248kUPGzBXXXHGFnHrVVdft2m8c4PhpjB+/QEqMU54xruc6m3w8++XNXx4sya9rMvNq88m6X1zeOMlRuQ+/nvNw4+ZrCt58yDdSVOQdfoi/jc/ePfZY+1taYaH21FH2Y4fGG+RVNJkIN4SSiWj3ZKGG1oojoYr2SNWFVbHvY1XX1PR+H6y+oKrqgmryqj1UXnmk5cKWysPM3R4Uh5svYo6saAtU3V297+d91U/X/frzLvUdqiqfruKvhx5+OeOYxbHI7SenQum+PTw/fvRLGQ/jiufOn3/S+vlsfGn9h4Zb96fekZ7xRups68FhVCYCWHHvZVIPxjanr3NABSALqkR7FMBOulF9ScHvV3np+6pK/eEzRx877K3/z65pvwN89eGtV3Ly5ft/25ngaiSYDVYUAAKvIKimMdLO6YBQEY+aZpbXZ5WinTBQXwAA4LMAXuNUBPCSTmMfjd6jpNLNjbToDuBpaR9AoTBbUeERO2o0erNeR6KFne5HK/nOQA+VBtFnt1LtBj6pJQIutnLwipz/Ix9OYNSqZQEreiQELIkKmRIRNWdewpiIZVGtVi0J6xWR0ComIGpFnN+AVStWzUtIWBNXq0iRuJCYqDUJcYXiopYUWhUzp8iQTv20dtO84Agw6YrhuOijfqUKlSpRAruvTq9WdeQw2vs5SUsCYhdt7icIt1nNkseKPZzgV6q4FfYbH4ZIBcThYTEgLIgIkYRbJLl7/rks+ObZDxydE8W9LymoUMiqZUVbtVv0GNkcispQM0IpEG7sBdK9IYr6aKKLRaxiQxO7OMQphrUlGIscFbElV6LF5S0dQN5RbRoUdRbWWOYCy8sB83RxS7FqG/UEQslE5Nsd5v93uF3T0bLiypD/uJhn3q9fCAA=) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAAbAAA8AAAAACKAAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABWAAAABgAAAAcABQABEdQT1MAAAFwAAAAHgAAAB5EdEx1R1NVQgAAAZAAAAAnAAAAKLj8uOpPUy8yAAABuAAAAFAAAABgF8xca1NUQVQAAAIIAAAAMQAAADbkK8oAY21hcAAAAjwAAABRAAAAdAyHCodnYXNwAAACkAAAAAgAAAAIAAAAEGdseWYAAAKYAAAB8gAAAl6l3qsraGVhZAAABIwAAAA2AAAANhSS8UNoaGVhAAAExAAAAB8AAAAkAcwBB2htdHgAAATkAAAAHwAAADoe+QK+bG9jYQAABQQAAAAgAAAAIATcBZ9tYXhwAAAFJAAAABwAAAAgAIcCb25hbWUAAAVAAAABEAAAAl4y3VjQcG9zdAAABlAAAABwAAAAlNdzMTB42mNgZGBg4GGAAEYgZAWTjCAeAAG0ABkAAQAAAAoAHAAcAAFERkxUAAgABAAAAAD//wAAAAAAAHjaY2BkYGDgYlADQiYXN58QBqGcxJI8Bj4GEGABEf//g0gAWkkFVQB42mNgYYpiimBgZWBg6gLSDAzeEJoxjsGI0QEoysDAyQAFTOwMSMDLCUgcYOBlecn8598VBgbmP4w6CgyM8+9fB6pUY7oFlFVgYAUA/6gNn3jaY2AEQg4GJgYGBhEGRiCpwsBUnp5RAmJmliTmMPIzMAJlmUEkowADCAClAG7/A9gAAAB42lXIRwHCQBAF0JceehWAlTjhjikUgAVQA4mJLbdk5neUqHBVKWSv3XF2VCnt3AyevkVZv+sxBBbbq/6HfFP4hEcYQgEK82v1aHQ5RTs3FRQAAAAAAQAB//8AD3jabdA1mNRAFADgNzOQrO9m9dzCJecWmXX7jgZ3dz9pcLcaaXGnQxq8wt1dGhxqvLqEWVxu3P/5HhAYA4AM/ISNOLACKEK5UFkuIFQ+Bu01dqM64xSr9/CTLqkFxwzAMcAgA+BmdocHD4DiU3yiLPI+RZYkmeN4+cTGEwtqL9WktjU4BEI8jtzlI0dQ4Ko6xOMZrIJpfn+BHMUSIAAmO0u6W3WxFkEBW00yjc0UgSi+YDCk69SnEOH9o8VLnIwQHAsXP0J2dNP4UqS63WoRshrNxifT/HkXc9ADAAj0Nz9jO37F3gpBGUDPCkkTVF1pCQYEP8fJLbqmiQF/kCiaKokVXADVtS1Y0Na2QJ/Wm0aeRaPPIpRGbPOnocTU+fOnGmezk/UZSTpnDk2ivlPCiUSYmfVmP1yLJWZa/zCbQGC/Eb+Zkqapek4NBgJ/svJvtnUapdNav7c09ioefxWjetymTc6sy0zStEnp9ZnJ2pREuLQ0nHhbSBMJCuinDF6AkMYiVYJDIZrEuVgF3p9f1MnbLRhhzNv5toXnDh/GkrE/WF1mtdmsZdUBNLzryWEABBdJDTpIjgIB8FGFv9i2Yg6pWbuW7awmInrIdpwAiEVO8QeVFp11HKrrN3Fsba/K+jETiDg4W1FTU5EdDF8BJQaE9AAAAAEAAAACNgQzGROsXw889QADA+gAAAAA29KmmgAAAADb2tDy+Tv+1ASSA/wAAAAGAAIAAAAAAAB42mNgZGBg/vPvCgMDy4af1n9LWCYBRVABHwCttwbRAHjaY4pgiAJidSQsBcW+QKyLRDNAMQgcZ2gEAOKlB9IAAAAAGgA7AEYAUQBvAHcAqQCxAOYBCQEJAQkBCQEWAS942mNgZGBg4GfcwZDHsIWBDcxDAGYGJgAtGgH4eNqVkANuhVEQhb/aCMqgCGrbtt342faL0aiL6Eq6lK6gq+hJqmfkZnK+e+bM/ACaeKWKiuoG4L2i+4crmOTzhytp5eOHq9jk7YerUzI19PLyw7WM8/zDrSwy+M0V0EznD7eJG3+4XQS3+PFixMcJEakHJ2aesErtOOSpdAKEWWWKKamZkLoBIuJJwmKP1C/Xrv4Vh5xzilX9XXlG9X1KXSjhU01wp55X7q5uHiw86h5Ce1CCfmaZVM3o/NMap8qvlbX3Vnc7UbFR+ezJ/r/Z/qzZPWmAJKG//6D3YhqV6F6OVVp45zUhqUsZM5pnh6jUIS+Ekgxn/Vs7TpRQzsQkZiW9crOfMlXgP4x8AWVxW9542mNgYgCD/6kMRkCKkQEd8AOxCsNJRiYGG0ZmRhZGVkY2RnYGZkYORk5GLkZuNsekotSyVPbSvEwDE0dXCO1qAeW7QfmWrOmJubmJYJ6BowGTcxBfYnJpSWpyfm6SXnJicSoPSMbYwAzMAQCg7RyY) format('woff');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* jetbrains-mono-cyrillic-600-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 600;
src: url(/assets/jetbrains-mono-cyrillic-600-normal-EVf6-Yzo.woff2) format('woff2'), url(/assets/jetbrains-mono-cyrillic-600-normal-8K4wrrwR.woff) format('woff');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* jetbrains-mono-greek-600-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 600;
src: url(/assets/jetbrains-mono-greek-600-normal-H7WoG9Et.woff2) format('woff2'), url(/assets/jetbrains-mono-greek-600-normal-mc2nkWzM.woff) format('woff');
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* jetbrains-mono-vietnamese-600-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 600;
src: url(data:font/woff2;base64,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) format('woff2'), url(/assets/jetbrains-mono-vietnamese-600-normal-OWROknRo.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;
}
/* jetbrains-mono-latin-ext-600-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 600;
src: url(/assets/jetbrains-mono-latin-ext-600-normal-BfB_LPfz.woff2) format('woff2'), url(/assets/jetbrains-mono-latin-ext-600-normal-DObL3zCW.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;
}
/* jetbrains-mono-latin-600-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 600;
src: url(/assets/jetbrains-mono-latin-600-normal-C8RAYTDA.woff2) format('woff2'), url(/assets/jetbrains-mono-latin-600-normal-BfsvjouI.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;
}
/* jetbrains-mono-cyrillic-ext-700-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(data:font/woff2;base64,d09GMgABAAAAAASAABAAAAAACNgAAAQlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbHhwoBmA/U1RBVEwAdBEICoRkg3gLIAABNgIkAzoEIAWEaAeBFAwHGzgHSJ4DbjN9OmtkIy0becnT/RjJ4uGfw99974/GXrhoTCqLok66NY3jTloEUdrmwCevn/Ls30xSpFlZ6UJMrW+fTNwAEdSuvSzCRANvEgnjUmw8swT+87+w7I/7qb8XlIB7NpGBjXiUjRX0b7ZpJ8+orRLzvGhWYCMdAU3BbRdPuqOeKAXuRKAWEEJJCIEQqNbLD9osq2kBviL8A4Fq4yLgAa+6DNaiAwcYOrqYHfgQcMgL3AFgG4fHHqREEUBSxUtmBfzNWxXADfviy8Kff7dA4QfFBQG6fnoX5Dh+gEEcIVRKtMIYhc/kCgsCDiarQY4QWpEKQoYTAAIJUcaHAHIXIN9BooBWhEAr0j7QzAkh1RnEWOY4wuRW8uX/f5o5W8gXcjriOUb9z/wjACRuWaWrpKIyLMQ/DUDN/TT+ErgHRpPBIRQrKCcZCvxBBCBEkSD4lKMjRblQlCvpQHPsSZE9R6K2o/vpXkGboKWbbltxx2feLT+a6KJb5293n7vTt53uwOzUO4gYc5eedhvS+a1bbdNuIiSA89cuGo25IZh6DXrJJIIUUibFUG0zt+ijO+cvnj8fjVm4cKlvN90DwzrdMmy8H9GjDyv90Xz2W10PVj3oTY7LLfwfmxMHoef+8n33R0duOxF3LPCYFXtymWNdcLBD3VF4S91+GWf8c9k7sZC6fPpnbENnCmayerBNki0ZbFUXiHV/wkxWklGmydCkaR5o0oZnlj3oSVdnZKjTITaXStOyWGYakzUgTSt1gvSs/otJL1FkzE/3e+aXvj7n+TOv9HkZ6evS4e3OXafCx8iqJfNGpQLM7rkt0ppRJ8N3gd1IjHLaROM0cLkhdf2NQjZ4bmjo2mBWKJ4CPA4IZXX9hFlPBnhxWhXzgBGQ88QeRD3j1/AD5a/JxMnL5gK5deaC2H7HvK98gngBbzfWLKD0g2ufeA7nMsQepBwDgpdhy90BzC+8DSCers8O6KKloYn0RCtKo9EM9LsAd7AgNBhFGEAsvl4K1LpCiCIF3IZHFUKvX5AqfUPBgkO+ovHpUNJtOJSN6hDWWxAigkCt9hbEXdaOHLvI6lM5gQA79LRYOpUsWBpKYu2klOQULGlGCwOzHIkSmYmZKBlQrlmCQ0mDv5SeiVyiemVqVJGyEDJhKemY1dLT0YsnpKch0UbKxExJTydIigQpkiUvYA3SVFDqFH2uNggh343VmPs2ycX0DIYwPYTigMak5AjS0ohI8zmoo4EJwypS4iVcDOuDuvRMgytHPa5LTjnoc1YiCcT0tBI3qjXxqqFomJf2PylAOHMDRp1HGBaDQCTiIC7iQSH4iEICRHMZkUlqk/KsOmVSGlOK7NIseRNZFp3NkbNaLateTmKScHGTAyu2WqQf6lD8rMNg1+lKTcpwkfvQ/7eRMwAA) format('woff2'), url(data:font/woff;base64,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) format('woff');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* jetbrains-mono-cyrillic-700-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/assets/jetbrains-mono-cyrillic-700-normal-BWTpRfYl.woff2) format('woff2'), url(/assets/jetbrains-mono-cyrillic-700-normal-CEoEElIJ.woff) format('woff');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* jetbrains-mono-greek-700-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/assets/jetbrains-mono-greek-700-normal-C6CZE3T8.woff2) format('woff2'), url(/assets/jetbrains-mono-greek-700-normal-DEigVDxa.woff) format('woff');
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* jetbrains-mono-vietnamese-700-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(data:font/woff2;base64,d09GMgABAAAAAA+YABAAAAAALJQAAA84AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGnAbhXAcghYGYD9TVEFUTACDBBEICrA8p1ILgjgAATYCJAOEKAQgBYRoB4xODAcb3iVFRoaNAwho/vmJoixsfqj4v07g5OqncaqIUAYqEI6gCkZ0qK4wEp3O9K+ySRaPPWftnd0mjZ8MzaNUaT+LsTAfnt9Wf+57KJFiNgZKlNHoICIwI21jYAViwejIjPZsu9HtRqQ77o8Mg+c/7tNzXzaRbQGM7gKhXRPOFLQiNdiAagUv6MdINrw+CRbhCE4hLJogyLSeshN+VfZv5VL37H77gu4BKGHwW0dphEhUGp7GwmyG25Sd6RBu5KJfsOTNfCWUAfB19+PmRqWEQqiWGEn0j5jlvf3H/82VdmZ/psCo0P8iGd/ns5PZJHNZaHmxwLjtAeWugApQATsgkmXNkhyjrpK1usLr8vD90V5b7skee5GGy7ZRGGe7LuOFEX8C/Wam5iygbneagmmYgiiqXH2XJK/cPwoEwAMAAEWEECHEEhHJUhHppIhiWkSJckQlI6KZDeHgQnj0IwZMIKbMIBYsoAWF0Jatom3YRiMAjhwq1OE0OyB43IEJCDAAOAmAzKQqsADEYmi+jAgWUtf5lSpVPIM1Nn604UB+8+kcMZwH72OOZ7davZk9tJtVRIsSnvNE9OrEH4KBFbrHbRCqNAG9QZJRZx4JZOWpDpoASo9SQw/gKVmLUOG9GwEgggRIhnxQghb0YAILtB2vjwDQBfAAbBBOgDCDGsrXAsoFuCJEIsjOMrlKUYcQBAlIVIQojHc9ABPGya9gqHNSXCJMDlD3Z3wKAuLiUQC0SEPMzAT4UyMBlBQcNCIHcR+AACLQAGIXIUYADBTKeavwOZyQYKGMYIZzX7A6ZNOWbXvWQMXMzK2SH/na6PFMLAmFmBY26NyXnbMijFGe2SsCqPfxBDR7eyenVKkNFLCda82A0wDKIU07AHfgj7/04fGV/XmSogPk478PtZwDkCECWWYIiAHJmeT1DgUIgH+Km4QIQcRgZFyeiihY1OngXWovUMdA/fNKcMMQjXghRqasR8zAwMDH169zhzfQJEqBYXd6YiE0g2bT2ft/Mx4+Ke0hKCKSb8gdHl9AnyULcMdjfjia13+zDnocBY9C7g66gB//BI6fJEWaDFlyAEBW+x9YgFZJpEkqF60JEt3khixYIdBIyIhNj6sBzyl8Bhz1GKpEqsFUi6VOhGrxzkjQIpGNWLMYFrGs4pwWzSyFUzKHHJ1ydUnnkalNlnbZOmRolcerQK9CfaT65etRbIDMIIVhKqPUxmiMUxpRalqJKWX8ys0gSNMGAG4GgKwCOoDxChGfMH6g+wEAjWrgVNWR6HK6JmKmSqMyAnp89GkbFlUvxHn9DBRSJkbJ0WO3bZpmsWFBLpPLlUFplsvJC71sAwTtTKa/ewc0gsrMnTccBDHoBgVfgvuFQAl01Npfijtuu2KxaV/sineuGHfjbJgPBiYcfeYkYs9WM01qZv/3+L2fajEo5gznhondV80YlkzdVH02jAjOYSmcqhjohBj9veu6vAd5supT4jsmdnxiYCKE3dpEmKOqu8w5Y56a38bfFjPXHJbTiukP33yJU85ikrZ7dY8UV9XnvSYbERMVfbG1/4mgp4EtarXUHun+zExY6HhGihCEK2aBGSSICBmMlU68XuvHPfmG6FUGYVCEAL8mvYgQyDvlRLttv/PGjL3k1wdr1zVo6ullSK+O5c85/L1Tzbd8ictJGCTir/jjf3onzjNYWBMJtX2OmDHtcybOYVLNkk9/hdYy+Nbc0qHV5aIeAypuMcjzee9Gk3yrPYM+/gMOqjAUWA8kv7LHPCmhDCYPubjOkJvrCCWtPVSvIRpqtlC9mD550fHy8lxurkM2XTQzDK2/noSvs1zSDTGVD80yI1EMHnVzHd5F8FXUe/gUZzB1BZMYGk7XOdnjWA9XmR4nJPJFREI1169CzIvjJCE/kj4ID0/l3n7uvvs427vpF3n23ntXdbqFoJBIY3QZ8qMcTudTbju456BTWVRRcyItL0L285fufOHSSt4Tb17dFdVxu9K37hBaMzMF1tfANroT3N8aDy6ZxkoqfIaoUxUDY6Wmdn+H7lAbpTnUdcBz8Nx4xasJYwnfVoyjbeKa42sm7ml3BSnbMKDRefXV+kI9BQyNvr7MdTXE97szrtapqzVatVqrqVYbsDrgzI0Si5oHLDpDTfna1PNfQcoeXQj4OMtsTZlK2aRhL3N88wG8sOpUDTrXdy9XHvKP7G8+vzB9+EmivIb9ycTheekRZONPbGdPq7ll1N23Jc+vLC6wW4Msy2J7ty/Q75pd9MaUV7U2ZnZq9Vpp/Ybk+5w8Mw7Ztt5pb2tPz7S9wWqu30ulz3+7dBAcTtmrt5rjRxWlaqu6VKHI01g1eYxPHf0OFLENg9pSb912Xan3Nmg4NdDd+D57XnmwpLByNMQ3BB3RDWllHTrdUlnszwjM/tfr759Of+YhP6Qsw4Cm1Kvf1JduDik1t8DRdkwlH2lT61MpZ7Wbmjks7jmV20B85NSCWX/n+RshZQ/PB3yuJae2VCE3ap1LLt9iAKaPW5fa1N8UFv5S3TZqfuqflTH6Z/y9fdN+3Pu0+YuPmVu+hDlhrabBOce57oRV1iUcKm29k94sb8+kvcFq0a8Ru+1y/3NZx/sdv/qvUqJKUEmUilx1gjq36GqHyoE7wplzmV1MVgs8K0vuD2lY8lzd4TkJnSLiVmd2tkd28Mbq8M769A6GVjd3Ao1/odl4vhaQnrV6W/Q9mfdnZ9+f2aPvbsH0Snrvjb0iPkRJlkzlxWKpsOBYlHKlZ3Fu1+vx4j+ryV/wolPPmIelbZLMUgukP5E8l5mVlmaFkqLzs3O2kKXd8rY3omYKcwrzsgvLRSOvKSwHit/KsnaXGa9f5vhsSRlk0ZXl8xNek/b7n3HFqVZLt/yW3PSy4vJQ0nOn+0xVXcmf5hV8mtxVJWzO5Vv+9UBw/X6u4Fawbv5TWNt671Me50OB3uQsDmULH72ZrcwVtvSM35H8miTvs+SOKjoV1r3p9pvsIj6EqZZU+Q2yDPt2ffS0lAxLinwTt/97dmd5aecR/7wLLTYZm/yf/zscaG1x54eHuu/fv3udw/2NoKHZIQ/lCp5LU3RLPXI8rUm3XWcbK0+8JT6XbaOlUGqiJc6ufUz/vQuu2RgMBCYDjcFGe2OVM0WRVZV5JsVRZWs0QvQV794PpQ96AxOeAIRPzyUssDi8Rn1fdleK8MVgnGnY5mZd4NWYykucsffEW+PviXWWNJXXFq6lPnySirw/8SItkVJlUdrNJ1p67Ewk/n1jKHBuKvBIcKo7S1FvBALLY4HP+J0k/X1k8EGuKLbhVHtBXDb/oeuvv7dzJeb16auT9a9aGxx+7soMkrp/LFASEEAXq2lCoXUAuYYUENs6NFnCHLwb91rg6/D1Ca/Z4BvwjeymGaJ0GrGHFYjwUG1FheNen0CJ8sVwK7gB+Mak3BSFt6yNICTZwpGUfUvElQ4knJaPkqaTAZyG0wSyhzlGKpDYVmMglALZL3xn5K9IHP9SijyAwV75a07ALVV45EHN2PEzLFfkDIYAuuxhjmGAdVgHFbalCPTfASxlxIob1tgugvBl+HJyBTEPZyNs8JX4qnm4GlHWCsUz2TsYiskDGMAmZooiCq/AMrX3WmJRDEssC71DpNi1YDx3Vg4obg9HMIDdzD3LKB3QbQvFsFAK5Ax+N2NUluV/KT4PYDAM2UJi5Az/oyCC3+osjNE/YJlODushjAclp0Wcn+2zr7BF3He1Pqn54dG/jv58cvufjv+//BcAZkBp6ec8cpjmJF2cNRLaULMyVm2YZacOIr+BJ5p6qIB5mIezV6BSySV69tn/EtqoHTkOkrZMORbkRMh4sjk1UhEXOThDNVlXdaJ+wdY+LHWUzPMWsgts3/NSdO0HLKDCa2QX2D68REUyXu2vow6QCVDhAttXQUsjfDoK9Kr46aIA24OnF9+lV1k2Ekf+KvpR94uqTpSCItUwRFMDFTMDM3BIMTSVCsEulBbTsTD7ZbTYywywahmLhJgzDEbljIq8ajpqETW1Imoeqw7Fonkx+SVo5sg9RkeRbNQua2DVEEv5UqIOqCgJiFmFC6xaxdUQQOkY9m9t33cLK//JounfAPx9ed9NOPeDz/8GzknULn0IgkhQAAJ8CTywPOAcZZMOwVm+hWWb07CyKad+PXVq+5uNTt3iG0YpNdavoU7mhmFoEM11k2CcvxHwxAHuxpsYxhJWsIKPcYBxOeOytbjPv1QZDIPft7zfHQHcrBhDCy9KgCyagjzX+VO02QD2EleXJ1L8rzyF5W/laTp73RgkBuUjJDlbPlIOjxREKVkxJKESZyORxu2IMMg4UuQfDrCZNK7HhCYBr9oxw/q4+QYNGhJw1KryKTPKyQ83o4/fsCkBM2QIDBtjORmSg6pqTzMwM/GV1vPrkRPa0haTJmQx7W3SmH4uPn4THn5WGVRkVJSUe18GZciYPkpW1Jbenb3Uuhd9IlmPYVMW+beC52gpnEAGh0x9s5Hr3PoMf30c4dNnsq0zu6XbSX798/zt3Q4a1q1n9e67fa/PK3mqd+WLPRSgnMs9QQUg/gluBuT4AEVowiARJJIwCYuwCYdwCY/wiYAIkR+RKGLRYsSKE19REiRKSpVkKVKlSZchU5ZsOXJJ5FWafAUKSRUpJiOnqDJKKmqaGqKlU6JUmXIVKlWpVqNWHQJj9Oo1OMWgkVFT+0yambPFwuq0M1rY2Dk4ubh5tOZJm3YdOnXp5tWjt4706eczEJ1BQ4aNGDVm3IRJU6b5zQiYNWfegkVBIWctWXbOirDV512was26DZu2bNtxca0bHMaXcXzezJHX3kuGg3DQgmZxkgYvcOSGh23/NFj4ueUA4aDJSDpssvpMRk+n+Wo0RsbVQMJoY9QGnfrwebY9bDShBz6WDT/30EO3PPy0qFHIQaKl+xafPvqc8G9Co9//BbLR2+fel4z6L4qEgBCsAY6gGKhhEsncCkBIsGQUEy5Z86Wi+asBUQhGcMVJuGUQTgJhxSI8UxDDlSTRuYRFf0TV6k8INXywb8Fou5mKewIlT0U69vFXRR7T/eH55NcVfcwTnh7vIXxO87PtdtkfbOMPudH29CdL1b76OJVfKzkETa23NlID/Vyyh32eD0HaB0WeEl85A0PlLU3DkD1ZS6cTFwkYYsUIxRhhiJWdFJNo46JigrC/jgoTcZop6gjrqICM/O9k7YngMgA=) format('woff2'), url(/assets/jetbrains-mono-vietnamese-700-normal-BDLVIk2r.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;
}
/* jetbrains-mono-latin-ext-700-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/assets/jetbrains-mono-latin-ext-700-normal-CZipNAKV.woff2) format('woff2'), url(/assets/jetbrains-mono-latin-ext-700-normal-CxPITLHs.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;
}
/* jetbrains-mono-latin-700-normal */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/assets/jetbrains-mono-latin-700-normal-BYuf6tUa.woff2) format('woff2'), url(/assets/jetbrains-mono-latin-700-normal-D3wTyLJW.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;
}
/* ─── Design tokens (redesign — consumed by shared classes) ────────── */
:root {
--bg: #0a0d12;
--fg: #fafafa;
--muted: #a3a3a3;
--muted-2: #6b7280;
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.14);
--card: rgba(15, 18, 25, 0.65);
--card-solid:rgba(15, 18, 25, 0.85);
--primary: #3b82f6;
--primary-2: #60a5fa;
--accent-rgb: 59, 130, 246;
--ok: #22c55e;
--warn: #eab308;
--bad: #ef4444;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: "Inter", system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
min-height: 100vh;
}
#root {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
/* ─── Background stage + overlays ──────────────────────────────────── */
.bg-stage {
position: fixed; inset: 0; z-index: 0;
pointer-events: none; overflow: hidden;
background:
radial-gradient(ellipse 80% 60% at 50% 20%, rgba(var(--accent-rgb), 0.06), transparent 60%),
radial-gradient(ellipse 100% 80% at 50% 100%, rgba(var(--accent-rgb), 0.03), transparent 70%),
var(--bg);
}
.bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bg-vignette {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 70% 50% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.5) 100%);
}
.bg-noise {
position: absolute; inset: 0; pointer-events: none;
opacity: 0.05; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.bg-scanlines {
position: absolute; inset: 0; pointer-events: none;
background-image: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 0px, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 3px);
mix-blend-mode: overlay;
}
.page { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
/* ─── Header ───────────────────────────────────────────────────────── */
header.site {
position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
background: rgba(10, 13, 18, 0.6);
border-bottom: 1px solid var(--border);
}
header.site .row {
max-width: 1400px; margin: 0 auto;
padding: 14px 28px;
display: flex; align-items: center; gap: 24px;
}
.brand {
display: flex; align-items: center; gap: 10px;
font-weight: 600; color: var(--primary-2);
font-size: 17px; letter-spacing: -0.01em;
text-decoration: none;
}
.brand-dot {
width: 28px; height: 28px; border-radius: 7px;
background: conic-gradient(from 220deg, var(--primary), color-mix(in oklab, var(--primary) 60%, white), var(--primary));
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.4), 0 0 18px rgba(var(--accent-rgb), 0.35);
position: relative;
}
.brand-dot::after {
content: ""; position: absolute; inset: 5px; border-radius: 4px; background: var(--bg);
-webkit-mask: radial-gradient(circle, black 40%, transparent 41%);
mask: radial-gradient(circle, black 40%, transparent 41%);
}
nav.main { display: flex; gap: 4px; margin-left: 12px; }
nav.main a {
color: var(--muted); text-decoration: none;
padding: 7px 12px; border-radius: 7px;
font-size: 14px; font-weight: 500;
transition: color .15s, background .15s;
}
nav.main a:hover { color: var(--fg); background: rgba(255, 255, 255, 0.04); }
nav.main a.active { color: var(--fg); background: rgba(var(--accent-rgb), 0.1); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.search-inline { position: relative; flex: 0 0 280px; }
.search-inline input {
width: 100%;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
color: var(--fg);
border-radius: 9px;
padding: 8px 12px 8px 32px;
font-size: 13px;
font-family: "JetBrains Mono", ui-monospace, monospace;
outline: none;
transition: border-color .15s, background .15s;
}
.search-inline input:focus { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(255, 255, 255, 0.06); }
.search-inline svg {
position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
width: 13px; height: 13px; color: var(--muted-2);
}
.avatar-btn {
width: 36px; height: 36px; border-radius: 10px;
background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.1));
border: 1px solid var(--border-strong);
display: flex; align-items: center; justify-content: center;
font-weight: 600; color: var(--primary-2); cursor: pointer;
text-decoration: none;
}
/* ─── Navbar ───────────────────────────────────────────────────────── */
header.site .nav-desktop { display: contents; }
/* ─── Buttons ──────────────────────────────────────────────────────── */
.btn {
appearance: none; border: 0;
font-family: inherit; font-weight: 500; font-size: 13.5px;
padding: 9px 14px;
border-radius: 9px; cursor: pointer;
display: inline-flex; align-items: center; gap: 7px;
text-decoration: none; color: var(--fg);
transition: transform .1s, background .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
background: var(--primary); color: white;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 6px 22px -8px rgba(var(--accent-rgb), 0.7);
}
.btn-primary:hover:not(:disabled) { background: color-mix(in oklab, var(--primary) 90%, white); }
.btn-ghost {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
}
.btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: var(--border-strong); }
.btn-lg { padding: 12px 18px; font-size: 14px; border-radius: 10px; }
.btn-mono { font-family: "JetBrains Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
/* ─── Card ─────────────────────────────────────────────────────────── */
.card {
position: relative;
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
overflow: hidden;
}
.card.solid { background: var(--card-solid); }
.card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
opacity: 0.5;
}
.card-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
}
.card-head .ttl {
font-size: 11px;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted-2);
}
.card-head .ttl::before { content: "▸ "; color: rgba(var(--accent-rgb), 0.7); }
.card-head .actions {
font-size: 11px; font-family: "JetBrains Mono", monospace;
color: rgba(var(--accent-rgb), 0.8); text-decoration: none;
}
.card-head button.actions {
appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
}
.card-body { padding: 18px; }
/* ─── Page head ────────────────────────────────────────────────────── */
.page-head {
max-width: 1280px; margin: 0 auto;
padding: 32px 28px 12px;
width: 100%;
}
.page-head .breadcrumb {
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
color: var(--muted-2); letter-spacing: 0.04em;
margin-bottom: 10px;
}
.page-head .breadcrumb a { color: var(--muted); text-decoration: none; }
.page-head .breadcrumb a:hover { color: var(--fg); }
.page-head .breadcrumb .sep { color: var(--muted-2); margin: 0 6px; }
.page-head .breadcrumb .cur { color: var(--primary-2); }
.page-head h1 {
font-size: clamp(28px, 3.4vw, 38px);
font-weight: 600; letter-spacing: -0.02em;
margin: 0;
}
.page-head .subtitle { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
.page-head .title-row {
display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
/* Linha de topo: breadcrumb à esquerda, cartão/eyebrow à direita (igual ao admin). */
.page-head .head-top {
display: flex; align-items: center; justify-content: space-between;
gap: 12px 16px; flex-wrap: wrap;
margin-bottom: 10px;
}
.page-head .head-top .breadcrumb { margin-bottom: 0; }
/* ─── Eyebrow / chip ───────────────────────────────────────────────── */
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 11px;
border: 1px solid var(--border-strong);
border-radius: 999px;
background: rgba(var(--accent-rgb), 0.08);
color: var(--primary-2);
font-size: 10.5px; font-weight: 500;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.08em;
}
.eyebrow .pulse {
width: 6px; height: 6px; border-radius: 50%;
background: var(--ok); box-shadow: 0 0 6px var(--ok);
animation: pulseDot 2s infinite;
}
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
/* ─── Inputs ───────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
display: flex; justify-content: space-between; align-items: center;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
color: var(--muted-2);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.input {
width: 100%;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-strong);
color: var(--fg);
border-radius: 9px;
padding: 10px 12px;
font-size: 14px;
font-family: "JetBrains Mono", monospace;
outline: none;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.input:focus {
border-color: rgba(var(--accent-rgb), 0.7);
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
.field.error .input { border-color: rgba(239, 68, 68, 0.6); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); }
.field .err {
font-family: "JetBrains Mono", monospace;
font-size: 11px; color: #fca5a5;
}
.field .err::before { content: "⚠ "; }
/* ─── Footer ───────────────────────────────────────────────────────── */
footer.site {
border-top: 1px solid var(--border);
padding: 22px 28px 26px;
color: var(--muted-2);
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.05em;
text-align: center;
}
footer.site .row { display: flex; justify-content: space-between; max-width: 1400px; margin: 0 auto; gap: 16px; flex-wrap: wrap; }
/* ─── Common badge ─────────────────────────────────────────────────── */
.badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 8px;
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.badge.ok { background: rgba(34, 197, 94, 0.12); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.3); }
.badge.warn { background: rgba(234, 179, 8, 0.12); color: #fcd34d; border: 1px solid rgba(234, 179, 8, 0.3); }
.badge.bad { background: rgba(239, 68, 68, 0.12); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }
.badge.neutral { background: rgba(255, 255, 255, 0.05); color: var(--muted); border: 1px solid var(--border); }
/* ─── App shell (estrutura global do AppRouter) ────────────────────── */
.app-shell {
display: flex; flex-direction: column;
min-height: 100vh;
background: var(--bg); color: var(--fg);
}
.app-main { flex: 1 1 0; min-width: 0; }
.app-footer-wrap { position: relative; z-index: 1; }
/* ─── Loading spinner (full-screen ou inline) ──────────────────────── */
.loading-spinner {
display: flex; align-items: center; justify-content: center;
padding: 48px 0;
}
.loading-spinner--full { min-height: 100vh; padding: 0; }
.loading-spinner__icon {
color: var(--primary);
animation: loadingSpin 1s linear infinite;
}
@keyframes loadingSpin {
to { transform: rotate(360deg); }
}
/* ════════════════════════════════════════════════════════════════════
PAGE: Landing ([data-page="home"])
════════════════════════════════════════════════════════════════════ */
[data-page="home"] .btn-lg { padding: 12px 22px; font-size: 15px; border-radius: 11px; }
[data-page="home"] section.hero {
text-align: center;
padding: 110px 28px 80px;
max-width: 1280px; margin: 0 auto;
position: relative;
}
[data-page="home"] .eyebrow {
padding: 6px 14px;
font-size: 12px;
letter-spacing: 0.04em;
margin-bottom: 28px;
}
[data-page="home"] .section-head .eyebrow { margin-bottom: 16px; }
[data-page="home"] .eyebrow .pulse {
width: 7px; height: 7px;
background: var(--primary);
box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.7);
animation: heroPulse 2s infinite;
}
[data-page="home"] .eyebrow.is-offline .pulse { background: var(--bad); }
@keyframes heroPulse {
0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); }
70% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
[data-page="home"] h1.hero-title {
font-size: clamp(40px, 6vw, 76px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.02;
margin: 0 auto 24px;
max-width: 16ch;
text-wrap: balance;
}
[data-page="home"] h1.hero-title .accent {
background: linear-gradient(120deg, var(--primary-2), white 50%, var(--primary-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200% 100%;
animation: shimmer 8s linear infinite;
}
@keyframes shimmer { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }
[data-page="home"] .hero-sub {
max-width: 56ch; margin: 0 auto 36px;
color: var(--muted);
font-size: 18px; line-height: 1.55;
text-wrap: pretty;
}
[data-page="home"] .hero-ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
[data-page="home"] .hero-meta {
margin-top: 60px;
display: flex; gap: 36px; justify-content: center; flex-wrap: wrap;
color: var(--muted-2);
font-size: 12px;
font-family: "JetBrains Mono", ui-monospace, monospace;
letter-spacing: 0.04em;
}
[data-page="home"] .hero-meta .item { display: flex; align-items: center; gap: 8px; }
[data-page="home"] .hero-meta .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--primary);
box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8);
}
[data-page="home"] .hud {
position: absolute;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px;
color: var(--muted-2);
letter-spacing: 0.03em;
pointer-events: none;
}
[data-page="home"] .hud .label { color: rgba(var(--accent-rgb), 0.7); margin-right: 6px; }
[data-page="home"] .hud .val { color: var(--fg); opacity: 0.7; }
[data-page="home"] .hud-tl { top: 28px; left: 28px; text-align: left; }
[data-page="home"] .hud-tr { top: 28px; right: 28px; text-align: right; }
[data-page="home"] .hud-line + .hud-line { margin-top: 4px; }
@media (max-width: 720px) { [data-page="home"] .hud { display: none; } }
[data-page="home"] section.features {
max-width: 1280px; margin: 0 auto;
padding: 80px 28px;
}
[data-page="home"] .section-head { text-align: center; margin-bottom: 56px; }
[data-page="home"] .section-head h2 {
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 600;
letter-spacing: -0.02em;
margin: 0 0 10px;
}
[data-page="home"] .section-head p {
color: var(--muted);
max-width: 60ch; margin: 0 auto;
font-size: 16px;
}
[data-page="home"] .feature-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
@media (max-width: 1180px) { [data-page="home"] .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { [data-page="home"] .feature-grid { grid-template-columns: 1fr; } }
[data-page="home"] .feature {
position: relative;
display: block;
padding: 24px 22px;
border-radius: 14px;
border: 1px solid var(--border);
background: var(--card);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color .2s, transform .2s;
}
[data-page="home"] .feature:hover {
border-color: rgba(var(--accent-rgb), 0.3);
transform: translateY(-2px);
}
[data-page="home"] .feature::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--accent-rgb), 0.10), transparent 60%);
opacity: 0;
transition: opacity .25s;
pointer-events: none;
}
[data-page="home"] .feature:hover::before { opacity: 1; }
[data-page="home"] .feature .corner {
position: absolute; top: 0; right: 0;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10px;
color: var(--muted-2);
padding: 10px 14px;
opacity: 0.6;
}
[data-page="home"] .feature .icon {
width: 44px; height: 44px;
border-radius: 11px;
background: rgba(var(--accent-rgb), 0.12);
border: 1px solid rgba(var(--accent-rgb), 0.2);
display: flex; align-items: center; justify-content: center;
color: var(--primary-2);
margin-bottom: 18px;
}
[data-page="home"] .feature h3 {
font-size: 18px;
font-weight: 600;
margin: 0 0 8px;
letter-spacing: -0.01em;
}
[data-page="home"] .feature p {
color: var(--muted);
font-size: 14px;
line-height: 1.55;
margin: 0 0 18px;
}
[data-page="home"] .feature .arrow {
display: inline-flex; align-items: center; gap: 6px;
color: var(--primary-2);
font-size: 13px;
font-weight: 500;
font-family: "JetBrains Mono", ui-monospace, monospace;
}
[data-page="home"] .feature .arrow svg { transition: transform .2s; }
[data-page="home"] .feature:hover .arrow svg { transform: translateX(3px); }
[data-page="home"] .feature .underline {
position: absolute; left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
transform: scaleX(0);
transform-origin: left;
transition: transform .35s;
}
[data-page="home"] .feature:hover .underline { transform: scaleX(1); }
[data-page="home"] section.topics {
max-width: 1280px; margin: 0 auto;
padding: 40px 28px 80px;
}
[data-page="home"] .topic-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
@media (max-width: 1024px) { [data-page="home"] .topic-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { [data-page="home"] .topic-row { grid-template-columns: repeat(2, 1fr); } }
[data-page="home"] .topic-chip {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
border-radius: 11px;
padding: 16px 18px;
display: flex; flex-direction: column; gap: 6px;
transition: background .15s, border-color .15s;
text-decoration: none;
color: inherit;
}
[data-page="home"] .topic-chip:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--border-strong); }
[data-page="home"] .topic-chip .num {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px;
color: rgba(var(--accent-rgb), 0.7);
letter-spacing: 0.06em;
}
[data-page="home"] .topic-chip .ttl { font-weight: 500; font-size: 14.5px; }
[data-page="home"] .topic-chip .meta { font-size: 12px; color: var(--muted-2); }
[data-page="home"] section.about {
padding: 80px 28px;
}
[data-page="home"] .about-inner { max-width: 720px; margin: 0 auto; text-align: center; }
[data-page="home"] .about-inner h2 {
font-size: clamp(26px, 3vw, 34px);
font-weight: 600;
letter-spacing: -0.02em;
margin: 0 0 16px;
}
[data-page="home"] .about-inner p { color: var(--muted); font-size: 16px; line-height: 1.7; }
/* ════════════════════════════════════════════════════════════════════
PAGE: Auth ([data-page="auth"])
════════════════════════════════════════════════════════════════════ */
[data-page="auth"] .auth-main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 28px;
}
[data-page="auth"] .auth-card {
width: 100%;
max-width: 880px;
background: var(--card-solid);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 30px 80px -20px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(var(--accent-rgb), 0.06),
0 0 60px -10px rgba(var(--accent-rgb), 0.15);
position: relative;
}
[data-page="auth"] .auth-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
}
@media (max-width: 800px) {
[data-page="auth"] .auth-card { grid-template-columns: 1fr; max-width: 460px; }
}
[data-page="auth"] .auth-side {
padding: 32px 32px 28px;
border-right: 1px solid var(--border);
background:
radial-gradient(ellipse 100% 60% at 50% 0%, rgba(var(--accent-rgb), 0.07), transparent 70%),
linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent);
display: flex; flex-direction: column; gap: 22px;
font-family: "JetBrains Mono", monospace;
font-size: 12px;
color: var(--muted);
}
@media (max-width: 800px) {
[data-page="auth"] .auth-side { border-right: 0; border-bottom: 1px solid var(--border); }
}
[data-page="auth"] .auth-side .badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 11px;
border: 1px solid var(--border-strong);
border-radius: 999px;
background: rgba(var(--accent-rgb), 0.08);
color: var(--primary-2);
font-size: 10.5px;
letter-spacing: 0.1em;
width: fit-content;
text-transform: none;
}
[data-page="auth"] .auth-side .badge .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--ok); box-shadow: 0 0 6px var(--ok);
animation: pulseDot 2s infinite;
}
[data-page="auth"] .auth-side h2 {
font-family: "Inter", sans-serif;
font-size: 26px;
font-weight: 600;
color: var(--fg);
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0;
}
[data-page="auth"] .auth-side h2 .accent {
background: linear-gradient(120deg, var(--primary-2), white 55%, var(--primary-2));
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
[data-page="auth"] .auth-side .lead {
font-family: "Inter", sans-serif;
font-size: 13.5px; color: var(--muted);
line-height: 1.55;
margin: -8px 0 0;
}
[data-page="auth"] .term {
background: rgba(0, 0, 0, 0.35);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
font-size: 11.5px;
color: var(--muted);
line-height: 1.7;
}
[data-page="auth"] .term .prompt { color: rgba(var(--accent-rgb), 0.9); }
[data-page="auth"] .term .ok { color: var(--ok); }
[data-page="auth"] .term .cmd { color: var(--fg); }
[data-page="auth"] .term .cur::after {
content: "▊";
color: var(--primary-2);
animation: blink 1s steps(2) infinite;
margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }
[data-page="auth"] .stats-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin-top: auto;
}
[data-page="auth"] .stat-tile {
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
}
[data-page="auth"] .stat-tile .k {
font-size: 9.5px; letter-spacing: 0.1em;
color: var(--muted-2); text-transform: uppercase;
}
[data-page="auth"] .stat-tile .v {
font-size: 18px; color: var(--fg);
font-weight: 600; margin-top: 4px;
font-variant-numeric: tabular-nums;
font-family: "Inter", sans-serif; letter-spacing: -0.01em;
}
[data-page="auth"] .sys-rows { display: grid; gap: 6px; }
[data-page="auth"] .sys-row { display: flex; justify-content: space-between; gap: 12px; }
[data-page="auth"] .sys-row .k { color: var(--muted-2); }
[data-page="auth"] .sys-row .v { color: var(--fg); text-align: right; }
[data-page="auth"] .auth-form {
padding: 32px 36px 30px;
display: flex; flex-direction: column; gap: 18px;
position: relative;
}
[data-page="auth"] .form-head {
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
}
[data-page="auth"] .tab-toggle {
display: inline-flex;
padding: 3px;
border: 1px solid var(--border);
border-radius: 9px;
background: rgba(255, 255, 255, 0.02);
}
[data-page="auth"] .tab-toggle button {
appearance: none; border: 0; background: transparent;
padding: 6px 12px;
border-radius: 6px;
color: var(--muted);
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.06em;
cursor: pointer;
text-transform: uppercase;
transition: color .15s, background .15s;
}
[data-page="auth"] .tab-toggle button:hover { color: var(--fg); }
[data-page="auth"] .tab-toggle button.active {
background: rgba(var(--accent-rgb), 0.15);
color: var(--primary-2);
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.3) inset;
}
[data-page="auth"] .req-line {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; color: var(--muted-2);
letter-spacing: 0.05em;
}
[data-page="auth"] .form-title {
font-size: 24px; font-weight: 600;
letter-spacing: -0.02em;
margin: 4px 0 0;
}
[data-page="auth"] .form-sub { color: var(--muted); font-size: 13.5px; margin: -8px 0 8px; line-height: 1.5; }
[data-page="auth"] .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
[data-page="auth"] .field label {
display: flex; justify-content: flex-start; gap: 6px; align-items: center;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
color: var(--muted-2);
letter-spacing: 0.08em;
text-transform: uppercase;
}
[data-page="auth"] .field label .opt { color: var(--muted-2); text-transform: none; letter-spacing: 0; }
[data-page="auth"] .field .input-wrap { position: relative; display: flex; align-items: center; }
[data-page="auth"] .field input {
width: 100%;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-strong);
color: var(--fg);
border-radius: 9px;
padding: 11px 12px 11px 36px;
font-size: 14px;
font-family: "JetBrains Mono", monospace;
outline: none;
transition: border-color .15s, background .15s, box-shadow .15s;
}
[data-page="auth"] .field input:focus {
border-color: rgba(var(--accent-rgb), 0.7);
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
[data-page="auth"] .field.error input { border-color: rgba(239, 68, 68, 0.6); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); }
[data-page="auth"] .field .icon {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
width: 14px; height: 14px;
color: var(--muted-2);
pointer-events: none;
}
[data-page="auth"] .field .reveal {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
appearance: none; border: 0; background: transparent; cursor: pointer;
padding: 6px; border-radius: 6px;
color: var(--muted-2);
display: inline-flex;
}
[data-page="auth"] .field .reveal:hover { color: var(--fg); background: rgba(255, 255, 255, 0.05); }
[data-page="auth"] .field .err {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: #fca5a5;
display: flex; align-items: center; gap: 6px;
}
[data-page="auth"] .field .err::before { content: "⚠"; }
[data-page="auth"] .pw-strength { display: grid; gap: 8px; margin-top: 4px; }
[data-page="auth"] .pw-bar { display: flex; gap: 4px; }
[data-page="auth"] .pw-bar span {
flex: 1; height: 3px; border-radius: 2px;
background: rgba(255, 255, 255, 0.08);
transition: background .2s;
}
[data-page="auth"] .pw-bar span.s1 { background: var(--bad); }
[data-page="auth"] .pw-bar span.s2 { background: var(--warn); }
[data-page="auth"] .pw-bar span.s3 { background: var(--primary); }
[data-page="auth"] .pw-bar span.s4 { background: var(--ok); }
[data-page="auth"] .pw-checks {
display: flex; flex-wrap: wrap; gap: 6px 12px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--muted-2);
}
[data-page="auth"] .pw-checks .check { display: inline-flex; align-items: center; gap: 4px; transition: color .15s; }
[data-page="auth"] .pw-checks .check.valid { color: #86efac; }
[data-page="auth"] .pw-checks .check .mark { display: inline-block; width: 12px; }
[data-page="auth"] .submit-row { margin-top: 6px; display: flex; flex-direction: column; gap: 12px; }
[data-page="auth"] .btn-submit {
width: 100%;
appearance: none; border: 0;
background: var(--primary);
color: white;
font-family: "JetBrains Mono", monospace;
font-size: 12.5px; font-weight: 600;
letter-spacing: 0.1em;
padding: 13px 16px;
border-radius: 10px;
cursor: pointer;
text-transform: uppercase;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 6px 22px -8px rgba(var(--accent-rgb), 0.7);
transition: transform .1s, background .15s, opacity .15s;
}
[data-page="auth"] .btn-submit:hover:not(:disabled) { background: color-mix(in oklab, var(--primary) 90%, white); }
[data-page="auth"] .btn-submit:active { transform: translateY(1px); }
[data-page="auth"] .btn-submit:disabled { cursor: not-allowed; opacity: 0.7; }
[data-page="auth"] .btn-submit.is-ok { background: var(--ok); }
[data-page="auth"] .btn-submit .arrow { display: inline-block; transition: transform .2s; }
[data-page="auth"] .btn-submit:hover:not(:disabled) .arrow { transform: translateX(3px); }
/* OAuth — divider "ou" + botão Google */
[data-page="auth"] .oauth-divider {
display: flex; align-items: center; gap: 10px;
margin: 18px 0 14px;
color: var(--muted-2);
font-family: "JetBrains Mono", monospace; font-size: 10.5px;
letter-spacing: 0.12em; text-transform: uppercase;
}
[data-page="auth"] .oauth-divider::before,
[data-page="auth"] .oauth-divider::after {
content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.08);
}
[data-page="auth"] .btn-google {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; padding: 10px 16px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.14);
color: var(--fg);
font-family: inherit; font-size: 13.5px; font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: background .15s, border-color .15s, transform .12s;
}
[data-page="auth"] .btn-google:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.22);
}
[data-page="auth"] .btn-google:active { transform: translateY(1px); }
[data-page="auth"] .btn-google svg { flex-shrink: 0; }
[data-page="auth"] .form-foot { text-align: center; font-size: 13px; color: var(--muted); margin-top: 14px; }
[data-page="auth"] .form-foot button {
appearance: none; border: 0; background: transparent; cursor: pointer;
color: var(--primary-2);
font-weight: 500; font-size: 13px;
border-bottom: 1px dashed rgba(var(--accent-rgb), 0.4);
padding-bottom: 1px;
}
[data-page="auth"] .form-foot button:hover { border-bottom-color: var(--primary-2); }
[data-page="auth"] .auth-note {
text-align: center;
padding: 18px 28px 28px;
color: var(--muted-2);
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.06em;
}
/* ════════════════════════════════════════════════════════════════════
PAGE: Topics ([data-page="topics"])
════════════════════════════════════════════════════════════════════ */
[data-page="topics"] .topics-main {
max-width: 1280px;
margin: 0 auto;
padding: 24px 28px 80px;
width: 100%;
flex: 1;
}
[data-page="topics"] .cat-rail {
display: flex; gap: 8px; flex-wrap: wrap;
margin: 22px 0 36px;
padding-bottom: 18px;
border-bottom: 1px solid var(--border);
}
[data-page="topics"] .cat-pill {
appearance: none; border: 0; background: transparent;
color: var(--muted);
padding: 8px 12px 7px;
border-bottom: 2px solid transparent;
font-size: 12.5px;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.04em;
cursor: pointer;
transition: color .15s, border-color .15s;
display: inline-flex; align-items: center; gap: 7px;
}
[data-page="topics"] .cat-pill:hover { color: var(--fg); }
[data-page="topics"] .cat-pill.active {
color: var(--primary-2);
border-bottom-color: var(--primary);
}
[data-page="topics"] .cat-pill .count {
font-size: 10px;
background: rgba(255, 255, 255, 0.05);
padding: 2px 6px; border-radius: 5px;
color: var(--muted-2);
}
[data-page="topics"] .cat-pill.active .count { background: rgba(var(--accent-rgb), 0.16); color: var(--primary-2); }
[data-page="topics"] .cat-section { margin-bottom: 48px; scroll-margin-top: 90px; }
[data-page="topics"] .cat-header {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
gap: 16px; flex-wrap: wrap;
}
[data-page="topics"] .cat-header .ttl {
display: flex; align-items: baseline; gap: 12px;
}
[data-page="topics"] .cat-header h2 {
font-size: 22px; font-weight: 600;
letter-spacing: -0.01em;
margin: 0;
}
[data-page="topics"] .cat-header .num {
display: inline-flex; align-items: baseline; gap: 7px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--fg);
}
[data-page="topics"] .cat-header .num::before {
content: "▸"; color: rgba(var(--accent-rgb), 0.85);
}
[data-page="topics"] .cat-header .num .c {
color: rgba(var(--accent-rgb), 0.7);
}
[data-page="topics"] .progress-meta {
display: flex; align-items: center; gap: 12px;
color: var(--muted-2);
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
letter-spacing: 0.05em;
}
[data-page="topics"] .cat-progress {
width: 120px; height: 4px; border-radius: 999px;
background: rgba(255, 255, 255, 0.06); overflow: hidden;
}
[data-page="topics"] .cat-progress > div {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--primary-2));
box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
}
[data-page="topics"] .topic-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 980px) { [data-page="topics"] .topic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { [data-page="topics"] .topic-grid { grid-template-columns: 1fr; } }
[data-page="topics"] .topic-card {
position: relative;
padding: 20px 20px 18px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
text-decoration: none;
color: inherit;
transition: border-color .2s, transform .2s, background .2s;
display: flex; flex-direction: column; gap: 8px;
overflow: hidden;
}
[data-page="topics"] .topic-card:hover {
border-color: rgba(var(--accent-rgb), 0.4);
transform: translateY(-2px);
background: rgba(15, 18, 25, 0.75);
}
[data-page="topics"] .topic-card::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--accent-rgb), 0.08), transparent 60%);
opacity: 0; transition: opacity .25s; pointer-events: none;
}
[data-page="topics"] .topic-card:hover::after { opacity: 1; }
[data-page="topics"] .topic-card .head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
[data-page="topics"] .topic-card .idx {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
color: var(--muted-2);
letter-spacing: 0.08em;
}
[data-page="topics"] .topic-card h3 {
font-size: 15.5px; font-weight: 600;
margin: 2px 0 0;
letter-spacing: -0.005em;
text-wrap: balance;
}
[data-page="topics"] .topic-card p {
color: var(--muted);
font-size: 13px;
line-height: 1.5;
margin: 4px 0 0;
flex: 1;
}
[data-page="topics"] .topic-card .meta {
display: flex; align-items: center; justify-content: space-between;
margin-top: 10px;
padding-top: 12px;
border-top: 1px dashed var(--border);
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
color: var(--muted-2);
}
[data-page="topics"] .topic-card .meta .right { display: flex; align-items: center; gap: 8px; }
[data-page="topics"] .topic-card .arrow {
color: var(--primary-2);
transition: transform .2s;
display: inline-block;
}
[data-page="topics"] .topic-card:hover .arrow { transform: translateX(3px); }
[data-page="topics"] .empty {
text-align: center;
padding: 60px 28px;
color: var(--muted);
}
[data-page="topics"] .empty .glyph {
font-family: "JetBrains Mono", monospace;
font-size: 60px;
color: var(--muted-2);
margin-bottom: 16px;
opacity: 0.4;
}
/* ════════════════════════════════════════════════════════════════════
PAGE: Topic Details ([data-page="topic"])
════════════════════════════════════════════════════════════════════ */
[data-page="topic"] .detail-main {
max-width: 1280px;
margin: 0 auto;
padding: 24px 28px 80px;
width: 100%;
flex: 1;
display: grid;
grid-template-columns: 1fr 280px;
gap: 40px;
}
@media (max-width: 980px) {
[data-page="topic"] .detail-main { grid-template-columns: 1fr; }
[data-page="topic"] aside.toc { display: none; }
}
[data-page="topic"] article.topic { min-width: 0; }
[data-page="topic"] article.topic .meta-strip {
display: flex; gap: 16px; flex-wrap: wrap;
margin: 14px 0 28px;
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
color: var(--muted);
letter-spacing: 0.04em;
}
[data-page="topic"] article.topic .meta-strip .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--primary-2); display: inline-block;
vertical-align: middle; margin: 0 4px 2px 0;
box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
}
[data-page="topic"] .topic-sec { scroll-margin-top: 92px; }
[data-page="topic"] article.topic h2 {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 36px 0 12px;
padding-top: 8px;
border-top: 1px dashed var(--border);
}
[data-page="topic"] article.topic h2 .num {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
color: rgba(var(--accent-rgb), 0.7);
margin-right: 10px;
letter-spacing: 0.08em;
}
[data-page="topic"] article.topic h3 { font-size: 16px; font-weight: 600; margin: 22px 0 8px; }
[data-page="topic"] article.topic p {
color: var(--muted);
line-height: 1.65;
font-size: 15px;
margin: 0 0 14px;
max-width: 70ch;
text-wrap: pretty;
white-space: pre-wrap;
}
[data-page="topic"] article.topic p strong { color: var(--fg); font-weight: 600; }
[data-page="topic"] article.topic p code, [data-page="topic"] article.topic li code {
font-family: "JetBrains Mono", monospace;
background: rgba(var(--accent-rgb), 0.1);
color: var(--primary-2);
padding: 1px 6px;
border-radius: 4px;
font-size: 0.88em;
border: 1px solid rgba(var(--accent-rgb), 0.2);
}
[data-page="topic"] article.topic ul { color: var(--muted); padding-left: 22px; line-height: 1.7; margin: 0 0 16px; }
[data-page="topic"] article.topic ul li { margin: 4px 0; }
[data-page="topic"] article.topic ul li::marker { color: rgba(var(--accent-rgb), 0.8); }
[data-page="topic"] pre.code {
background: rgba(0, 0, 0, 0.4);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
overflow-x: auto;
font-family: "JetBrains Mono", monospace;
font-size: 12.5px;
color: #cbd5e1;
line-height: 1.55;
margin: 16px 0;
}
[data-page="topic"] .quiz-cta {
margin-top: 48px;
padding: 24px 28px;
border-radius: 14px;
background:
radial-gradient(ellipse 80% 80% at 100% 0%, rgba(var(--accent-rgb), 0.18), transparent 60%),
linear-gradient(135deg, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0.02));
border: 1px solid rgba(var(--accent-rgb), 0.25);
display: flex; align-items: center; justify-content: space-between; gap: 24px;
flex-wrap: wrap;
}
[data-page="topic"] .quiz-cta .left { display: flex; gap: 16px; align-items: center; }
[data-page="topic"] .quiz-cta .icon-box {
width: 48px; height: 48px;
border-radius: 12px;
background: rgba(var(--accent-rgb), 0.15);
border: 1px solid rgba(var(--accent-rgb), 0.3);
display: flex; align-items: center; justify-content: center;
color: var(--primary-2);
flex: 0 0 auto;
}
[data-page="topic"] .quiz-cta h3 { font-size: 17px; font-weight: 600; margin: 0 0 3px; letter-spacing: -0.01em; }
[data-page="topic"] .quiz-cta p { font-size: 13px; color: var(--muted); margin: 0; }
[data-page="topic"] aside.toc {
position: sticky;
top: 92px;
align-self: start;
font-size: 13.5px;
}
[data-page="topic"] aside.toc .toc-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 16px 18px;
}
[data-page="topic"] aside.toc .ttl {
font-size: 10.5px;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted-2);
margin-bottom: 12px;
}
[data-page="topic"] aside.toc .ttl::before { content: "▸ "; color: rgba(var(--accent-rgb), 0.7); }
[data-page="topic"] aside.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
[data-page="topic"] aside.toc a {
display: flex; gap: 10px; align-items: baseline;
color: var(--muted);
text-decoration: none;
padding: 5px 0 5px 10px;
transition: color .15s;
font-size: 13px;
line-height: 1.4;
border-left: 1px solid transparent;
cursor: pointer;
}
[data-page="topic"] aside.toc a:hover { color: var(--fg); }
[data-page="topic"] aside.toc a.active { color: var(--primary-2); border-left-color: var(--primary-2); }
[data-page="topic"] aside.toc a .n {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--muted-2);
}
[data-page="topic"] aside.toc .toc-progress {
margin-top: 16px;
padding-top: 12px;
border-top: 1px dashed var(--border);
}
[data-page="topic"] aside.toc .toc-progress .lbl {
display: flex; justify-content: space-between;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
color: var(--muted-2);
letter-spacing: 0.06em;
margin-bottom: 8px;
}
[data-page="topic"] aside.toc .toc-progress .lbl b { color: var(--primary-2); font-weight: 600; }
[data-page="topic"] aside.toc .toc-progress .bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
[data-page="topic"] aside.toc .toc-progress .bar > div { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-2)); transition: width .25s; }
[data-page="topic"] .topic-nav {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin-top: 36px;
}
[data-page="topic"] .topic-nav a {
text-decoration: none; color: inherit;
padding: 16px 18px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
border-radius: 10px;
transition: background .15s, border-color .15s;
}
[data-page="topic"] .topic-nav a:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(var(--accent-rgb), 0.3); }
[data-page="topic"] .topic-nav a .lbl {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
color: var(--muted-2);
letter-spacing: 0.08em;
margin-bottom: 4px;
}
[data-page="topic"] .topic-nav a .ttl { font-size: 14px; font-weight: 500; }
[data-page="topic"] .topic-nav a.next { text-align: right; }
/* ════════════════════════════════════════════════════════════════════
PAGE: Quiz ([data-page="quiz"])
════════════════════════════════════════════════════════════════════ */
[data-page="quiz"] .quiz-main {
max-width: 880px;
margin: 0 auto;
padding: 24px 28px 80px;
width: 100%;
flex: 1;
}
[data-page="quiz"] .mission-hud {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 14px;
align-items: center;
margin: 22px 0;
padding: 14px 18px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
[data-page="quiz"] .mission-hud .mission-title {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
color: var(--muted-2);
letter-spacing: 0.05em;
}
[data-page="quiz"] .mission-hud .mission-title b {
color: var(--fg);
font-weight: 600;
letter-spacing: 0;
font-family: "Inter", sans-serif;
font-size: 14px;
margin-right: 8px;
}
[data-page="quiz"] .timer {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border);
font-family: "JetBrains Mono", monospace;
font-size: 14px;
color: var(--fg);
font-weight: 600;
}
[data-page="quiz"] .timer .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--ok);
animation: pulseDot 1.4s infinite;
}
[data-page="quiz"] .abort-btn {
appearance: none;
background: transparent;
border: 1px solid var(--border-strong);
color: var(--muted);
padding: 7px 12px;
border-radius: 8px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: color .15s, background .15s, border-color .15s;
}
[data-page="quiz"] .abort-btn:hover { color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); }
[data-page="quiz"] .progress-row {
display: flex; align-items: center; gap: 14px;
margin-bottom: 18px;
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
color: var(--muted-2);
letter-spacing: 0.04em;
}
[data-page="quiz"] .progress-bar {
flex: 1;
height: 5px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
}
[data-page="quiz"] .progress-bar > div {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--primary-2));
box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
transition: width 0.4s ease;
}
[data-page="quiz"] .question-dots { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
[data-page="quiz"] .question-dots .dot {
width: 26px; height: 5px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
cursor: pointer;
border: 0; padding: 0;
transition: background .15s, transform .15s;
}
[data-page="quiz"] .question-dots .dot.answered { background: rgba(var(--accent-rgb), 0.4); }
[data-page="quiz"] .question-dots .dot.current { background: var(--primary); transform: scaleY(1.6); }
[data-page="quiz"] .question-dots .dot:hover { background: rgba(var(--accent-rgb), 0.6); }
[data-page="quiz"] .q-card {
padding: 28px 30px;
background: var(--card-solid);
border: 1px solid var(--border);
border-radius: 14px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
position: relative;
}
[data-page="quiz"] .q-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}
[data-page="quiz"] .q-meta { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
[data-page="quiz"] .q-meta .tag {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: var(--muted);
border: 1px solid var(--border);
letter-spacing: 0.05em;
}
[data-page="quiz"] .q-text {
font-size: 20px;
font-weight: 500;
line-height: 1.4;
margin: 0 0 24px;
letter-spacing: -0.01em;
text-wrap: balance;
}
[data-page="quiz"] .q-text .num {
font-family: "JetBrains Mono", monospace;
color: rgba(var(--accent-rgb), 0.8);
margin-right: 12px;
font-size: 16px;
}
[data-page="quiz"] .options { display: grid; gap: 10px; }
[data-page="quiz"] .option {
display: flex; align-items: flex-start; gap: 14px;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
transition: background .15s, border-color .15s, box-shadow .15s;
text-align: left;
font-family: inherit;
color: inherit;
font-size: 14.5px;
line-height: 1.45;
width: 100%;
}
[data-page="quiz"] .option:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(--border-strong);
}
[data-page="quiz"] .option .label {
width: 26px; height: 26px;
border-radius: 7px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-strong);
display: flex; align-items: center; justify-content: center;
flex: 0 0 auto;
font-family: "JetBrains Mono", monospace;
font-size: 12px;
font-weight: 600;
color: var(--muted);
transition: background .15s, color .15s, border-color .15s;
}
[data-page="quiz"] .option .body { flex: 1; padding-top: 2px; }
[data-page="quiz"] .option.selected {
background: rgba(var(--accent-rgb), 0.08);
border-color: rgba(var(--accent-rgb), 0.5);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
[data-page="quiz"] .option.selected .label {
background: var(--primary);
color: white;
border-color: var(--primary);
}
[data-page="quiz"] .q-nav {
display: flex; align-items: center; justify-content: space-between;
margin-top: 28px;
gap: 16px;
}
[data-page="quiz"] .q-status {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
color: var(--muted-2);
letter-spacing: 0.04em;
}
[data-page="quiz"] .q-status b { color: var(--primary-2); }
[data-page="quiz"] .result {
padding: 36px 32px;
background: var(--card-solid);
border: 1px solid var(--border);
border-radius: 14px;
text-align: center;
backdrop-filter: blur(20px);
position: relative;
overflow: hidden;
}
[data-page="quiz"] .result .lbl {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--primary-2);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 16px;
}
[data-page="quiz"] .result h2 {
font-size: 28px; font-weight: 600;
letter-spacing: -0.02em;
margin: 0 0 22px;
}
[data-page="quiz"] .score-circle {
width: 180px; height: 180px;
margin: 0 auto 22px;
position: relative;
}
[data-page="quiz"] .score-circle svg { transform: rotate(-90deg); width: 100%; height: 100%; }
[data-page="quiz"] .score-circle .track { stroke: rgba(255, 255, 255, 0.08); fill: none; stroke-width: 9; }
[data-page="quiz"] .score-circle .fill {
fill: none; stroke-width: 9; stroke-linecap: round;
stroke: var(--primary);
filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.6));
transition: stroke-dashoffset 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-page="quiz"] .score-circle .center {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
[data-page="quiz"] .score-circle .pct {
font-size: 44px; font-weight: 600;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
}
[data-page="quiz"] .score-circle .of {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--muted-2);
letter-spacing: 0.08em;
margin-top: 2px;
}
[data-page="quiz"] .stat-row {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
margin: 22px 0;
}
[data-page="quiz"] .stat-tile {
padding: 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
}
[data-page="quiz"] .stat-tile .k {
font-size: 10px; letter-spacing: 0.1em;
color: var(--muted-2); text-transform: uppercase;
font-family: "JetBrains Mono", monospace;
}
[data-page="quiz"] .stat-tile .v {
font-size: 18px; font-weight: 600; margin-top: 4px;
font-variant-numeric: tabular-nums;
}
[data-page="quiz"] .result .actions { display: flex; gap: 10px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
[data-page="quiz"] .review {
margin-top: 24px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
}
[data-page="quiz"] .review-head {
padding: 14px 18px;
border-bottom: 1px solid var(--border);
font-family: "JetBrains Mono", monospace;
font-size: 11px; color: var(--muted-2);
letter-spacing: 0.1em; text-transform: uppercase;
}
[data-page="quiz"] .review-head::before { content: "▸ "; color: rgba(var(--accent-rgb), 0.7); }
[data-page="quiz"] .review-item {
padding: 16px 18px;
border-bottom: 1px solid var(--border);
}
[data-page="quiz"] .review-item:last-child { border-bottom: 0; }
[data-page="quiz"] .review-item .row {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
margin-bottom: 8px;
}
[data-page="quiz"] .review-item .q { flex: 1; font-size: 14.5px; font-weight: 500; line-height: 1.4; }
[data-page="quiz"] .review-item .q .num {
font-family: "JetBrains Mono", monospace;
font-size: 12px; color: var(--muted-2);
margin-right: 8px;
}
[data-page="quiz"] .review-item .ans {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-family: "JetBrains Mono", monospace;
font-size: 12px;
color: var(--muted);
}
[data-page="quiz"] .review-item .ans .lbl { color: var(--muted-2); }
[data-page="quiz"] .review-item .ans .you {
padding: 2px 7px; border-radius: 4px;
background: rgba(239, 68, 68, 0.1);
color: #fca5a5;
}
[data-page="quiz"] .review-item .ans .you.ok { background: rgba(34, 197, 94, 0.1); color: #86efac; }
[data-page="quiz"] .review-item .ans .right {
padding: 2px 7px; border-radius: 4px;
background: rgba(34, 197, 94, 0.1); color: #86efac;
}
[data-page="quiz"] .review-item .expl {
margin-top: 6px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.02);
border-left: 2px solid rgba(var(--accent-rgb), 0.4);
border-radius: 0 6px 6px 0;
font-size: 13px; color: var(--muted);
line-height: 1.5;
}
/* ════════════════════════════════════════════════════════════════════
PAGE: Subnet Calculator ([data-page="subnet"])
════════════════════════════════════════════════════════════════════ */
[data-page="subnet"] .calc-main {
max-width: 1280px;
margin: 0 auto;
padding: 24px 28px 80px;
width: 100%;
flex: 1;
display: flex; flex-direction: column; gap: 22px;
}
[data-page="subnet"] .input-panel,
[data-page="subnet"] .binary,
[data-page="subnet"] .vlsm {
padding: 22px 26px;
background: var(--card-solid);
border: 1px solid var(--border);
border-radius: 14px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
position: relative;
}
[data-page="subnet"] .input-panel::before,
[data-page="subnet"] .binary::before,
[data-page="subnet"] .vlsm::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}
[data-page="subnet"] .binary { overflow-x: auto; }
[data-page="subnet"] .input-panel .card-head { margin: -22px -26px 18px; }
[data-page="subnet"] .input-row {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 14px;
align-items: end;
}
@media (max-width: 720px) { [data-page="subnet"] .input-row { grid-template-columns: 1fr; } }
[data-page="subnet"] .result-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
@media (max-width: 980px) { [data-page="subnet"] .result-grid { grid-template-columns: repeat(2, 1fr); } }
[data-page="subnet"] .res-tile {
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: 11px;
background: rgba(255, 255, 255, 0.02);
}
[data-page="subnet"] .res-tile .k {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
color: var(--muted-2);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 4px;
}
[data-page="subnet"] .res-tile .v {
font-family: "JetBrains Mono", monospace;
font-size: 18px;
font-weight: 600;
color: var(--fg);
letter-spacing: -0.005em;
word-break: break-all;
}
[data-page="subnet"] .res-tile .v .muted { color: var(--muted); font-weight: 400; }
[data-page="subnet"] .res-tile.accent .v { color: var(--primary-2); }
[data-page="subnet"] .bin-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 16px; gap: 16px; flex-wrap: wrap;
}
[data-page="subnet"] .bin-head .ttl {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--muted-2);
letter-spacing: 0.1em;
text-transform: uppercase;
}
[data-page="subnet"] .bin-head .ttl::before { content: "▸ "; color: rgba(var(--accent-rgb), 0.7); }
[data-page="subnet"] .bin-head .legend {
display: flex; gap: 14px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--muted-2);
}
[data-page="subnet"] .bin-head .legend .item { display: inline-flex; align-items: center; gap: 6px; }
[data-page="subnet"] .bin-head .legend .sw { width: 10px; height: 10px; border-radius: 2px; }
[data-page="subnet"] .bin-head .legend .sw.net { background: rgba(var(--accent-rgb), 0.55); border: 1px solid rgba(var(--accent-rgb), 0.7); }
[data-page="subnet"] .bin-head .legend .sw.host { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); }
[data-page="subnet"] .bin-row {
display: grid;
grid-template-columns: 90px 1fr 110px;
gap: 14px;
align-items: center;
padding: 8px 0;
border-bottom: 1px dashed var(--border);
font-family: "JetBrains Mono", monospace;
min-width: 840px;
}
[data-page="subnet"] .bin-row:last-of-type { border-bottom: 0; }
[data-page="subnet"] .bin-row .lbl {
font-size: 11px;
color: var(--muted-2);
text-transform: uppercase;
letter-spacing: 0.08em;
}
[data-page="subnet"] .bin-row .lbl b {
display: block; color: var(--fg); font-weight: 600;
font-size: 13px;
letter-spacing: 0;
margin-bottom: 1px;
}
[data-page="subnet"] .octets {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
[data-page="subnet"] .octet {
display: flex; gap: 1px;
background: rgba(0, 0, 0, 0.3);
border-radius: 6px;
padding: 4px;
}
[data-page="subnet"] .bit {
flex: 1;
aspect-ratio: 1;
max-width: 26px;
min-width: 16px;
display: flex; align-items: center; justify-content: center;
border-radius: 3px;
font-size: 11px;
font-weight: 600;
background: rgba(255, 255, 255, 0.04);
color: var(--muted);
transition: background .15s;
}
[data-page="subnet"] .bit.network {
background: rgba(var(--accent-rgb), 0.55);
color: white;
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.7);
}
[data-page="subnet"] .bit.host.on { background: rgba(255, 255, 255, 0.12); color: var(--fg); }
[data-page="subnet"] .bit.host.off { background: rgba(255, 255, 255, 0.03); color: var(--muted-2); }
[data-page="subnet"] .bit.network.off { background: rgba(var(--accent-rgb), 0.15); color: var(--muted); box-shadow: none; }
[data-page="subnet"] .bin-row .decimal {
text-align: right;
font-size: 13px;
color: var(--fg);
font-weight: 600;
}
[data-page="subnet"] .cidr-marker {
margin-top: 12px;
padding: 10px 12px;
background: rgba(var(--accent-rgb), 0.06);
border: 1px dashed rgba(var(--accent-rgb), 0.3);
border-radius: 8px;
font-family: "JetBrains Mono", monospace;
font-size: 12px;
color: var(--muted);
display: flex; align-items: center; gap: 10px;
}
[data-page="subnet"] .cidr-marker b { color: var(--primary-2); }
[data-page="subnet"] .vlsm-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
[data-page="subnet"] .vlsm-head h3 {
font-size: 16px; font-weight: 600; margin: 0;
display: flex; align-items: center; gap: 10px;
letter-spacing: -0.01em;
}
[data-page="subnet"] .vlsm-head h3 .tag {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
padding: 2px 7px; border-radius: 4px;
background: rgba(var(--accent-rgb), 0.1);
color: var(--primary-2);
letter-spacing: 0.1em;
text-transform: uppercase;
}
[data-page="subnet"] .req-list { display: grid; gap: 8px; }
[data-page="subnet"] .req-row {
display: grid;
grid-template-columns: 1.5fr 1fr 40px;
gap: 10px;
align-items: center;
}
/* Esconder spinners do dos hosts. */
[data-page="subnet"] .req-row input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
[data-page="subnet"] .req-row input[type="number"]::-webkit-outer-spin-button,
[data-page="subnet"] .req-row input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
[data-page="subnet"] .icon-btn {
appearance: none;
width: 36px; height: 36px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.03);
color: var(--muted);
border-radius: 8px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: color .15s, background .15s, border-color .15s;
}
[data-page="subnet"] .icon-btn:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); border-color: var(--border-strong); }
[data-page="subnet"] .icon-btn.danger:hover { color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); }
[data-page="subnet"] .vlsm-table {
margin-top: 18px;
border: 1px solid var(--border);
border-radius: 10px;
overflow-x: auto;
font-family: "JetBrains Mono", monospace;
font-size: 12.5px;
}
[data-page="subnet"] .vlsm-table .vrow {
display: grid;
grid-template-columns: 1fr 1.1fr 1.1fr 56px 1.1fr 1.1fr 78px;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
align-items: center;
min-width: 760px;
}
[data-page="subnet"] .vlsm-table .vrow:last-child { border-bottom: 0; }
[data-page="subnet"] .vlsm-table .vrow.head {
background: rgba(255, 255, 255, 0.03);
color: var(--muted-2);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 9px 14px;
}
[data-page="subnet"] .vlsm-table .vrow b { color: var(--primary-2); font-weight: 600; }
[data-page="subnet"] .vlsm-table .vrow .nm { font-family: "Inter", sans-serif; font-weight: 500; }
/* ─── VLSMTree — árvore binária de divisão recursiva ────────────────── */
[data-page="subnet"] .vlsm-tree {
padding: 22px 26px;
background: var(--card-solid);
border: 1px solid var(--border);
border-radius: 14px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
position: relative;
}
[data-page="subnet"] .vlsm-tree::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}
[data-page="subnet"] .vlsm-tree-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 18px; gap: 12px; flex-wrap: wrap;
}
[data-page="subnet"] .vlsm-tree-head h3 {
font-size: 16px; font-weight: 600; margin: 0;
display: flex; align-items: center; gap: 10px;
}
[data-page="subnet"] .vlsm-tree-head h3 .tag {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
padding: 2px 7px; border-radius: 4px;
background: rgba(var(--accent-rgb), 0.1);
color: var(--primary-2);
letter-spacing: 0.1em;
text-transform: uppercase;
}
[data-page="subnet"] .vlsm-tree-head .legend {
display: flex; align-items: center; gap: 14px;
font-size: 11.5px;
color: var(--muted);
font-family: "JetBrains Mono", monospace;
}
[data-page="subnet"] .vlsm-tree-head .legend .lg {
display: inline-flex; align-items: center; gap: 6px;
}
[data-page="subnet"] .vlsm-tree-head .legend .sw {
display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid;
}
[data-page="subnet"] .vlsm-tree-head .legend .sw.alloc {
background: rgba(34,197,94,0.18); border-color: rgba(34,197,94,0.55);
}
[data-page="subnet"] .vlsm-tree-head .legend .sw.free {
background: rgba(234,179,8,0.14); border-color: rgba(234,179,8,0.55);
}
[data-page="subnet"] .vlsm-tree-head .legend .sw.split {
background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.55);
}
[data-page="subnet"] .vlsm-tree-svg-wrap {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
padding: 4px 0 2px;
margin: 0 -2px;
mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
[data-page="subnet"] .vlsm-tree-svg {
display: block;
width: 100%;
height: auto;
}
[data-page="subnet"] .vt-node {
width: 100%; height: 100%;
display: flex; flex-direction: column; justify-content: center;
gap: 4px;
padding: 9px 14px;
border-radius: 10px;
border: 1px solid var(--border-strong);
background: rgba(15, 18, 25, 0.92);
position: relative;
overflow: hidden;
opacity: 0;
transform: scale(0.92);
transform-origin: 50% 50%;
transition: opacity 280ms ease-out, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-page="subnet"] .vt-node.in {
opacity: 1;
transform: scale(1);
}
[data-page="subnet"] .vt-node .ip {
font-family: "JetBrains Mono", monospace;
font-size: 13px;
font-weight: 600;
color: var(--fg);
white-space: nowrap;
line-height: 1.2;
}
[data-page="subnet"] .vt-node .name {
font-size: 11.5px;
font-weight: 600;
white-space: nowrap;
line-height: 1.25;
min-height: 1em;
}
[data-page="subnet"] .vt-node::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
}
[data-page="subnet"] .vt-node.split {
border-color: rgba(var(--accent-rgb), 0.45);
background: linear-gradient(rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0.05)), rgba(15,18,25,0.92);
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.08), 0 6px 16px -10px rgba(var(--accent-rgb), 0.5);
}
[data-page="subnet"] .vt-node.split::before {
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.7), transparent);
}
[data-page="subnet"] .vt-node.alloc {
border-color: rgba(34, 197, 94, 0.55);
background: linear-gradient(rgba(34,197,94,0.08), rgba(34,197,94,0.08)), rgba(15,18,25,0.92);
box-shadow: 0 0 0 1px rgba(34,197,94,0.10), 0 8px 18px -10px rgba(34,197,94,0.45);
}
[data-page="subnet"] .vt-node.alloc::before {
background: linear-gradient(90deg, transparent, rgba(134, 239, 172, 0.85), transparent);
}
[data-page="subnet"] .vt-node.alloc .name { color: #86efac; }
[data-page="subnet"] .vt-node.free {
border-color: rgba(234, 179, 8, 0.55);
background: linear-gradient(rgba(234,179,8,0.06), rgba(234,179,8,0.06)), rgba(15,18,25,0.92);
box-shadow: 0 0 0 1px rgba(234,179,8,0.08), 0 6px 16px -10px rgba(234,179,8,0.4);
}
[data-page="subnet"] .vt-node.free::before {
background: linear-gradient(90deg, transparent, rgba(252,211,77,0.7), transparent);
}
[data-page="subnet"] .vt-node.free .name {
color: #fcd34d; opacity: 0.85; font-weight: 500; font-style: italic;
}
[data-page="subnet"] .vt-edge {
fill: none;
stroke: rgba(var(--accent-rgb), 0.35);
stroke-width: 1.4;
stroke-linecap: round;
stroke-dasharray: var(--len, 200);
stroke-dashoffset: var(--len, 200);
transition: stroke-dashoffset 360ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
[data-page="subnet"] .vt-edge.in { stroke-dashoffset: 0; }
[data-page="subnet"] .vt-foot {
margin-top: 14px;
display: flex; flex-wrap: wrap; gap: 8px 18px;
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
color: var(--muted);
}
[data-page="subnet"] .vt-foot b { color: var(--primary-2); font-weight: 600; }
[data-page="subnet"] .vt-foot .dot {
display: inline-block; width: 4px; height: 4px; border-radius: 999px;
background: var(--muted-2); vertical-align: middle; margin: 0 6px;
}
[data-page="subnet"] .vt-explain {
margin: 16px 0 0;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.02);
border-left: 2px solid rgba(var(--accent-rgb), 0.4);
border-radius: 4px;
font-size: 13px;
line-height: 1.65;
color: var(--muted);
}
[data-page="subnet"] .vt-explain-intro {
margin: 0 0 8px;
color: var(--fg);
font-weight: 600;
}
[data-page="subnet"] .vt-explain-list {
margin: 0;
padding-left: 22px;
display: flex; flex-direction: column; gap: 8px;
}
[data-page="subnet"] .vt-explain-list li::marker {
color: rgba(var(--accent-rgb), 0.85);
font-weight: 600;
}
[data-page="subnet"] .vt-explain strong { color: var(--fg); font-weight: 600; }
[data-page="subnet"] .vt-explain code {
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
background: rgba(var(--accent-rgb), 0.10);
color: var(--primary-2);
padding: 1px 5px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
[data-page="subnet"] .vt-node,
[data-page="subnet"] .vt-edge { transition: none !important; }
[data-page="subnet"] .vt-node { opacity: 1 !important; transform: none !important; }
[data-page="subnet"] .vt-edge { stroke-dashoffset: 0 !important; }
}
/* ════════════════════════════════════════════════════════════════════
PAGE: Search ([data-page="search"])
════════════════════════════════════════════════════════════════════ */
[data-page="search"] .search-main {
max-width: 980px;
margin: 0 auto;
padding: 24px 28px 80px;
width: 100%;
flex: 1;
}
[data-page="search"] .big-search { margin-bottom: 24px; position: relative; }
[data-page="search"] .big-search input {
width: 100%;
background: rgba(15, 18, 25, 0.85);
border: 1px solid var(--border-strong);
color: var(--fg);
border-radius: 12px;
padding: 16px 18px 16px 52px;
font-size: 17px;
font-family: "JetBrains Mono", monospace;
outline: none;
transition: border-color .15s, background .15s, box-shadow .15s;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
[data-page="search"] .big-search input:focus {
border-color: rgba(var(--accent-rgb), 0.6);
box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);
}
[data-page="search"] .big-search svg {
position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; color: var(--primary-2);
}
[data-page="search"] .meta-line {
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
color: var(--muted-2);
letter-spacing: 0.05em;
margin-bottom: 22px;
display: flex; justify-content: space-between; align-items: center;
gap: 16px; flex-wrap: wrap;
}
[data-page="search"] .meta-line b { color: var(--primary-2); }
[data-page="search"] .meta-line .filters { display: flex; gap: 6px; flex-wrap: wrap; }
[data-page="search"] .filter-chip {
appearance: none;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
color: var(--muted);
padding: 5px 11px;
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.06em;
cursor: pointer;
text-transform: uppercase;
transition: color .15s, background .15s, border-color .15s;
}
[data-page="search"] .filter-chip:hover { color: var(--fg); border-color: var(--border-strong); }
[data-page="search"] .filter-chip.active {
color: var(--primary-2);
background: rgba(var(--accent-rgb), 0.12);
border-color: rgba(var(--accent-rgb), 0.4);
}
[data-page="search"] .results { display: grid; gap: 10px; }
[data-page="search"] .result-item {
display: block;
padding: 16px 20px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 11px;
text-decoration: none;
color: inherit;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition: background .15s, border-color .15s, transform .15s;
}
[data-page="search"] .result-item:hover {
background: rgba(15, 18, 25, 0.75);
border-color: rgba(var(--accent-rgb), 0.3);
transform: translateY(-1px);
}
[data-page="search"] .result-item .top {
display: flex; align-items: center; gap: 8px;
margin-bottom: 6px;
}
[data-page="search"] .result-item .crumb {
font-family: "JetBrains Mono", monospace;
font-size: 11px; color: var(--muted-2);
}
[data-page="search"] .result-item .ttl {
font-size: 16px; font-weight: 600;
letter-spacing: -0.005em;
margin: 0 0 4px;
}
[data-page="search"] .result-item .ttl mark {
background: rgba(var(--accent-rgb), 0.22);
color: var(--primary-2);
padding: 1px 3px; border-radius: 3px;
font-weight: 600;
}
[data-page="search"] .result-item .desc {
color: var(--muted);
font-size: 13.5px;
line-height: 1.5;
margin: 0;
}
[data-page="search"] .result-item .desc mark {
background: rgba(var(--accent-rgb), 0.18);
color: var(--fg);
padding: 0 2px; border-radius: 2px;
}
[data-page="search"] .result-item .footer-meta {
margin-top: 10px;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
color: var(--muted-2);
letter-spacing: 0.05em;
display: flex; gap: 14px; flex-wrap: wrap;
}
[data-page="search"] .result-item .footer-meta .lbl { color: var(--muted-2); margin-right: 4px; }
[data-page="search"] .result-item .footer-meta .content-hit { color: rgba(var(--accent-rgb), 0.8); }
[data-page="search"] .empty {
text-align: center;
padding: 80px 28px;
color: var(--muted);
}
[data-page="search"] .empty .glyph {
font-family: "JetBrains Mono", monospace;
font-size: 80px;
line-height: 1;
color: var(--muted-2);
opacity: 0.3;
margin-bottom: 18px;
}
[data-page="search"] .empty h3 {
font-size: 18px; font-weight: 500;
color: var(--fg);
margin: 0 0 8px;
}
[data-page="search"] .empty p { font-size: 13.5px; margin: 0; }
[data-page="search"] .empty .suggestions {
margin-top: 22px;
display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
[data-page="search"] .empty .suggestions .s {
appearance: none;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px dashed var(--border-strong);
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
color: var(--muted);
cursor: pointer;
transition: color .15s, background .15s, border-color .15s;
}
[data-page="search"] .empty .suggestions .s:hover {
color: var(--primary-2);
border-color: rgba(var(--accent-rgb), 0.5);
background: rgba(var(--accent-rgb), 0.05);
}
/* ════════════════════════════════════════════════════════════════════
PAGE: Dashboard / My Area ([data-page="dashboard"])
════════════════════════════════════════════════════════════════════ */
[data-page="dashboard"] .session-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 12px;
border: 1px solid var(--border-strong);
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
color: var(--muted);
background: rgba(255, 255, 255, 0.02);
}
[data-page="dashboard"] .session-chip .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--ok); box-shadow: 0 0 8px var(--ok);
animation: pulseDot 2s infinite;
}
[data-page="dashboard"] .head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
[data-page="dashboard"] .dash {
max-width: 1400px; margin: 0 auto;
padding: 24px 28px 80px;
display: grid;
grid-template-columns: 320px 1fr;
gap: 20px;
}
@media (max-width: 980px) {
[data-page="dashboard"] .dash { grid-template-columns: 1fr; }
/* Mobile: achata as colunas num único fluxo e empurra a "Próxima missão"
para o fim. Ordem: ID · 4 cards · atividade · domínio · resultados · missão. */
[data-page="dashboard"] .dash .col { display: contents; }
[data-page="dashboard"] .dash .card:has(.next-target) { order: 1; }
}
[data-page="dashboard"] .col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
[data-page="dashboard"] .card-body { padding: 18px; }
[data-page="dashboard"] .card-body.tight { padding: 14px 18px; }
[data-page="dashboard"] .op-card { padding: 22px 20px; text-align: center; }
[data-page="dashboard"] .op-avatar {
width: 88px; height: 88px;
border-radius: 20px;
margin: 0 auto 14px;
background:
radial-gradient(circle at 30% 25%, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.3) 60%, rgba(var(--accent-rgb), 0.1)),
linear-gradient(135deg, #1a2230, #0e1219);
border: 1px solid var(--border-strong);
box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.08), 0 12px 40px -10px rgba(var(--accent-rgb), 0.4);
display: flex; align-items: center; justify-content: center;
font-size: 30px; font-weight: 600;
color: white;
letter-spacing: -0.02em;
position: relative;
}
[data-page="dashboard"] .op-avatar::after {
content: ""; position: absolute; right: 4px; bottom: 4px;
width: 14px; height: 14px; border-radius: 50%;
background: var(--ok);
border: 2px solid var(--bg);
box-shadow: 0 0 8px var(--ok);
}
[data-page="dashboard"] .op-callsign {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--primary-2);
letter-spacing: 0.1em;
margin-bottom: 2px;
}
[data-page="dashboard"] .op-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
[data-page="dashboard"] .op-email { font-size: 12px; color: var(--muted); margin-top: 3px; font-family: "JetBrains Mono", monospace; word-break: break-all; }
[data-page="dashboard"] .op-meta {
margin-top: 16px;
border-top: 1px dashed var(--border);
padding-top: 14px;
display: grid; gap: 8px;
text-align: left;
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
}
[data-page="dashboard"] .op-meta .k { color: var(--muted-2); }
[data-page="dashboard"] .op-meta .v { color: var(--fg); }
[data-page="dashboard"] .op-meta .row { display: flex; justify-content: space-between; gap: 10px; }
[data-page="dashboard"] .op-actions { margin-top: 18px; display: grid; gap: 8px; }
[data-page="dashboard"] .op-actions .btn { justify-content: center; width: 100%; }
[data-page="dashboard"] .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 700px) { [data-page="dashboard"] .kpi-row { grid-template-columns: repeat(2, 1fr); } }
[data-page="dashboard"] .kpi {
position: relative;
padding: 16px 18px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
[data-page="dashboard"] .kpi::after {
content: ""; position: absolute; top: 0; right: 0;
width: 70px; height: 70px;
background: radial-gradient(circle at 70% 30%, rgba(var(--accent-rgb), 0.18), transparent 70%);
}
[data-page="dashboard"] .kpi .label {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
color: var(--muted-2);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 6px;
}
[data-page="dashboard"] .kpi .value {
font-size: 30px; font-weight: 600;
letter-spacing: -0.02em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
[data-page="dashboard"] .kpi .value .unit { font-size: 14px; color: var(--muted); font-weight: 400; margin-left: 2px; }
[data-page="dashboard"] .kpi .delta {
margin-top: 6px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--ok);
display: inline-flex; align-items: center; gap: 4px;
}
[data-page="dashboard"] .kpi .delta.muted { color: var(--muted-2); }
[data-page="dashboard"] .kpi .spark { margin-top: 8px; width: 100%; height: 28px; display: block; }
[data-page="dashboard"] .heatmap {
display: grid;
grid-template-columns: repeat(26, 1fr);
gap: 4px;
margin-top: 4px;
}
[data-page="dashboard"] .heatmap .cell {
aspect-ratio: 1;
border-radius: 3px;
background: rgba(255, 255, 255, 0.04);
}
/* Cor única — célula ativa (visitou pelo menos uma vez nesse dia). */
[data-page="dashboard"] .heatmap .cell[data-v="1"] {
background: rgba(var(--accent-rgb), 0.7);
box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.35);
}
[data-page="dashboard"] .heatmap-legend {
margin-top: 10px;
display: flex; align-items: center; justify-content: space-between;
font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--muted-2);
letter-spacing: 0.05em; gap: 12px; flex-wrap: wrap;
}
[data-page="dashboard"] .legend-scale { display: inline-flex; align-items: center; gap: 4px; }
[data-page="dashboard"] .legend-scale span:empty { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
[data-page="dashboard"] .mastery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 700px) { [data-page="dashboard"] .mastery { grid-template-columns: repeat(2, 1fr); } }
[data-page="dashboard"] .ring {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 14px 10px;
border: 1px solid var(--border);
border-radius: 11px;
background: rgba(255, 255, 255, 0.02);
text-align: center;
}
[data-page="dashboard"] .ring svg { width: 78px; height: 78px; transform: rotate(-90deg); }
[data-page="dashboard"] .ring .track { stroke: rgba(255, 255, 255, 0.07); fill: none; stroke-width: 6; }
[data-page="dashboard"] .ring .fill {
stroke: var(--primary); fill: none; stroke-width: 6; stroke-linecap: round;
filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.5));
transition: stroke-dashoffset 1s ease;
}
[data-page="dashboard"] .ring .ring-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
[data-page="dashboard"] .ring .pct {
position: absolute;
font-family: "JetBrains Mono", monospace;
font-size: 14px; font-weight: 600;
color: var(--fg);
}
[data-page="dashboard"] .ring .rttl { font-size: 13px; font-weight: 500; }
[data-page="dashboard"] .ring .meta { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--muted-2); }
[data-page="dashboard"] .log { display: grid; gap: 2px; }
[data-page="dashboard"] .log .entry {
display: grid;
grid-template-columns: 110px 16px 1fr auto auto;
gap: 14px;
padding: 11px 4px;
border-bottom: 1px dashed var(--border);
align-items: center;
font-size: 13.5px;
}
[data-page="dashboard"] .log .entry:last-child { border-bottom: 0; }
[data-page="dashboard"] .log .entry:hover { background: rgba(255, 255, 255, 0.02); }
[data-page="dashboard"] .log a.entry { text-decoration: none; color: inherit; cursor: pointer; }
[data-page="dashboard"] .log .ts { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--muted-2); }
[data-page="dashboard"] .log .lvl {
width: 14px; height: 14px; border-radius: 4px;
display: flex; align-items: center; justify-content: center;
font-family: monospace; font-size: 9px; font-weight: 700;
color: var(--bg);
}
[data-page="dashboard"] .log .lvl.ok { background: var(--ok); }
[data-page="dashboard"] .log .lvl.warn { background: var(--warn); }
[data-page="dashboard"] .log .lvl.alert { background: #f97316; }
[data-page="dashboard"] .log .lvl.bad { background: var(--bad); }
[data-page="dashboard"] .log .msg { color: var(--fg); min-width: 0; }
[data-page="dashboard"] .log .msg .quiz { font-weight: 500; }
[data-page="dashboard"] .log .msg .ctx {
font-family: "JetBrains Mono", monospace; font-size: 11.5px;
color: var(--muted-2); margin-left: 6px;
}
[data-page="dashboard"] .log .score {
font-family: "JetBrains Mono", monospace;
font-weight: 600; font-size: 13px;
color: var(--fg);
font-variant-numeric: tabular-nums;
}
[data-page="dashboard"] .log .pct {
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
padding: 3px 7px;
border-radius: 6px;
min-width: 50px;
text-align: center;
}
[data-page="dashboard"] .log .pct.ok { background: rgba(34, 197, 94, 0.12); color: #86efac; }
[data-page="dashboard"] .log .pct.warn { background: rgba(234, 179, 8, 0.12); color: #fcd34d; }
[data-page="dashboard"] .log .pct.alert { background: rgba(249, 115, 22, 0.12); color: #fb923c; }
[data-page="dashboard"] .log .pct.bad { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
/* Mobile: tempo em cima e o badge/score/percentagem por baixo dele,
no espaço livre à esquerda; o título do quiz ocupa a coluna direita. */
@media (max-width: 640px) {
[data-page="dashboard"] .log .entry {
grid-template-columns: auto auto auto 1fr;
grid-template-areas:
"ts ts ts msg"
"lvl score pct msg";
column-gap: 8px;
row-gap: 7px;
align-items: center;
}
[data-page="dashboard"] .log .ts { grid-area: ts; }
[data-page="dashboard"] .log .msg { grid-area: msg; align-self: start; }
[data-page="dashboard"] .log .lvl { grid-area: lvl; }
[data-page="dashboard"] .log .score { grid-area: score; }
[data-page="dashboard"] .log .pct { grid-area: pct; justify-self: start; min-width: 0; }
}
[data-page="dashboard"] .mission .obj {
display: flex; align-items: center; gap: 10px;
padding: 9px 0;
font-size: 13.5px;
border-bottom: 1px dashed var(--border);
}
[data-page="dashboard"] .mission .obj:last-child { border-bottom: 0; }
[data-page="dashboard"] .mission .obj .check {
width: 16px; height: 16px; border-radius: 4px;
border: 1px solid var(--border-strong);
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto;
}
[data-page="dashboard"] .mission .obj.done .check { background: var(--ok); border-color: var(--ok); color: var(--bg); }
[data-page="dashboard"] .mission .obj.done { color: var(--muted); text-decoration: line-through; }
[data-page="dashboard"] .next-target {
padding: 18px;
background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.02));
border: 1px solid rgba(var(--accent-rgb), 0.25);
border-radius: 12px;
}
[data-page="dashboard"] .next-target .lbl {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; letter-spacing: 0.1em;
color: rgba(var(--accent-rgb), 0.85);
text-transform: uppercase;
margin-bottom: 6px;
}
[data-page="dashboard"] .next-target h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
[data-page="dashboard"] .next-target p { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
[data-page="dashboard"] .progress { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
[data-page="dashboard"] .progress > div {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--primary-2));
box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
}
[data-page="dashboard"] .progress-meta {
margin-top: 6px;
display: flex; justify-content: space-between;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; color: var(--muted-2);
}
[data-page="dashboard"] .corner-badge {
position: absolute; top: 14px; right: 14px;
padding: 3px 8px;
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 10px; letter-spacing: 0.08em;
text-transform: uppercase;
}
[data-page="dashboard"] .corner-badge.ok { background: rgba(34, 197, 94, 0.12); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.3); }
[data-page="dashboard"] .log-empty, [data-page="dashboard"] .mission-empty {
color: var(--muted); font-size: 13.5px; padding: 8px 0;
}
/* ════════════════════════════════════════════════════════════════════
PAGE: Edit Profile ([data-page="edit"])
════════════════════════════════════════════════════════════════════ */
[data-page="edit"] .edit-main {
max-width: 760px;
margin: 0 auto;
padding: 24px 28px 80px;
width: 100%;
flex: 1;
display: flex; flex-direction: column; gap: 22px;
}
[data-page="edit"] .acc-card {
display: grid;
grid-template-columns: 72px 1fr auto;
gap: 18px;
align-items: center;
padding: 18px 22px;
background: var(--card-solid);
border: 1px solid var(--border);
border-radius: 14px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
position: relative;
}
[data-page="edit"] .acc-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}
@media (max-width: 560px) {
[data-page="edit"] .acc-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
[data-page="edit"] .acc-avatar {
width: 72px; height: 72px;
border-radius: 16px;
background:
radial-gradient(circle at 30% 25%, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.3) 60%, rgba(var(--accent-rgb), 0.1)),
linear-gradient(135deg, #1a2230, #0e1219);
border: 1px solid var(--border-strong);
display: flex; align-items: center; justify-content: center;
font-size: 26px; font-weight: 600; color: white;
letter-spacing: -0.02em;
}
[data-page="edit"] .acc-info .name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
[data-page="edit"] .acc-info .email {
font-family: "JetBrains Mono", monospace;
font-size: 12.5px;
color: var(--muted);
margin-top: 3px;
word-break: break-all;
}
[data-page="edit"] .acc-info .meta {
margin-top: 6px;
display: flex; gap: 12px; flex-wrap: wrap;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
color: var(--muted-2);
letter-spacing: 0.05em;
}
[data-page="edit"] .acc-info .meta b { color: var(--primary-2); }
[data-page="edit"] .section-card {
padding: 22px 26px;
background: var(--card-solid);
border: 1px solid var(--border);
border-radius: 14px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
position: relative;
}
[data-page="edit"] .section-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}
[data-page="edit"] .section-card h2 {
font-size: 17px; font-weight: 600;
margin: 0 0 4px;
display: flex; align-items: center; gap: 10px;
letter-spacing: -0.01em;
}
[data-page="edit"] .section-card h2 .tag {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
padding: 2px 7px; border-radius: 4px;
background: rgba(var(--accent-rgb), 0.1);
color: var(--primary-2);
letter-spacing: 0.1em; text-transform: uppercase;
}
[data-page="edit"] .section-card .lead {
color: var(--muted);
font-size: 13.5px;
margin: 0 0 18px;
line-height: 1.5;
}
[data-page="edit"] .section-card .lead.oauth-notice {
margin: 8px 0 0;
padding: 12px 14px;
border-radius: 8px;
background: rgba(var(--accent-rgb), 0.06);
border: 1px solid rgba(var(--accent-rgb), 0.20);
}
[data-page="edit"] .section-card .lead.oauth-notice b { color: var(--fg); font-weight: 600; }
[data-page="edit"] .section-card .lead.oauth-notice a {
color: var(--primary-2);
border-bottom: 1px dashed rgba(var(--accent-rgb), 0.4);
}
[data-page="edit"] .section-card .lead.oauth-notice a:hover { border-bottom-color: var(--primary-2); }
[data-page="edit"] .section-card .row-of-fields { display: grid; gap: 16px; }
[data-page="edit"] .field .input-wrap { position: relative; display: flex; align-items: center; }
[data-page="edit"] .field .input-wrap .input { padding-right: 40px; }
[data-page="edit"] .field .reveal {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
appearance: none; border: 0; background: transparent; cursor: pointer;
padding: 6px; border-radius: 6px;
color: var(--muted-2);
display: inline-flex;
transition: color .15s, background .15s;
}
[data-page="edit"] .field .reveal:hover { color: var(--fg); background: rgba(255, 255, 255, 0.05); }
[data-page="edit"] .section-card .actions {
margin-top: 18px;
display: flex; gap: 10px; justify-content: flex-end;
align-items: center; flex-wrap: wrap;
}
[data-page="edit"] .section-card .actions .status {
margin-right: auto;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--muted-2);
letter-spacing: 0.04em;
}
[data-page="edit"] .section-card .actions .status.ok { color: #86efac; }
[data-page="edit"] .pw-strength { display: grid; gap: 8px; margin-top: 8px; }
[data-page="edit"] .pw-bar { display: flex; gap: 4px; }
[data-page="edit"] .pw-bar span {
flex: 1; height: 3px; border-radius: 2px;
background: rgba(255, 255, 255, 0.08);
transition: background .2s;
}
[data-page="edit"] .pw-bar span.s1 { background: var(--bad); }
[data-page="edit"] .pw-bar span.s2 { background: var(--warn); }
[data-page="edit"] .pw-bar span.s3 { background: var(--primary); }
[data-page="edit"] .pw-bar span.s4 { background: var(--ok); }
[data-page="edit"] .pw-checks {
display: flex; flex-wrap: wrap; gap: 6px 12px;
font-family: "JetBrains Mono", monospace;
font-size: 11px; color: var(--muted-2);
}
[data-page="edit"] .pw-checks .check { display: inline-flex; align-items: center; gap: 4px; transition: color .15s; }
[data-page="edit"] .pw-checks .check.valid { color: #86efac; }
[data-page="edit"] .pw-checks .check .mark { display: inline-block; width: 12px; }
/* ════════════════════════════════════════════════════════════════════
PAGE: 404 Not Found ([data-page="notfound"])
════════════════════════════════════════════════════════════════════ */
[data-page="notfound"] .lost {
flex: 1;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 40px 28px 60px;
text-align: center;
position: relative;
}
[data-page="notfound"] .lost-card {
max-width: 640px; width: 100%;
background: var(--card-solid);
border: 1px solid var(--border);
border-radius: 16px;
padding: 44px 36px 36px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
position: relative;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 30px 80px -20px rgba(0, 0, 0, 0.6),
0 0 60px -10px rgba(239, 68, 68, 0.2);
}
[data-page="notfound"] .lost-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.5), transparent);
}
[data-page="notfound"] .lost-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 12px;
border-radius: 999px;
background: rgba(239, 68, 68, 0.1);
color: #fca5a5;
border: 1px solid rgba(239, 68, 68, 0.3);
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.12em;
margin-bottom: 28px;
}
[data-page="notfound"] .lost-eyebrow .dot {
width: 7px; height: 7px; border-radius: 50%;
background: #f87171;
box-shadow: 0 0 8px #f87171;
animation: blink404 1.2s infinite;
}
@keyframes blink404 { 50% { opacity: 0.3; } }
[data-page="notfound"] .lost-code {
font-size: clamp(80px, 14vw, 144px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 0.9;
background: linear-gradient(180deg, white, rgba(255, 255, 255, 0.4));
-webkit-background-clip: text; background-clip: text;
color: transparent;
margin: 0 0 6px;
font-variant-numeric: tabular-nums;
position: relative;
animation: glitch 5s infinite;
}
@keyframes glitch {
0%, 95%, 100% { transform: translate(0); filter: none; }
96% { transform: translate(-2px, 0); filter: drop-shadow(2px 0 #f87171); }
97% { transform: translate(2px, 0); filter: drop-shadow(-2px 0 #60a5fa); }
98% { transform: translate(-1px, 1px); filter: drop-shadow(0 2px #f87171); }
}
[data-page="notfound"] .lost-title {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.015em;
margin: 0 0 10px;
}
[data-page="notfound"] .lost-sub {
color: var(--muted);
font-size: 14.5px;
line-height: 1.55;
max-width: 44ch;
margin: 0 auto 28px;
}
[data-page="notfound"] .lost-sub .path { color: var(--primary-2); font-family: "JetBrains Mono", monospace; word-break: break-all; }
[data-page="notfound"] .lost-term {
background: rgba(0, 0, 0, 0.4);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
text-align: left;
margin: 0 auto 28px;
font-family: "JetBrains Mono", monospace;
font-size: 12px;
color: var(--muted);
line-height: 1.7;
max-width: 460px;
}
[data-page="notfound"] .lost-term .prompt { color: rgba(var(--accent-rgb), 0.9); }
[data-page="notfound"] .lost-term .ok { color: #86efac; }
[data-page="notfound"] .lost-term .warn { color: #fcd34d; }
[data-page="notfound"] .lost-term .bad { color: #fca5a5; }
[data-page="notfound"] .lost-term .cur::after {
content: "▊";
color: var(--primary-2);
animation: blink404 1s steps(2) infinite;
margin-left: 2px;
}
[data-page="notfound"] .lost-actions {
display: flex; gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
[data-page="notfound"] .help-links {
margin-top: 24px;
padding-top: 22px;
border-top: 1px dashed var(--border);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
max-width: 540px;
margin-left: auto; margin-right: auto;
}
@media (max-width: 600px) { [data-page="notfound"] .help-links { grid-template-columns: 1fr; } }
[data-page="notfound"] .help-links a {
display: block;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
border-radius: 9px;
text-decoration: none;
color: var(--fg);
text-align: left;
transition: background .15s, border-color .15s;
}
[data-page="notfound"] .help-links a:hover {
background: rgba(var(--accent-rgb), 0.05);
border-color: rgba(var(--accent-rgb), 0.3);
}
[data-page="notfound"] .help-links a .k {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
color: rgba(var(--accent-rgb), 0.8);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 4px;
}
[data-page="notfound"] .help-links a .v { font-size: 13px; font-weight: 500; }
[data-page="subnet"] .alert {
display: flex; gap: 12px; align-items: flex-start;
padding: 14px 16px;
border-radius: 10px;
border: 1px solid;
font-size: 13.5px;
line-height: 1.5;
}
[data-page="subnet"] .alert.info { background: rgba(var(--accent-rgb), 0.06); border-color: rgba(var(--accent-rgb), 0.25); color: var(--muted); }
[data-page="subnet"] .alert.bad { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.3); color: #fca5a5; }
[data-page="subnet"] .alert b { color: var(--fg); }
[data-page="subnet"] .alert.bad b { color: #fecaca; }
[data-page="subnet"] .alert svg { flex: 0 0 auto; margin-top: 1px; }
[data-page="subnet"] .shortcuts {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
margin-top: 12px;
}
[data-page="subnet"] .shortcuts .sc-label {
font-family: "JetBrains Mono", monospace;
font-size: 11px; color: var(--muted-2); letter-spacing: 0.05em;
}
[data-page="subnet"] .shortcut-chip {
appearance: none;
background: rgba(255, 255, 255, 0.03);
border: 1px dashed var(--border-strong);
color: var(--muted);
padding: 6px 12px;
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
letter-spacing: 0.02em;
cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
}
[data-page="subnet"] .shortcut-chip:hover {
color: var(--primary-2);
border-color: rgba(var(--accent-rgb), 0.5);
background: rgba(var(--accent-rgb), 0.05);
}
/* ═══════════════════════════════════════════════════════════════════
Toasts (sonner re-estilizado) — 3 tons (ok/warn/bad) com pulse dot
à esquerda.
═══════════════════════════════════════════════════════════════════ */
[data-sonner-toaster] {
/* Sonner posiciona o container; só garantimos largura no canto. */
--width: 360px;
}
[data-sonner-toast] {
position: relative;
width: 360px;
max-width: 100%;
padding: 12px 40px 13px 36px; /* 36px à esquerda para o pulse, 40px à direita para o close button */
border-radius: 10px;
background: rgb(11, 14, 20); /* --card-solid */
border: 1px solid rgba(255, 255, 255, 0.14); /* --border-strong */
box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.012) inset;
font-family: "Inter", system-ui, -apple-system, sans-serif;
font-size: 13.5px;
line-height: 1.45;
color: var(--fg);
text-wrap: pretty;
}
/* Close button (X) — top-right, sempre visível, override do default do sonner que é top-left e on-hover */
[data-sonner-toast] [data-close-button] {
position: absolute;
top: 8px;
right: 8px;
left: auto !important;
width: 22px;
height: 22px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.65);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1 !important;
transform: none !important;
transition: background .15s, color .15s, border-color .15s;
}
[data-sonner-toast] [data-close-button]:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--fg);
border-color: rgba(255, 255, 255, 0.20);
}
[data-sonner-toast] [data-close-button] svg {
width: 12px;
height: 12px;
}
/* Linha-luz fina no topo */
[data-sonner-toast]::after {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
pointer-events: none;
}
/* Pulse dot (default = ok verde; cobre default + data-type="success") */
[data-sonner-toast]::before {
content: ""; position: absolute; left: 16px; top: 19px;
width: 8px; height: 8px; border-radius: 50%;
background: #22c55e; /* --ok */
box-shadow: 0 0 8px #22c55e;
animation: toastPulseOk 2s infinite;
}
[data-sonner-toast][data-type="warning"]::before {
background: #eab308; /* --warn */
box-shadow: 0 0 8px #eab308;
animation-name: toastPulseWarn;
}
[data-sonner-toast][data-type="error"]::before {
background: #ef4444; /* --bad */
box-shadow: 0 0 8px #ef4444;
animation-name: toastPulseBad;
}
@keyframes toastPulseOk {
0%, 100% { opacity: 1; box-shadow: 0 0 8px #22c55e, 0 0 0 0 rgba(34, 197, 94, 0.5); }
60% { opacity: 0.55; box-shadow: 0 0 8px #22c55e, 0 0 0 5px rgba(34, 197, 94, 0); }
}
@keyframes toastPulseWarn {
0%, 100% { opacity: 1; box-shadow: 0 0 8px #eab308, 0 0 0 0 rgba(234, 179, 8, 0.5); }
60% { opacity: 0.55; box-shadow: 0 0 8px #eab308, 0 0 0 5px rgba(234, 179, 8, 0); }
}
@keyframes toastPulseBad {
0%, 100% { opacity: 1; box-shadow: 0 0 8px #ef4444, 0 0 0 0 rgba(239, 68, 68, 0.5); }
60% { opacity: 0.55; box-shadow: 0 0 8px #ef4444, 0 0 0 5px rgba(239, 68, 68, 0); }
}
/* Mobile (≤480): full-width com margens; entrada só vertical herda da sonner. */
@media (max-width: 480px) {
[data-sonner-toaster] {
left: 16px !important;
right: 16px !important;
top: 16px !important;
width: auto !important;
}
[data-sonner-toast] {
width: 100%;
font-size: 12.5px;
padding: 10px 36px 11px 32px;
}
[data-sonner-toast]::before { left: 12px; top: 17px; }
[data-sonner-toast] [data-close-button] {
top: 6px;
right: 6px;
width: 20px;
height: 20px;
}
}
/* Acessibilidade: respeitar quem desliga animações. */
@media (prefers-reduced-motion: reduce) {
[data-sonner-toast]::before { animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════
Admin — área de administração. Adaptado do handoff (.adm-*),
scoped a [data-page="admin"]; tokens locais --adm-* para fidelidade.
═══════════════════════════════════════════════════════════════════ */
/* Tokens em [data-page="admin"] (não em .adm-root) para que o drawer/modal,
que são feitos via portal para o body, também os herdem. */
[data-page="admin"] {
--adm-fg: #fafafa;
--adm-muted: #a3a3a3;
--adm-muted-2: #6b7280;
--adm-border: rgba(255, 255, 255, 0.08);
--adm-border-st: rgba(255, 255, 255, 0.14);
--adm-card: rgba(15, 18, 25, 0.65);
--adm-card-solid: rgb(11, 14, 20);
--adm-primary: #3b82f6;
--adm-primary-2: #60a5fa;
--adm-rgb: 59, 130, 246;
--adm-ok: #22c55e;
--adm-pad: 28px;
padding-bottom: 0;
}
/* Wrapper do portal (drawer/modal montados no body): não gera caixa,
só serve para herdar os tokens e fazer match dos seletores scoped. */
.adm-portal { display: contents; }
[data-page="admin"] .adm-root {
position: relative;
z-index: 1;
width: 100%;
max-width: 1400px;
margin: 0 auto;
color: var(--adm-fg);
isolation: isolate;
}
[data-page="admin"] .adm-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
[data-page="admin"] .adm-mono--dim { color: var(--adm-muted-2); }
/* Header */
[data-page="admin"] .adm-header {
padding: clamp(24px, 3vw, 36px) var(--adm-pad) 0;
}
[data-page="admin"] .adm-header__top {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 14px;
}
[data-page="admin"] .adm-crumb {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11.5px; letter-spacing: 0.04em;
color: var(--adm-muted-2);
display: inline-flex; align-items: baseline; gap: 4px;
}
[data-page="admin"] .adm-crumb__sigil { color: var(--adm-primary-2); }
[data-page="admin"] .adm-crumb__sep { color: var(--adm-muted-2); padding: 0 2px; }
[data-page="admin"] .adm-crumb__seg { color: var(--adm-muted); }
[data-page="admin"] .adm-crumb__cur { color: var(--adm-primary-2); }
[data-page="admin"] .adm-eyebrow {
display: inline-flex; align-items: center; gap: 7px;
padding: 4px 10px;
border: 1px solid var(--adm-border-st);
border-radius: 999px;
background: rgba(var(--adm-rgb), 0.08);
color: var(--adm-primary-2);
font-size: 10.5px; font-family: "JetBrains Mono", ui-monospace, monospace;
letter-spacing: 0.08em;
}
[data-page="admin"] .adm-pulse {
width: 6px; height: 6px; border-radius: 50%;
background: var(--adm-ok); box-shadow: 0 0 6px var(--adm-ok);
animation: adm-pulse-anim 2s infinite;
}
@keyframes adm-pulse-anim { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
[data-page="admin"] .adm-header__bottom {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px; padding-bottom: 22px; flex-wrap: wrap;
}
[data-page="admin"] .adm-title {
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 600; letter-spacing: -0.022em; line-height: 1.05; margin: 0;
}
[data-page="admin"] .adm-sub { margin: 4px 0 0; font-size: 14.5px; color: var(--adm-muted); max-width: 60ch; }
[data-page="admin"] .adm-statgrid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px; min-width: 360px;
}
[data-page="admin"] .adm-stat {
padding: 10px 14px; border: 1px solid var(--adm-border);
border-radius: 10px; background: rgba(255, 255, 255, 0.02);
}
[data-page="admin"] .adm-stat__k {
font-family: "JetBrains Mono", monospace; font-size: 9.5px;
letter-spacing: 0.1em; color: var(--adm-muted-2); text-transform: uppercase;
}
[data-page="admin"] .adm-stat__v {
font-size: 22px; font-weight: 600; margin-top: 2px;
letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
/* Tabs */
[data-page="admin"] .adm-tabs {
position: relative; display: flex; gap: 0;
padding: 0 var(--adm-pad);
border-bottom: 1px solid var(--adm-border);
overflow-x: auto; scrollbar-width: none;
}
[data-page="admin"] .adm-tabs::-webkit-scrollbar { display: none; }
[data-page="admin"] .adm-tab {
appearance: none; border: 0; background: transparent;
color: var(--adm-muted);
padding: 14px 18px 13px;
font-family: inherit; font-size: 13.5px; font-weight: 500;
cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
border-bottom: 2px solid transparent; margin-bottom: -1px;
white-space: nowrap; transition: color .15s, border-color .15s;
}
[data-page="admin"] .adm-tab:hover { color: var(--adm-fg); }
[data-page="admin"] .adm-tab.is-active { color: var(--adm-primary-2); border-bottom-color: var(--adm-primary); }
[data-page="admin"] .adm-tab__short { display: none; }
[data-page="admin"] .adm-tab__count {
font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.04em;
padding: 2px 6px; border-radius: 5px;
background: rgba(255, 255, 255, 0.05); color: var(--adm-muted-2);
}
[data-page="admin"] .adm-tab.is-active .adm-tab__count { background: rgba(var(--adm-rgb), 0.16); color: var(--adm-primary-2); }
/* Main / Toolbar */
[data-page="admin"] .adm-main { padding: 24px var(--adm-pad) 80px; }
[data-page="admin"] .adm-toolbar {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
[data-page="admin"] .adm-toolbar__left { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1 1 auto; }
[data-page="admin"] .adm-toolbar__h {
display: inline-flex; align-items: baseline; gap: 8px;
font-family: "JetBrains Mono", monospace; font-size: 11px;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--adm-muted-2);
}
[data-page="admin"] .adm-toolbar__caret { color: rgba(var(--adm-rgb), 0.85); }
[data-page="admin"] .adm-toolbar__title { color: var(--adm-fg); }
[data-page="admin"] .adm-toolbar__count { color: rgba(var(--adm-rgb), 0.7); }
[data-page="admin"] .adm-toolbar__right { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
[data-page="admin"] .adm-search { position: relative; display: inline-flex; align-items: center; }
[data-page="admin"] .adm-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--adm-muted-2); }
[data-page="admin"] .adm-search input {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--adm-border);
color: var(--adm-fg); border-radius: 9px;
padding: 8px 12px 8px 30px;
font-size: 12.5px; font-family: "JetBrains Mono", monospace;
outline: none; width: 240px; transition: border-color .15s, background .15s;
}
[data-page="admin"] .adm-search input:focus { border-color: rgba(var(--adm-rgb), 0.5); background: rgba(255, 255, 255, 0.06); }
/* Buttons */
[data-page="admin"] .adm-btn {
appearance: none; border: 0;
display: inline-flex; align-items: center; gap: 7px;
font-family: inherit; font-weight: 500; font-size: 13px;
padding: 9px 14px; border-radius: 9px; cursor: pointer;
color: var(--adm-fg); text-decoration: none;
transition: transform .1s, background .15s, border-color .15s;
}
[data-page="admin"] .adm-btn:active { transform: translateY(1px); }
[data-page="admin"] .adm-btn:disabled { opacity: 0.45; cursor: not-allowed; }
[data-page="admin"] .adm-btn--primary {
background: var(--adm-primary); color: #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 6px 22px -8px rgba(var(--adm-rgb), 0.7);
}
[data-page="admin"] .adm-btn--primary:hover:not(:disabled) { background: color-mix(in oklab, var(--adm-primary) 90%, white); }
[data-page="admin"] .adm-btn--ghost { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--adm-border); color: var(--adm-fg); }
[data-page="admin"] .adm-btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: var(--adm-border-st); }
[data-page="admin"] .adm-btn--danger { background: rgba(239, 68, 68, 0.16); border: 1px solid rgba(239, 68, 68, 0.5); color: #fca5a5; }
[data-page="admin"] .adm-btn--danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.24); color: #fecaca; }
[data-page="admin"] .adm-btn--warn { background: rgba(234, 179, 8, 0.16); border: 1px solid rgba(234, 179, 8, 0.5); color: #fcd34d; }
[data-page="admin"] .adm-btn--warn:hover:not(:disabled) { background: rgba(234, 179, 8, 0.24); color: #fde68a; }
[data-page="admin"] .adm-iconbtn {
appearance: none; width: 30px; height: 30px; border-radius: 8px;
border: 1px solid var(--adm-border); background: rgba(255, 255, 255, 0.03);
color: var(--adm-muted);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; transition: color .15s, background .15s, border-color .15s;
}
[data-page="admin"] .adm-iconbtn:hover:not(:disabled) { color: var(--adm-fg); background: rgba(255, 255, 255, 0.07); border-color: var(--adm-border-st); }
[data-page="admin"] .adm-iconbtn:disabled { opacity: 0.35; cursor: not-allowed; }
[data-page="admin"] .adm-iconbtn--danger:hover:not(:disabled) { color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.1); }
[data-page="admin"] .adm-rowact { display: inline-flex; gap: 6px; }
/* List / table */
[data-page="admin"] .adm-list {
border: 1px solid var(--adm-border); border-radius: 12px;
background: var(--adm-card);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
overflow: hidden;
}
[data-page="admin"] .adm-row {
display: grid; align-items: center; gap: 14px;
padding: 12px 16px; border-bottom: 1px solid var(--adm-border);
}
[data-page="admin"] .adm-row:last-child { border-bottom: 0; }
[data-page="admin"] .adm-row--head {
background: rgba(255, 255, 255, 0.025);
font-family: "JetBrains Mono", monospace; font-size: 10px;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--adm-muted-2); padding: 10px 16px;
}
[data-page="admin"] .adm-row:not(.adm-row--head):hover { background: rgba(255, 255, 255, 0.025); }
[data-page="admin"] .adm-row:has(.adm-col--user) { grid-template-columns: 2.4fr 160px 110px 90px 110px; }
[data-page="admin"] .adm-col--user .adm-col--role,
[data-page="admin"] .adm-row:has(.adm-col--user) .adm-col--role {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
[data-page="admin"] .adm-row:has(.adm-col--user) .adm-col--role .adm-badge {
display: inline-flex; align-items: center; gap: 4px;
}
[data-page="admin"] .adm-name { font-weight: 500; font-size: 14px; letter-spacing: -0.005em; }
[data-page="admin"] .adm-pill {
display: inline-flex; font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.02em; padding: 3px 9px;
border-radius: 6px; border: 1px solid var(--adm-border);
background: rgba(255, 255, 255, 0.04); color: var(--adm-muted);
}
[data-page="admin"] .adm-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
[data-page="admin"] .adm-user__av {
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
background: linear-gradient(135deg, rgba(var(--adm-rgb), 0.32), rgba(var(--adm-rgb), 0.1));
border: 1px solid var(--adm-border-st);
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 12px; color: var(--adm-primary-2); letter-spacing: 0.02em;
}
[data-page="admin"] .adm-user__txt { min-width: 0; }
[data-page="admin"] .adm-user__name { font-weight: 500; font-size: 13.5px; display: flex; gap: 6px; align-items: baseline; }
[data-page="admin"] .adm-user__me { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.04em; color: var(--adm-muted-2); }
[data-page="admin"] .adm-user__email {
font-family: "JetBrains Mono", monospace; font-size: 11px;
color: var(--adm-muted-2); letter-spacing: 0.01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-page="admin"] .adm-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 8px; border-radius: 999px;
font-family: "JetBrains Mono", monospace; font-size: 10.5px;
letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
[data-page="admin"] .adm-badge--ok { background: rgba(34, 197, 94, 0.12); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.3); }
[data-page="admin"] .adm-badge--warn { background: rgba(234, 179, 8, 0.12); color: #fcd34d; border: 1px solid rgba(234, 179, 8, 0.3); }
[data-page="admin"] .adm-badge--bad { background: rgba(239, 68, 68, 0.12); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }
[data-page="admin"] .adm-badge--neutral { background: rgba(255, 255, 255, 0.05); color: var(--adm-muted); border: 1px solid var(--adm-border); }
[data-page="admin"] .adm-badge--primary { background: rgba(var(--adm-rgb), 0.13); color: var(--adm-primary-2); border: 1px solid rgba(var(--adm-rgb), 0.35); }
/* Empty state */
[data-page="admin"] .adm-empty {
display: flex; flex-direction: column; align-items: center;
gap: 10px; padding: 48px 24px; text-align: center;
}
[data-page="admin"] .adm-empty__sigil { color: rgba(var(--adm-rgb), 0.55); margin-bottom: 4px; }
[data-page="admin"] .adm-empty__ttl { font-size: 15px; font-weight: 500; color: var(--adm-fg); letter-spacing: -0.005em; }
[data-page="admin"] .adm-empty__hint {
font-size: 13px; color: var(--adm-muted); max-width: 42ch;
font-family: "JetBrains Mono", monospace; letter-spacing: 0.01em;
}
/* Confirm modal (fixed overlay, acima da navbar sticky z:50) */
[data-page="admin"] .adm-modal {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center; padding: 20px;
}
[data-page="admin"] .adm-modal__scrim {
position: absolute; inset: 0;
background: rgba(5, 7, 10, 0.7);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
animation: adm-fade-in .2s ease;
}
[data-page="admin"] .adm-modal__panel {
position: relative; width: 100%; max-width: 520px;
background: var(--adm-card-solid);
border: 1px solid var(--adm-border-st); border-radius: 14px;
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 0 60px -10px rgba(239, 68, 68, 0.15);
animation: adm-modal-in .22s cubic-bezier(.2, .7, .3, 1); overflow: hidden;
}
[data-page="admin"] .adm-modal__panel::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.55), transparent);
}
[data-page="admin"] .adm-modal--primary .adm-modal__panel::before { background: linear-gradient(90deg, transparent, rgba(var(--adm-rgb), 0.55), transparent); }
[data-page="admin"] .adm-modal--warn .adm-modal__panel::before { background: linear-gradient(90deg, transparent, rgba(234, 179, 8, 0.55), transparent); }
@keyframes adm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes adm-modal-in { from { transform: translateY(8px) scale(0.98); opacity: 0.7; } to { transform: none; opacity: 1; } }
[data-page="admin"] .adm-modal__head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 22px 14px; }
[data-page="admin"] .adm-modal__icon {
width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px;
background: rgba(239, 68, 68, 0.16); border: 1px solid rgba(239, 68, 68, 0.4); color: #fca5a5;
display: flex; align-items: center; justify-content: center;
}
[data-page="admin"] .adm-modal--primary .adm-modal__icon { background: rgba(var(--adm-rgb), 0.16); border-color: rgba(var(--adm-rgb), 0.4); color: var(--adm-primary-2); }
[data-page="admin"] .adm-modal--warn .adm-modal__icon { background: rgba(234, 179, 8, 0.16); border-color: rgba(234, 179, 8, 0.4); color: #fcd34d; }
[data-page="admin"] .adm-modal__crumb { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.06em; color: var(--adm-muted-2); margin-bottom: 4px; }
[data-page="admin"] .adm-modal__ttl { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
[data-page="admin"] .adm-modal__body { padding: 4px 22px 18px; }
[data-page="admin"] .adm-modal__intro { font-size: 13.5px; color: var(--adm-fg); margin: 0 0 14px; line-height: 1.55; }
[data-page="admin"] .adm-modal__target {
border: 1px solid var(--adm-border); border-radius: 9px;
padding: 10px 12px; background: rgba(255, 255, 255, 0.02); margin-bottom: 12px;
}
[data-page="admin"] .adm-modal__targetk { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--adm-muted-2); }
[data-page="admin"] .adm-modal__targetv { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--adm-fg); margin-top: 2px; word-break: break-word; }
[data-page="admin"] .adm-modal__cascade {
border: 1px dashed rgba(239, 68, 68, 0.32); border-radius: 9px;
padding: 10px 12px; background: rgba(239, 68, 68, 0.04); margin-bottom: 12px;
}
[data-page="admin"] .adm-modal__cascadek { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #fca5a5; margin-bottom: 6px; }
[data-page="admin"] .adm-modal__cascade ul { margin: 0; padding: 0; list-style: none; }
[data-page="admin"] .adm-modal__cascade li {
display: flex; gap: 8px; font-size: 12.5px; color: var(--adm-muted);
padding: 3px 0; font-family: "JetBrains Mono", monospace; letter-spacing: 0.01em;
}
[data-page="admin"] .adm-modal__bullet { color: rgba(239, 68, 68, 0.85); flex: 0 0 auto; }
[data-page="admin"] .adm-modal__hint { font-size: 11.5px; color: var(--adm-muted-2); font-family: "JetBrains Mono", monospace; letter-spacing: 0.04em; }
[data-page="admin"] .adm-modal__foot {
display: flex; justify-content: flex-end; gap: 10px;
padding: 14px 22px 20px; border-top: 1px solid var(--adm-border);
background: rgba(255, 255, 255, 0.012);
}
/* Responsivo ≤720px — tabela vira cartões, modal full-width */
@media (max-width: 720px) {
[data-page="admin"] .adm-root { --adm-pad: 16px; }
[data-page="admin"] .adm-title { font-size: 26px; }
[data-page="admin"] .adm-sub { font-size: 13px; }
[data-page="admin"] .adm-tab__label { display: none; }
[data-page="admin"] .adm-tab__short { display: inline; }
[data-page="admin"] .adm-statgrid { min-width: 0; width: 100%; grid-template-columns: repeat(3, 1fr); }
[data-page="admin"] .adm-toolbar { flex-direction: column; align-items: stretch; }
[data-page="admin"] .adm-toolbar__right { flex-direction: column; align-items: stretch; }
[data-page="admin"] .adm-search { flex: 1 1 auto; width: 100%; }
[data-page="admin"] .adm-search input { width: 100%; }
[data-page="admin"] .adm-list { background: transparent; border: 0; }
[data-page="admin"] .adm-list .adm-row--head { display: none; }
[data-page="admin"] .adm-row:not(.adm-row--head) {
position: relative;
display: flex; flex-direction: column; align-items: stretch; gap: 8px;
border: 1px solid var(--adm-border); border-radius: 11px;
background: var(--adm-card); padding: 14px; margin-bottom: 10px;
}
[data-page="admin"] .adm-row:last-child { margin-bottom: 0; }
[data-page="admin"] .adm-row:not(.adm-row--head):hover { background: var(--adm-card); }
[data-page="admin"] .adm-col { display: block; min-width: 0; }
[data-page="admin"] .adm-col--role,
[data-page="admin"] .adm-col--date,
[data-page="admin"] .adm-col--qz { display: flex; align-items: baseline; gap: 8px; }
[data-page="admin"] .adm-col--role::before { content: "role"; }
[data-page="admin"] .adm-col--date::before { content: "criado"; }
[data-page="admin"] .adm-col--qz::before { content: "quizzes"; }
[data-page="admin"] [class*="adm-col--"]::before {
font-family: "JetBrains Mono", monospace; font-size: 10.5px;
letter-spacing: 0.1em; text-transform: uppercase;
color: rgba(96, 165, 250, 0.55); flex: 0 0 80px; font-weight: 500;
}
[data-page="admin"] .adm-col--user { border-bottom: 1px dashed var(--adm-border); padding-bottom: 8px; }
[data-page="admin"] .adm-col--act { display: flex; gap: 8px; margin-top: 4px; }
}
/* ─── Admin · Categorias (lista) ─────────────────────────────────── */
[data-page="admin"] .adm-list--cats .adm-row { grid-template-columns: 48px 1.4fr 2fr 90px 110px; }
[data-page="admin"] .adm-name__id {
font-family: "JetBrains Mono", monospace; font-size: 10.5px;
color: var(--adm-muted-2); letter-spacing: 0.04em; margin-top: 1px;
}
[data-page="admin"] .adm-col--desc { color: var(--adm-muted); font-size: 13px; line-height: 1.45; }
[data-page="admin"] .adm-col--n .adm-mono { font-size: 13px; }
/* ─── Admin · Drawer (painel de formulário) ──────────────────────── */
[data-page="admin"] .adm-drawer {
position: fixed; inset: 0; z-index: 900;
display: flex; justify-content: flex-end;
}
[data-page="admin"] .adm-drawer__scrim {
position: absolute; inset: 0;
background: rgba(5, 7, 10, 0.65);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
animation: adm-fade-in .2s ease;
}
[data-page="admin"] .adm-drawer__panel {
position: relative; width: 560px; max-width: 100%;
background: var(--adm-card-solid);
border-left: 1px solid var(--adm-border-st);
box-shadow: -20px 0 60px -10px rgba(0, 0, 0, 0.6);
display: flex; flex-direction: column;
animation: adm-slide-in .25s cubic-bezier(.2, .7, .3, 1) both;
}
[data-page="admin"] .adm-drawer__panel::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--adm-rgb), 0.5), transparent);
}
@keyframes adm-slide-in { from { transform: translateX(20px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes adm-slide-up { from { transform: translateY(20px); opacity: 0.6; } to { transform: none; opacity: 1; } }
[data-page="admin"] .adm-drawer__head {
padding: 20px 22px 18px; border-bottom: 1px solid var(--adm-border);
display: flex; justify-content: space-between; align-items: flex-start;
gap: 12px; flex: 0 0 auto;
}
[data-page="admin"] .adm-drawer__crumb {
font-family: "JetBrains Mono", monospace; font-size: 10.5px;
letter-spacing: 0.06em; color: var(--adm-muted-2); margin-bottom: 6px;
}
[data-page="admin"] .adm-drawer__ttl { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
[data-page="admin"] .adm-drawer__sub { margin: 4px 0 0; font-size: 13px; color: var(--adm-muted); max-width: 50ch; }
[data-page="admin"] .adm-drawer__body { flex: 1 1 auto; overflow: auto; padding: 20px 22px 24px; }
/* ─── Admin · Campos de formulário ──────────────────────────────── */
[data-page="admin"] .adm-monolabel {
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px;
font-family: "JetBrains Mono", monospace; font-size: 10.5px;
letter-spacing: 0.08em; color: var(--adm-muted-2);
text-transform: uppercase; margin-bottom: 6px;
}
[data-page="admin"] .adm-monolabel__hint { font-size: 10px; text-transform: none; letter-spacing: 0.02em; opacity: 0.7; }
[data-page="admin"] .adm-field { margin-bottom: 14px; }
[data-page="admin"] .adm-input {
width: 100%;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--adm-border-st);
color: var(--adm-fg); border-radius: 9px;
padding: 10px 12px; font-size: 14px; outline: none;
font-family: inherit; resize: none;
transition: border-color .15s, background .15s, box-shadow .15s;
}
[data-page="admin"] .adm-input--mono { font-family: "JetBrains Mono", monospace; font-size: 13px; }
[data-page="admin"] .adm-input--num { width: 120px; }
[data-page="admin"] .adm-input:focus {
border-color: rgba(var(--adm-rgb), 0.7);
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 0 0 3px rgba(var(--adm-rgb), 0.15);
}
[data-page="admin"] .adm-field.is-error .adm-input { border-color: rgba(239, 68, 68, 0.6); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); }
[data-page="admin"] .adm-field__err { margin-top: 4px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: #fca5a5; }
[data-page="admin"] .adm-field__err::before { content: "⚠ "; }
[data-page="admin"] select.adm-input {
appearance: none;
/* popup nativo em tema escuro (senão fica branco/ilegível) */
color-scheme: dark;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
[data-page="admin"] select.adm-input option {
background: var(--adm-card-solid);
color: var(--adm-fg);
}
[data-page="admin"] .adm-formact {
display: flex; gap: 10px; justify-content: flex-end;
margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--adm-border);
}
@media (max-width: 720px) {
[data-page="admin"] .adm-drawer__panel {
width: 100%; border-left: 0;
animation: adm-slide-up .25s cubic-bezier(.2, .7, .3, 1);
}
[data-page="admin"] .adm-col--name {
border-bottom: 1px dashed var(--adm-border); padding-bottom: 8px;
}
[data-page="admin"] .adm-col--desc,
[data-page="admin"] .adm-col--n { display: flex; align-items: baseline; gap: 8px; }
[data-page="admin"] .adm-col--desc::before { content: "descrição"; }
[data-page="admin"] .adm-col--n::before { content: "tópicos"; }
[data-page="admin"] .adm-col--ord { position: absolute; top: 14px; right: 14px; }
}
/* ─── Admin · Tópicos (lista + chips de categoria) ───────────────── */
[data-page="admin"] .adm-list--topics .adm-row { grid-template-columns: 48px 2.2fr 1.4fr 80px 110px; }
[data-page="admin"] .adm-name__desc {
font-size: 12.5px; color: var(--adm-muted); margin-top: 1px; line-height: 1.4;
}
[data-page="admin"] .adm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
/* Fila de chips como bloco próprio por baixo da toolbar (não dentro dela). */
[data-page="admin"] .adm-chips--rail { margin-top: -4px; margin-bottom: 16px; }
[data-page="admin"] .adm-chip {
appearance: none;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--adm-border);
color: var(--adm-muted);
padding: 5px 11px; border-radius: 999px;
font-size: 11.5px; font-family: "JetBrains Mono", monospace;
letter-spacing: 0.02em; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
transition: color .15s, background .15s, border-color .15s;
}
[data-page="admin"] .adm-chip:hover { color: var(--adm-fg); background: rgba(255, 255, 255, 0.05); }
[data-page="admin"] .adm-chip.is-active {
color: var(--adm-primary-2);
background: rgba(var(--adm-rgb), 0.13);
border-color: rgba(var(--adm-rgb), 0.4);
}
[data-page="admin"] .adm-chip__n {
font-size: 9.5px; padding: 1px 5px; border-radius: 5px;
background: rgba(255, 255, 255, 0.06); color: var(--adm-muted-2);
}
[data-page="admin"] .adm-chip.is-active .adm-chip__n { background: rgba(var(--adm-rgb), 0.22); color: var(--adm-primary-2); }
@media (max-width: 720px) {
[data-page="admin"] .adm-col--ttl {
border-bottom: 1px dashed var(--adm-border); padding-bottom: 8px;
}
[data-page="admin"] .adm-col--cat,
[data-page="admin"] .adm-col--hasquiz { display: flex; align-items: baseline; gap: 8px; }
[data-page="admin"] .adm-col--cat::before { content: "categoria"; }
[data-page="admin"] .adm-col--hasquiz::before { content: "quiz"; }
}
/* ─── Admin · Quizzes (lista + editor de perguntas) ──────────────── */
[data-page="admin"] .adm-list--quizzes .adm-row { grid-template-columns: 1.6fr 1.8fr 130px 110px; }
[data-page="admin"] .adm-col--qcount { display: inline-flex; align-items: baseline; gap: 6px; }
[data-page="admin"] .adm-col--qcount .adm-mono:first-child { font-size: 15px; color: var(--adm-fg); }
[data-page="admin"] .adm-col--qcount .adm-mono--dim { font-size: 10.5px; letter-spacing: 0.04em; }
[data-page="admin"] .adm-qsec { margin-top: 6px; }
[data-page="admin"] .adm-qsec__head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 12px; margin-bottom: 10px;
}
[data-page="admin"] .adm-btn--sm { padding: 6px 10px; font-size: 11.5px; border-radius: 7px; }
[data-page="admin"] .adm-iconbtn--sm { width: 26px; height: 26px; border-radius: 6px; }
[data-page="admin"] .adm-qlist { display: flex; flex-direction: column; gap: 10px; }
[data-page="admin"] .adm-qcard {
border: 1px solid var(--adm-border);
background: rgba(255, 255, 255, 0.02);
border-radius: 10px; padding: 14px;
display: flex; flex-direction: column; gap: 10px;
}
[data-page="admin"] .adm-qcard__head { display: flex; justify-content: space-between; align-items: center; }
[data-page="admin"] .adm-qcard__num {
font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em;
color: rgba(var(--adm-rgb), 0.85);
padding: 3px 8px; border-radius: 6px;
background: rgba(var(--adm-rgb), 0.1); border: 1px solid rgba(var(--adm-rgb), 0.25);
}
[data-page="admin"] .adm-qcard__nav { display: inline-flex; gap: 4px; }
[data-page="admin"] .adm-qopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
[data-page="admin"] .adm-qopt {
display: flex; align-items: center; gap: 8px;
padding: 4px; border: 1px solid var(--adm-border);
border-radius: 8px; background: rgba(255, 255, 255, 0.015); cursor: pointer;
}
[data-page="admin"] .adm-qopt.is-correct {
border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.06);
}
[data-page="admin"] .adm-qopt input[type="radio"] { accent-color: var(--adm-ok); margin: 0 4px; flex: 0 0 auto; }
[data-page="admin"] .adm-qopt__mark {
flex: 0 0 auto;
width: 22px; height: 22px; border-radius: 5px;
background: rgba(255, 255, 255, 0.06); color: var(--adm-muted-2);
display: inline-flex; align-items: center; justify-content: center;
}
[data-page="admin"] .adm-qopt.is-correct .adm-qopt__mark { background: rgba(34, 197, 94, 0.18); color: #86efac; }
[data-page="admin"] .adm-qopt__tag {
flex: 0 0 auto;
font-family: "JetBrains Mono", monospace; font-size: 9.5px;
letter-spacing: 0.06em; text-transform: uppercase;
padding: 2px 7px; border-radius: 999px;
background: rgba(255, 255, 255, 0.05); color: var(--adm-muted-2);
}
[data-page="admin"] .adm-qopt.is-correct .adm-qopt__tag {
background: rgba(34, 197, 94, 0.14); color: #86efac;
}
[data-page="admin"] .adm-input--long { min-height: 160px; }
/* Resposta = ExpandableTextarea compacto dentro da linha da opção. */
[data-page="admin"] .adm-qopt .adm-ta { flex: 1 1 auto; min-width: 0; }
[data-page="admin"] .adm-qopt .adm-ta .adm-input {
padding: 7px 32px 7px 10px; font-size: 12.5px; min-height: 0;
overflow: hidden; /* caixa pequena, sem scroll — para texto grande usa-se o ⤢ */
}
[data-page="admin"] .adm-qopt .adm-ta__expand { top: 6px; right: 6px; width: 22px; height: 22px; }
@media (max-width: 720px) {
[data-page="admin"] .adm-list--quizzes .adm-col--ttl {
border-bottom: 1px dashed var(--adm-border); padding-bottom: 8px;
}
[data-page="admin"] .adm-col--topic,
[data-page="admin"] .adm-col--qcount { display: flex; align-items: baseline; gap: 8px; }
[data-page="admin"] .adm-col--topic::before { content: "tópico"; }
[data-page="admin"] .adm-col--qcount::before { content: "perguntas"; }
[data-page="admin"] .adm-qopts { grid-template-columns: 1fr; }
}
/* ─── Admin · Textarea expansível (editor em pop-up) ─────────────── */
[data-page="admin"] .adm-ta { position: relative; }
[data-page="admin"] .adm-ta .adm-input { padding-right: 48px; }
[data-page="admin"] .adm-ta__expand {
position: absolute; top: 8px; right: 16px; /* 16px = ~10px scrollbar + folga */
appearance: none; border: 1px solid var(--adm-border);
background: rgba(255, 255, 255, 0.04); color: var(--adm-muted-2);
width: 26px; height: 26px; border-radius: 6px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; transition: color .15s, background .15s, border-color .15s;
}
[data-page="admin"] .adm-ta__expand:hover {
color: var(--adm-primary-2); background: rgba(var(--adm-rgb), 0.1);
border-color: rgba(var(--adm-rgb), 0.4);
}
[data-page="admin"] .adm-modal--editor .adm-modal__panel {
max-width: 860px; max-height: 88vh;
display: flex; flex-direction: column;
}
[data-page="admin"] .adm-modal--editor .adm-modal__panel::before {
background: linear-gradient(90deg, transparent, rgba(var(--adm-rgb), 0.5), transparent);
}
[data-page="admin"] .adm-ta-modal__head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; padding: 20px 22px 14px;
border-bottom: 1px solid var(--adm-border); flex: 0 0 auto;
}
[data-page="admin"] .adm-ta-modal__body { padding: 18px 22px; flex: 1 1 auto; overflow: auto; }
[data-page="admin"] .adm-ta-modal__field {
width: 100%; min-height: 52vh; max-height: 60vh; resize: none;
}
/* ═══════════════════════════════════════════════════════════════════
Scrollbars — estilo único (escuro/azul, fino, moderno) em TUDO:
vertical, horizontal, textareas, tabelas, drawers, modais, página.
(Os admin-tabs escondem a sua de propósito — regra mais específica.)
═══════════════════════════════════════════════════════════════════ */
* {
scrollbar-width: thin;
scrollbar-color: #102e52 transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: #102e52;
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background: #1b4a7e;
background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }
/* ════════════════════════════════════════════════════════════════════
PAGE: Routing Tables ([data-page="routing-tables"])
════════════════════════════════════════════════════════════════════ */
[data-page="routing-tables"] {
max-width: 1280px; margin: 0 auto; padding: 32px 28px 80px;
}
/* O wrapper [data-page] já dá max-width + padding lateral; o .page-head
global voltaria a aplicar os seus → hero ficava indentado a mais que as
secções. Neutraliza a caixa própria do .page-head só nesta página. */
[data-page="routing-tables"] .page-head {
max-width: none; width: auto; margin: 0; padding: 0;
}
[data-page="routing-tables"] .accent { color: var(--primary-2); }
[data-page="routing-tables"] .rt-meta {
display: flex; flex-wrap: wrap; gap: 14px 22px;
margin-top: 18px; font-family: "JetBrains Mono", monospace; font-size: 11.5px;
color: var(--muted); letter-spacing: 0.02em;
}
[data-page="routing-tables"] .rt-meta .item {
display: inline-flex; align-items: center; gap: 7px;
}
[data-page="routing-tables"] .rt-meta .dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--primary-2);
box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
}
/* Tabs do Caderno (Tabelas e ARQ / VLSM / ARQ / Comandos) — mesmo estilo
dos tabs do admin: planos, indicador de sublinhado, sem caixa com borda. */
[data-page="routing-tables"] .rt-tabs {
position: relative; display: flex; gap: 0;
margin: 36px 0 24px;
border-bottom: 1px solid var(--border);
overflow-x: auto; scrollbar-width: none;
}
[data-page="routing-tables"] .rt-tabs::-webkit-scrollbar { display: none; }
[data-page="routing-tables"] .rt-tab {
appearance: none; border: 0; background: transparent;
color: var(--muted);
padding: 14px 18px 13px;
font-family: "Inter", sans-serif; font-size: 13.5px; font-weight: 500;
text-decoration: none; cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
border-bottom: 2px solid transparent; margin-bottom: -1px;
white-space: nowrap; transition: color .15s, border-color .15s;
}
[data-page="routing-tables"] .rt-tab:hover { color: var(--fg); }
[data-page="routing-tables"] .rt-tab.is-active {
color: var(--primary-2); border-bottom-color: var(--primary);
}
[data-page="routing-tables"] .rt-tab .n {
font-family: "JetBrains Mono", monospace; font-size: 10px;
letter-spacing: 0.04em;
padding: 2px 6px; border-radius: 5px;
background: rgba(255, 255, 255, 0.05); color: var(--muted-2);
}
[data-page="routing-tables"] .rt-tab.is-active .n {
background: rgba(var(--accent-rgb), 0.16); color: var(--primary-2);
}
[data-page="routing-tables"] .rt-main { display: grid; gap: 36px; }
/* Itens do grid principal não devem expandir além do viewport por causa de
conteúdo interno (ex.: tabelas do inspector). min-width: 0 permite que
encolham — o overflow horizontal fica contido nas tabelas internas. */
[data-page="routing-tables"] .rt-main > * { min-width: 0; }
[data-page="routing-tables"] .inspector { min-width: 0; }
[data-page="routing-tables"] .insp-section { min-width: 0; }
/* ─── Section head shared (Notebook + Calculadora) ─── */
[data-page="routing-tables"] .rt-sec-head {
margin-bottom: 20px;
}
[data-page="routing-tables"] .rt-sec-head .num,
[data-page="subnet"] .rt-sec-head .num {
display: inline-flex; align-items: baseline; gap: 7px;
font-family: "JetBrains Mono", monospace; font-size: 11px;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--fg);
margin-bottom: 10px;
}
[data-page="routing-tables"] .rt-sec-head .num::before,
[data-page="subnet"] .rt-sec-head .num::before {
content: "▸"; color: rgba(var(--accent-rgb), 0.85);
}
[data-page="routing-tables"] .rt-sec-head .num .c,
[data-page="subnet"] .rt-sec-head .num .c {
color: rgba(var(--accent-rgb), 0.7);
}
[data-page="routing-tables"] .rt-sec-head h2,
[data-page="subnet"] .rt-sec-head h2 {
font-size: clamp(22px, 2.6vw, 28px); font-weight: 600;
letter-spacing: -0.015em; margin: 0; line-height: 1.15;
}
[data-page="routing-tables"] .rt-sec-head .lede,
[data-page="subnet"] .rt-sec-head .lede {
color: var(--muted); font-size: 14px; line-height: 1.55;
margin: 8px 0 0; max-width: 75ch;
}
/* Subnet calculator: cada é um container flex que estilha
header + blocos de conteúdo com o mesmo gap do calc-main. */
[data-page="subnet"] .calc-main > section {
display: flex; flex-direction: column; gap: 22px;
}
/* ─── Triptych (3 cards lado a lado) ──────────────────────────────── */
[data-page="routing-tables"] .rt-triptych {
display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 18px;
}
[data-page="routing-tables"] .rt-triptych-foot {
margin: 16px 0 0;
font-size: 12.5px;
color: var(--muted-2);
text-align: center;
line-height: 1.55;
}
/* ─── Exercícios P — grid 2x2 das técnicas de janela deslizante ─────── */
[data-page="routing-tables"] .rt-arq-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
@media (max-width: 760px) {
[data-page="routing-tables"] .rt-arq-grid { grid-template-columns: 1fr; }
}
/* ─── Exercícios P — toggle de notação (ACKᵢ₊₁ vs ACKᵢ) ─────────────── */
[data-page="routing-tables"] .rt-notation-toggle {
display: inline-flex; gap: 4px;
margin: 14px 0 12px;
padding: 4px;
background: rgba(15, 18, 25, 0.55);
border: 1px solid var(--border);
border-radius: 10px;
}
[data-page="routing-tables"] .rt-notation-opt {
appearance: none;
display: inline-flex; align-items: center;
padding: 8px 14px;
background: transparent; border: 0; border-radius: 6px;
color: var(--muted); cursor: pointer;
font-family: "JetBrains Mono", monospace; font-size: 12px;
line-height: 1.2;
transition: background .15s, color .15s;
}
[data-page="routing-tables"] .rt-notation-opt:hover { color: var(--fg); }
[data-page="routing-tables"] .rt-notation-opt.is-active {
background: rgba(var(--accent-rgb), 0.15);
color: var(--fg);
}
/* ─── Exercícios P — painel de cenário ──────────────────────────────── */
[data-page="routing-tables"] .rt-scen-panel {
background: var(--card-solid);
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px;
position: relative;
margin-top: 16px;
}
[data-page="routing-tables"] .rt-scen-panel::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
}
[data-page="routing-tables"] .rt-scen-section + .rt-scen-redo {
margin-top: 28px; padding-top: 24px;
border-top: 1px dashed rgba(var(--accent-rgb), 0.20);
}
[data-page="routing-tables"] .rt-scen-config {
display: inline-block;
font-family: "JetBrains Mono", monospace; font-size: 11px;
letter-spacing: 0.06em;
color: rgba(var(--accent-rgb), 0.95);
background: rgba(var(--accent-rgb), 0.10);
border: 1px solid rgba(var(--accent-rgb), 0.30);
padding: 4px 10px; border-radius: 999px;
margin-bottom: 12px;
}
[data-page="routing-tables"] .rt-scen-enun {
font-size: 13.5px; color: var(--muted); line-height: 1.6;
margin: 0 0 16px;
}
[data-page="routing-tables"] .rt-scen-enun code {
font-family: "JetBrains Mono", monospace; font-size: 12px;
background: rgba(var(--accent-rgb), 0.10); color: var(--primary-2);
padding: 1px 5px; border-radius: 4px;
}
[data-page="routing-tables"] .rt-scen-grid {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px;
align-items: start;
}
@media (max-width: 980px) {
[data-page="routing-tables"] .rt-scen-grid { grid-template-columns: 1fr; }
}
[data-page="routing-tables"] .rt-scen-diagram { display: flex; justify-content: center; }
[data-page="routing-tables"] .rt-scen-events-head {
font-family: "JetBrains Mono", monospace; font-size: 11px;
letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(var(--accent-rgb), 0.85);
margin-bottom: 8px;
}
[data-page="routing-tables"] .rt-scen-events-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 6px;
counter-reset: ev;
}
[data-page="routing-tables"] .rt-scen-events-list li {
counter-increment: ev;
position: relative;
padding: 6px 10px 6px 32px;
font-size: 12.5px; line-height: 1.55; color: var(--muted);
background: rgba(255, 255, 255, 0.015);
border-left: 2px solid rgba(var(--accent-rgb), 0.35);
border-radius: 0 6px 6px 0;
}
[data-page="routing-tables"] .rt-scen-events-list li .evt { margin-bottom: 2px; }
[data-page="routing-tables"] .rt-scen-events-list li .state {
font-size: 10.5px; color: var(--muted-2);
background: rgba(0, 0, 0, 0.25);
padding: 3px 7px; border-radius: 4px;
display: inline-block; margin-top: 2px;
letter-spacing: 0.02em;
}
[data-page="routing-tables"] .rt-scen-events-list li::before {
content: counter(ev, decimal-leading-zero);
position: absolute; left: 8px; top: 6px;
font-family: "JetBrains Mono", monospace; font-size: 10.5px;
color: rgba(var(--accent-rgb), 0.75);
}
[data-page="routing-tables"] .rt-scen-events-list li strong { color: var(--fg); font-weight: 600; }
[data-page="routing-tables"] .rt-scen-events-list li code {
font-family: "JetBrains Mono", monospace; font-size: 11.5px;
background: rgba(var(--accent-rgb), 0.10); color: var(--primary-2);
padding: 1px 5px; border-radius: 4px;
}
/* ─── Bloco "redesenha" + olho ──────────────────────────────────────── */
[data-page="routing-tables"] .rt-scen-redo-head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
[data-page="routing-tables"] .rt-scen-redo-head .lbl {
font-family: "JetBrains Mono", monospace; font-size: 11px;
letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(var(--accent-rgb), 0.85);
}
[data-page="routing-tables"] .rt-scen-eye {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(10, 13, 18, 0.7);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--muted);
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
[data-page="routing-tables"] .rt-scen-eye:hover {
color: var(--fg);
border-color: rgba(var(--accent-rgb), 0.4);
background: rgba(10, 13, 18, 0.88);
}
[data-page="routing-tables"] .rt-scen-solution {
margin-top: 16px;
padding: 18px;
border-radius: 10px;
background: rgba(var(--accent-rgb), 0.04);
border: 1px solid rgba(var(--accent-rgb), 0.25);
}
[data-page="routing-tables"] .rt-scen-diff {
font-size: 12.5px; line-height: 1.65; color: var(--muted);
}
[data-page="routing-tables"] .rt-scen-diff p { margin: 0; }
[data-page="routing-tables"] .rt-scen-diff strong { color: var(--fg); font-weight: 600; }
[data-page="routing-tables"] .rt-scen-diff code {
font-family: "JetBrains Mono", monospace; font-size: 11.5px;
background: rgba(var(--accent-rgb), 0.10); color: var(--primary-2);
padding: 1px 5px; border-radius: 4px;
}
/* ─── Exercícios P — diagrama de troca de tramas (FrameExchange) ────── */
[data-page="routing-tables"] .rt-fx-wrap {
display: flex; flex-direction: column; gap: 6px;
background: rgba(0, 0, 0, 0.35);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px;
}
[data-page="routing-tables"] .rt-fx-title {
font-family: "JetBrains Mono", monospace; font-size: 10.5px;
letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(var(--accent-rgb), 0.8);
text-align: center;
}
[data-page="routing-tables"] .rt-fx-svg { max-width: 100%; height: auto; }
[data-page="routing-tables"] .rt-fx-station {
font-family: "JetBrains Mono", monospace; font-size: 14px; font-weight: 700;
fill: var(--fg);
}
[data-page="routing-tables"] .rt-fx-time {
font-family: "JetBrains Mono", monospace; font-size: 10.5px;
fill: var(--muted-2); letter-spacing: 0.05em;
}
[data-page="routing-tables"] .rt-fx-label {
font-family: "JetBrains Mono", monospace; font-size: 10.5px;
}
[data-page="routing-tables"] .rt-fx-x {
font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700;
fill: rgba(248, 113, 113, 0.95);
}
@media (max-width: 980px) {
[data-page="routing-tables"] .rt-triptych { grid-template-columns: 1fr; }
}
[data-page="routing-tables"] .rt-table-card {
padding: 22px; border: 1px solid var(--border); border-radius: 14px;
background: var(--card-solid); position: relative;
display: flex; flex-direction: column; gap: 16px;
min-width: 0;
}
[data-page="routing-tables"] .rt-table-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}
[data-page="routing-tables"] .rt-table-card .head {
display: flex; align-items: flex-start; gap: 12px;
}
[data-page="routing-tables"] .rt-table-card .icon {
width: 38px; height: 38px; border-radius: 9px;
display: flex; align-items: center; justify-content: center;
color: var(--primary-2); background: rgba(var(--accent-rgb), 0.10);
border: 1px solid rgba(var(--accent-rgb), 0.25);
flex-shrink: 0;
}
[data-page="routing-tables"] .rt-table-card .title {
font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -0.005em;
}
[data-page="routing-tables"] .rt-table-card .sub {
font-family: "JetBrains Mono", monospace; font-size: 9.5px;
color: var(--muted-2); letter-spacing: 0.1em; text-transform: uppercase;
margin-top: 2px;
}
[data-page="routing-tables"] .rt-table-card .body {
display: flex; flex-direction: column; gap: 14px;
min-width: 0;
}
[data-page="routing-tables"] .rt-table-card .facts { display: grid; gap: 8px; }
[data-page="routing-tables"] .rt-table-card .fact {
display: grid; grid-template-columns: 70px 1fr; gap: 10px;
padding: 7px 10px; border-radius: 6px;
background: rgba(255, 255, 255, 0.02);
font-size: 12.5px;
}
[data-page="routing-tables"] .rt-table-card .fact .k {
font-family: "JetBrains Mono", monospace; font-size: 10px;
color: var(--muted-2); letter-spacing: 0.06em; text-transform: uppercase;
align-self: center;
}
[data-page="routing-tables"] .rt-table-card .fact .v { color: var(--fg); line-height: 1.4; }
[data-page="routing-tables"] .rt-table-card .fact .v em {
font-style: normal; color: var(--primary-2); margin: 0 2px;
}
/* Single-grid layout: a mini-table é o grid; cada .row tem display:contents
para que as células de TODAS as rows pertençam ao mesmo grid (colunas
sempre alinhadas). Padding/border ficam nas próprias células. */
[data-page="routing-tables"] .rt-table-card .mini-table {
display: grid;
border: 1px solid var(--border); border-radius: 6px;
font-family: "JetBrains Mono", monospace; font-size: 10.5px;
overflow-x: auto;
min-width: 0;
}
[data-page="routing-tables"] .rt-table-card .mini-table.cols-2 {
grid-template-columns: minmax(110px, 1fr) minmax(150px, 1.3fr);
}
[data-page="routing-tables"] .rt-table-card .mini-table.cols-4 {
grid-template-columns: minmax(110px, 1.1fr) minmax(100px, 1.1fr) minmax(120px, 1.2fr) minmax(80px, 0.5fr);
}
[data-page="routing-tables"] .rt-table-card .mini-table .row { display: contents; }
[data-page="routing-tables"] .rt-table-card .mini-table .row > * {
padding: 6px 10px;
border-bottom: 1px solid var(--border);
}
[data-page="routing-tables"] .rt-table-card .mini-table .row:last-child > * {
border-bottom: 0;
}
[data-page="routing-tables"] .rt-table-card .mini-table .row.head > * {
background: rgba(255, 255, 255, 0.03);
color: var(--muted-2); letter-spacing: 0.04em;
font-size: 9.5px; text-transform: uppercase;
}
[data-page="routing-tables"] .rt-table-card .mini-table .row > div { color: var(--fg); }
[data-page="routing-tables"] .rt-table-card .mini-table .row.head > div { color: var(--muted-2); }
/* ─── "Comandos essenciais" section ────────────────────────────────── */
[data-page="routing-tables"] .rt-cmd-block {
display: flex; flex-direction: column; gap: 20px;
}
[data-page="routing-tables"] .rt-cmd-picker {
display: flex; flex-wrap: wrap; gap: 8px;
}
[data-page="routing-tables"] .rt-cmd-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px; border-radius: 8px;
background: transparent; border: 1px solid var(--border);
color: var(--muted); cursor: pointer; transition: all .15s ease;
font-family: "JetBrains Mono", monospace; font-size: 12px;
}
[data-page="routing-tables"] .rt-cmd-chip:hover { color: var(--fg); border-color: var(--border-strong); }
[data-page="routing-tables"] .rt-cmd-chip.is-active {
color: var(--fg); border-color: rgba(var(--accent-rgb), 0.55);
background: rgba(var(--accent-rgb), 0.08);
}
[data-page="routing-tables"] .rt-cmd-chip .prompt { color: var(--primary-2); }
[data-page="routing-tables"] .rt-cmd-chip .name { color: inherit; }
[data-page="routing-tables"] .mono { font-family: "JetBrains Mono", monospace; }
[data-page="routing-tables"] .rt-cmd-frame {
padding: 22px; border: 1px solid var(--border); border-radius: 14px;
background: var(--card-solid); position: relative;
display: flex; flex-direction: column; gap: 16px;
}
[data-page="routing-tables"] .rt-cmd-frame::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
}
[data-page="routing-tables"] .rt-cmd-line {
font-size: 14px; color: var(--fg);
padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
[data-page="routing-tables"] .rt-cmd-line .prompt { color: var(--primary-2); margin-right: 8px; }
[data-page="routing-tables"] .rt-cmd-summary { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
[data-page="routing-tables"] code {
font-family: "JetBrains Mono", monospace; color: var(--primary-2);
background: rgba(var(--accent-rgb), 0.08); padding: 1px 4px;
border-radius: 3px; font-size: 0.9em;
}
/* ─── Comandos — separadores por bloco (DNS/Interface/ARP/Rotas/Diag.) */
[data-page="routing-tables"] .rt-cmd-blocks {
display: flex; flex-wrap: wrap; gap: 6px;
margin: 4px 0 0;
}
[data-page="routing-tables"] .rt-cmd-block-tab {
appearance: none;
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
padding: 8px 14px;
background: rgba(15, 18, 25, 0.45);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--fg);
cursor: pointer;
text-align: left;
transition: background .15s, border-color .15s;
}
[data-page="routing-tables"] .rt-cmd-block-tab:hover {
background: rgba(255, 255, 255, 0.035);
border-color: var(--border-strong);
}
[data-page="routing-tables"] .rt-cmd-block-tab.is-active {
background: rgba(var(--accent-rgb), 0.10);
border-color: rgba(var(--accent-rgb), 0.55);
}
[data-page="routing-tables"] .rt-cmd-block-tab .lbl {
font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--fg);
letter-spacing: 0.04em;
}
[data-page="routing-tables"] .rt-cmd-block-tab .hint {
font-size: 10.5px; color: var(--muted-2);
}
[data-page="routing-tables"] .rt-cmd-block-tab.is-active .hint { color: var(--muted); }
/* ─── Comandos — meta chips (OS / Camada / Protocolo) ────────────────── */
[data-page="routing-tables"] .rt-cmd-meta {
display: flex; flex-wrap: wrap; gap: 6px;
}
[data-page="routing-tables"] .cmd-chip {
display: inline-block;
padding: 2px 8px; border-radius: 999px;
font-family: "JetBrains Mono", monospace; font-size: 10px;
letter-spacing: 0.06em; text-transform: uppercase;
border: 1px solid var(--border);
color: var(--muted);
background: rgba(255, 255, 255, 0.02);
}
[data-page="routing-tables"] .cmd-chip.os-linux {
color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.06);
}
[data-page="routing-tables"] .cmd-chip.os-windows {
color: #60a5fa; border-color: rgba(96, 165, 250, 0.4); background: rgba(96, 165, 250, 0.06);
}
[data-page="routing-tables"] .cmd-chip.layer {
color: #c4b5fd; border-color: rgba(167, 139, 250, 0.4); background: rgba(167, 139, 250, 0.08);
}
[data-page="routing-tables"] .cmd-chip.proto {
color: #86efac; border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.08);
}
/* ─── Comandos — sub-cabeçalho de cada secção do painel ─────────────── */
[data-page="routing-tables"] .rt-cmd-sub {
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(var(--accent-rgb), 0.85);
margin: 4px 0 8px;
font-weight: 500;
}
/* ─── Comandos — sintaxe (lista clicável tipo tabs) ─────────────────── */
[data-page="routing-tables"] .rt-cmd-syntax {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 6px;
}
[data-page="routing-tables"] .rt-cmd-syn-item {
appearance: none;
width: 100%; text-align: left;
display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 14px;
align-items: baseline;
padding: 10px 12px;
border: 1px solid var(--border); border-radius: 8px;
background: rgba(255, 255, 255, 0.015);
color: var(--fg);
font-family: inherit;
cursor: pointer;
transition: background .15s, border-color .15s;
}
[data-page="routing-tables"] .rt-cmd-syn-item:hover {
background: rgba(255, 255, 255, 0.035);
border-color: var(--border-strong);
}
[data-page="routing-tables"] .rt-cmd-syn-item.is-active {
background: rgba(var(--accent-rgb), 0.10);
border-color: rgba(var(--accent-rgb), 0.55);
}
[data-page="routing-tables"] .rt-cmd-syn-item code {
font-size: 12.5px; padding: 2px 6px;
background: rgba(var(--accent-rgb), 0.10);
color: var(--fg);
white-space: pre-wrap; word-break: break-word;
}
[data-page="routing-tables"] .rt-cmd-syn-item .d {
font-size: 12.5px; color: var(--muted); line-height: 1.5;
}
/* ─── Comandos — bloco de output ─────────────────────────────────────── */
[data-page="routing-tables"] .rt-cmd-output {
margin: 0;
padding: 14px 16px;
border: 1px solid var(--border); border-radius: 10px;
background: rgba(0, 0, 0, 0.45);
color: var(--fg);
font-size: 12px; line-height: 1.55;
white-space: pre-wrap; word-break: break-word;
overflow-x: auto;
}
/* ─── Comandos — lista de pegadinhas/atenção ─────────────────────────── */
[data-page="routing-tables"] .rt-cmd-gotcha {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 6px;
}
[data-page="routing-tables"] .rt-cmd-gotcha li {
position: relative;
padding: 6px 10px 6px 22px;
font-size: 12.5px; line-height: 1.55; color: var(--muted);
border-left: 2px solid #fbbf24;
background: rgba(255, 255, 255, 0.015);
border-radius: 0 6px 6px 0;
}
[data-page="routing-tables"] .rt-cmd-gotcha li::before {
content: "!"; position: absolute; left: 8px; top: 6px;
color: #fbbf24; font-family: "JetBrains Mono", monospace;
}
[data-page="routing-tables"] .rt-cmd-gotcha li strong { color: var(--fg); font-weight: 600; }
/* ─── Exercícios — picker dos 6 cenários ────────────────────────────── */
[data-page="routing-tables"] .rt-const-pickrow {
display: flex; align-items: center; justify-content: space-between;
gap: 10px 24px; flex-wrap: wrap;
margin-top: 14px;
}
[data-page="routing-tables"] .rt-const-picker {
display: flex; flex-wrap: wrap; gap: 6px;
}
[data-page="routing-tables"] .rt-super-chip {
appearance: none;
background: rgba(15, 18, 25, 0.45);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 10px 7px;
cursor: pointer;
display: flex; flex-direction: row; align-items: baseline; gap: 6px;
text-align: left; color: var(--fg);
font-family: inherit;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
position: relative; overflow: hidden;
transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
}
[data-page="routing-tables"] .rt-super-chip::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.25), transparent);
opacity: 0; transition: opacity .2s;
}
[data-page="routing-tables"] .rt-super-chip:hover {
background: rgba(255, 255, 255, 0.035);
border-color: var(--border-strong);
}
[data-page="routing-tables"] .rt-super-chip:hover::before { opacity: 0.6; }
[data-page="routing-tables"] .rt-super-chip.is-active {
background: rgba(var(--accent-rgb), 0.10);
border-color: rgba(var(--accent-rgb), 0.45);
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.10);
}
[data-page="routing-tables"] .rt-super-chip.is-active::before { opacity: 1; }
[data-page="routing-tables"] .rt-super-chip .lbl {
font-family: "JetBrains Mono", monospace; font-size: 11px;
font-weight: 500; color: var(--muted-2);
letter-spacing: 0.02em; text-transform: lowercase; line-height: 1.1;
}
[data-page="routing-tables"] .rt-super-chip.is-active .lbl { color: var(--primary-2); }
[data-page="routing-tables"] .rt-super-chip .num {
font-family: "JetBrains Mono", monospace; font-size: 11px;
font-weight: 600; color: var(--fg);
letter-spacing: 0.02em; line-height: 1.1;
}
[data-page="routing-tables"] .rt-super-chip.is-active .num { color: var(--primary-2); }
/* ─── Meta-info do cenário activo (título + bloco-base) ─────────────── */
[data-page="routing-tables"] .rt-const-meta {
display: flex; flex-wrap: wrap; align-items: baseline;
gap: 8px 16px;
}
[data-page="routing-tables"] .rt-const-title {
font-size: 14px; font-weight: 600; color: var(--fg);
letter-spacing: -0.005em;
}
[data-page="routing-tables"] .rt-const-sep {
color: var(--muted-2); margin: 0 8px;
}
[data-page="routing-tables"] .rt-const-meta .mono {
font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: var(--primary-2);
}
[data-page="routing-tables"] .rt-const-cap {
color: var(--muted-2); font-size: 11.5px; margin-left: 8px;
}
/* Painel "espaço do bloco" — uso do bloco-pai + quantas redes cabem no livre */
[data-page="routing-tables"] .rt-const-space {
margin-top: 10px;
padding: 9px 14px;
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(0, 0, 0, 0.25);
font-family: "JetBrains Mono", monospace;
font-size: 11.5px;
color: var(--muted);
}
[data-page="routing-tables"] .rt-const-space .row {
display: flex; flex-wrap: wrap; gap: 6px 20px;
}
[data-page="routing-tables"] .rt-const-space .row .lbl {
color: rgba(var(--accent-rgb), 0.85);
text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px;
}
[data-page="routing-tables"] .rt-const-space b { color: var(--fg); font-weight: 600; }
[data-page="routing-tables"] .rt-const-space .calc {
margin-top: 8px; padding-top: 8px;
border-top: 1px solid var(--border);
}
[data-page="routing-tables"] .rt-const-space .calc p {
margin: 0 0 5px; line-height: 1.6;
}
[data-page="routing-tables"] .rt-const-space .calc p:last-child { margin: 0; }
[data-page="routing-tables"] .rt-const-space .calc b { color: var(--primary-2); font-weight: 600; }
/* ─── Stage (canvas + caption) ─────────────────────────────────────── */
[data-page="routing-tables"] .rt-const-stage {
margin-top: 14px;
position: relative;
background: rgba(15, 18, 25, 0.55);
border: 1px solid var(--border);
border-radius: 16px;
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
overflow: hidden;
height: 560px;
}
[data-page="routing-tables"] .rt-const-stage::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
}
/* Wrapper que envolve o canvas — em desktop fica colado ao stage; em mobile
ganha overflow-x: auto para o utilizador poder fazer scroll horizontal
ao desenho (com o canvas a manter a sua largura natural via min-width). */
[data-page="routing-tables"] .rt-const-canvas-wrap {
position: absolute; inset: 0;
overflow: hidden;
}
[data-page="routing-tables"] .rt-const-canvas {
display: block; width: 100%; height: 100%;
}
[data-page="routing-tables"] .rt-const-stage .caption {
position: absolute; top: 14px; left: 16px;
display: inline-flex; align-items: center; gap: 8px;
font-family: "JetBrains Mono", monospace; font-size: 11px;
color: var(--muted); letter-spacing: 0.04em;
padding: 6px 10px;
background: rgba(10, 13, 18, 0.7);
border: 1px solid var(--border);
border-radius: 7px;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
pointer-events: none;
}
[data-page="routing-tables"] .rt-const-stage .caption .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--primary);
box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.7);
}
/* Botão "olho" — toggle dos rótulos das interfaces sobre as ligações */
[data-page="routing-tables"] .rt-const-eye {
position: absolute; top: 12px; right: 12px; z-index: 2;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(10, 13, 18, 0.7);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--muted);
cursor: pointer;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
[data-page="routing-tables"] .rt-const-eye:hover {
color: var(--fg);
border-color: rgba(var(--accent-rgb), 0.4);
background: rgba(10, 13, 18, 0.88);
}
/* ─── Inspector (router/pc/net details) ────────────────────────────── */
@keyframes rtStepIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
[data-page="routing-tables"] .inspector {
margin-top: 16px;
background: rgba(15, 18, 25, 0.65);
border: 1px solid var(--border);
border-radius: 16px;
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
padding: 22px 24px;
position: relative;
animation: rtStepIn .25s ease-out;
}
[data-page="routing-tables"] .inspector::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
}
/* folga p/ a navbar fixa não tapar o topo do inspector ao fazer scroll */
[data-page="routing-tables"] .rt-insp-anchor { scroll-margin-top: 100px; }
[data-page="routing-tables"] .insp-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px;
padding-bottom: 18px;
border-bottom: 1px solid var(--border);
margin-bottom: 18px;
}
[data-page="routing-tables"] .insp-head .kind {
font-family: "JetBrains Mono", monospace; font-size: 10.5px;
letter-spacing: 0.1em; text-transform: uppercase;
color: rgba(var(--accent-rgb), 0.85);
}
[data-page="routing-tables"] .insp-head .kind::before { content: "▸ "; color: rgba(var(--accent-rgb), 0.7); }
[data-page="routing-tables"] .insp-head h3 {
margin: 6px 0 4px;
font-size: 22px; font-weight: 600; letter-spacing: -0.015em;
}
[data-page="routing-tables"] .insp-head .sub {
font-family: "JetBrains Mono", monospace; font-size: 11.5px;
color: var(--muted); letter-spacing: 0.04em;
}
[data-page="routing-tables"] .insp-close {
background: transparent; border: 0;
color: var(--muted-2); cursor: pointer;
font-size: 22px; padding: 4px 10px;
border-radius: 8px; line-height: 1;
}
[data-page="routing-tables"] .insp-close:hover {
color: var(--fg); background: rgba(255, 255, 255, 0.05);
}
[data-page="routing-tables"] .insp-section + .insp-section { margin-top: 24px; }
[data-page="routing-tables"] .insp-lbl {
font-family: "JetBrains Mono", monospace; font-size: 11px;
letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(var(--accent-rgb), 0.85);
margin-bottom: 10px;
}
[data-page="routing-tables"] .insp-lbl::before { content: "── "; color: rgba(var(--accent-rgb), 0.5); }
[data-page="routing-tables"] .insp-expl {
font-size: 13.5px;
color: var(--muted);
line-height: 1.6;
margin: 0 0 12px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.02);
border-left: 2px solid rgba(var(--accent-rgb), 0.4);
border-radius: 0 8px 8px 0;
max-width: 88ch;
}
[data-page="routing-tables"] .insp-expl strong { color: var(--fg); font-weight: 500; }
[data-page="routing-tables"] .insp-expl em { font-style: normal; color: var(--primary-2); }
[data-page="routing-tables"] .insp-expl p { margin: 0; }
[data-page="routing-tables"] .insp-expl p + p { margin-top: 8px; }
[data-page="routing-tables"] .insp-expl-list {
margin: 8px 0;
padding-left: 22px;
display: flex; flex-direction: column; gap: 8px;
}
[data-page="routing-tables"] .insp-expl-list li::marker {
color: rgba(var(--accent-rgb), 0.85);
font-weight: 600;
}
[data-page="routing-tables"] .insp-expl code {
font-family: "JetBrains Mono", monospace;
color: var(--primary-2);
background: rgba(var(--accent-rgb), 0.08);
padding: 1px 5px; border-radius: 4px;
font-size: 12px;
}
/* iface grid + kv-grid (tiles) */
[data-page="routing-tables"] .iface-grid,
[data-page="routing-tables"] .inspector .kv-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 10px;
margin-bottom: 12px;
}
[data-page="routing-tables"] .iface-tile,
[data-page="routing-tables"] .inspector .kv-tile {
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border);
border-radius: 9px;
padding: 10px 12px;
}
[data-page="routing-tables"] .iface-tile .k,
[data-page="routing-tables"] .inspector .kv-tile .k {
font-family: "JetBrains Mono", monospace; font-size: 9.5px;
color: rgba(var(--accent-rgb), 0.85);
letter-spacing: 0.12em; text-transform: uppercase;
}
[data-page="routing-tables"] .iface-tile .v,
[data-page="routing-tables"] .inspector .kv-tile .v {
font-family: "JetBrains Mono", monospace; font-size: 13px;
color: var(--fg); margin-top: 4px;
}
[data-page="routing-tables"] .iface-tile .sub {
font-size: 10.5px; color: var(--muted-2); margin-top: 2px;
}
/* inspector tables (Routing / ARP / MAC / Hosts) */
/* Single-grid layout: a insp-table é o grid; cada .row tem display:contents
para que as células de TODAS as rows pertençam ao mesmo grid (colunas
sempre alinhadas). Em mobile o conteúdo é mais largo que o container e
o overflow-x: auto cria scroll horizontal sem comprimir. */
[data-page="routing-tables"] .insp-table {
display: grid;
font-family: "JetBrains Mono", monospace; font-size: 12px;
border: 1px solid var(--border);
border-radius: 10px;
overflow-x: auto;
background: rgba(0, 0, 0, 0.3);
align-items: center;
min-width: 0;
}
[data-page="routing-tables"] .insp-table.arp-cols-2 {
grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.4fr);
}
[data-page="routing-tables"] .insp-table.rt-cols {
grid-template-columns: minmax(140px, 1.4fr) minmax(120px, 1.2fr) minmax(140px, 1.4fr) minmax(80px, 0.8fr);
}
[data-page="routing-tables"] .insp-table.mac-cols {
grid-template-columns: minmax(170px, 1.6fr) minmax(70px, 0.8fr) minmax(210px, 2fr);
}
[data-page="routing-tables"] .insp-table .row { display: contents; }
[data-page="routing-tables"] .insp-table .row > * {
padding: 8px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
[data-page="routing-tables"] .insp-table .row:last-child > * { border-bottom: 0; }
[data-page="routing-tables"] .insp-table .row.head > * {
background: rgba(var(--accent-rgb), 0.08);
color: rgba(var(--accent-rgb), 0.9);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Folga entre uma tabela e uma explicação que venha logo a seguir
(espelha o margin-bottom dos próprios .insp-expl). */
[data-page="routing-tables"] .insp-table + .insp-expl { margin-top: 12px; }
[data-page="routing-tables"] .insp-table .dest { color: var(--primary-2); }
[data-page="routing-tables"] .insp-table .row.row-direct .dest { color: #86efac; }
[data-page="routing-tables"] .insp-table .row.row-default .dest { color: #fcd34d; }
[data-page="routing-tables"] .insp-table .nh { color: var(--fg); }
[data-page="routing-tables"] .insp-table .if { color: var(--muted); }
[data-page="routing-tables"] .insp-table .mask { color: var(--muted-2); }
[data-page="routing-tables"] .tag {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-family: "JetBrains Mono", monospace; font-size: 10px;
letter-spacing: 0.08em; text-transform: uppercase;
background: rgba(255, 255, 255, 0.05);
color: var(--muted-2);
}
[data-page="routing-tables"] .tag.tag-direct { background: rgba(34, 197, 94, 0.14); color: #86efac; }
[data-page="routing-tables"] .tag.tag-indirect { background: rgba(96, 165, 250, 0.14); color: var(--primary-2); }
[data-page="routing-tables"] .tag.tag-default { background: rgba(234, 179, 8, 0.14); color: #fcd34d; }
@media (max-width: 720px) {
[data-page="routing-tables"] .rt-const-stage { height: 480px; }
/* Em mobile o canvas mantém o tamanho natural (720×560) e o wrap scrolla
em ambos eixos quando preciso (cenários maiores). Eye e caption ficam
fixos no stage (fora do wrap). */
[data-page="routing-tables"] .rt-const-canvas-wrap {
overflow: auto;
}
[data-page="routing-tables"] .rt-const-canvas {
min-width: 720px;
min-height: 560px;
}
}
/* ─── Exercícios D — diagrama wireless (WirelessDiagram) ────────────── */
[data-page="routing-tables"] .rt-wd-wrap {
width: 100%;
background: rgba(0, 0, 0, 0.35);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px;
}
[data-page="routing-tables"] .rt-wd-svg {
width: 100%; height: auto;
display: block;
max-width: 900px;
max-height: 480px;
margin: 0 auto;
}
/* Diagrama "wide" — ocupa a largura toda do painel, ao contrário do
.rt-scen-grid usado nos exercícios P. */
[data-page="routing-tables"] .rt-scen-diagram-wide {
margin: 4px 0 18px;
}
/* ─── Análise narrativa (Exercícios D — walkthrough) ─────────────── */
[data-page="routing-tables"] .rt-anal {
display: flex; flex-direction: column; gap: 14px;
margin-top: 6px;
}
[data-page="routing-tables"] .rt-anal-head {
font-family: "JetBrains Mono", monospace; font-size: 11px;
letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(var(--accent-rgb), 0.85);
margin-bottom: 2px;
}
[data-page="routing-tables"] .rt-anal-block {
border-left: 2px solid rgba(var(--accent-rgb), 0.35);
padding: 4px 0 4px 14px;
}
[data-page="routing-tables"] .rt-anal-titulo {
margin: 0 0 6px;
font-size: 13px; font-weight: 600; color: var(--fg);
letter-spacing: 0.01em;
}
[data-page="routing-tables"] .rt-anal-texto {
margin: 0;
font-size: 13px; line-height: 1.7; color: var(--muted);
}
[data-page="routing-tables"] .rt-anal-texto strong { color: var(--fg); font-weight: 600; }
[data-page="routing-tables"] .rt-anal-texto code {
font-family: "JetBrains Mono", monospace; font-size: 11.5px;
background: rgba(var(--accent-rgb), 0.10); color: var(--primary-2);
padding: 1px 5px; border-radius: 4px;
}
/* Mobile — sub-página Redes Wireless (ExercisesD): aliviar paddings
para ganhar largura horizontal nos diagramas e blocos de análise. */
@media (max-width: 640px) {
[data-page="routing-tables"] .rt-scen-panel { padding: 14px; }
[data-page="routing-tables"] .rt-wd-wrap { padding: 8px; }
[data-page="routing-tables"] .rt-anal-block { padding-left: 10px; }
[data-page="routing-tables"] .rt-scen-enun { font-size: 13px; }
[data-page="routing-tables"] .rt-anal-titulo,
[data-page="routing-tables"] .rt-anal-texto { font-size: 12.5px; }
}