/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("d077fbdc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("5d31c17f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("d077fbdc.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("5d31c17f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("b873efcf.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("178f1ba8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("aae2e427.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("b873efcf.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("178f1ba8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("aae2e427.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("b873efcf.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("178f1ba8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("aae2e427.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("b873efcf.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("178f1ba8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("aae2e427.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("b873efcf.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("178f1ba8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("aae2e427.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("a8c29fcc.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("a8c29fcc.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("2fe5111b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("80a19def.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("2fe5111b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("80a19def.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("2fe5111b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("80a19def.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Reddit Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("f5ca5412.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Reddit Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("0e0444df.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Reddit Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("e2c2b1c8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Reddit Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("f5ca5412.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Reddit Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("0e0444df.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Reddit Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("e2c2b1c8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Reddit Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("f5ca5412.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Reddit Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("0e0444df.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Reddit Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("e2c2b1c8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("b7a008be.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("60deaa67.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("9c1b686a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("b7a008be.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("60deaa67.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("9c1b686a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("b7a008be.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("60deaa67.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("9c1b686a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==================== bloco separator ==================== */

/* ═══════════════════════════════════════════════════════════════════════
   OBAT · BOTÕES — obat-botoes.css
   As faces de botão do sistema, num lugar só. Nasceu da auditoria de 21 ago:
   292 faces distintas em 393 ocorrências, 203 delas usadas UMA vez, e a tecla
   do kit existindo em token (--key1…4) sem nenhuma classe que a montasse.

   REGRA: nenhum módulo cria face própria. Módulo escolhe CORPO + LUZ.

   ── CORPO (a matéria do botão) ────────────────────────────────────────
   .obt-usinada   tecla de metal fresado — a AÇÃO PRINCIPAL da tela
   .obt-vidro     lâmina translúcida     — secundário, filtro, ferramenta de rótulo
   .obt-disco     disco de ícone 38      — ferramenta (+ .obt-disco--44 na cascata)
   .obt-mini      corpo miúdo 24 r6      — coluna, chip de gabarito, camada editorial

   ── LUZ (o estado, sobre qualquer corpo) ──────────────────────────────
   .obt-led       filete na base         — "continue daqui" (retomar, item ativo)
   .obt-brasa     anel interno pulsando  — "está na hora" (recorte pronto, entregar)
   .obt-halo      ponto correndo na borda— "está esperando você" (1 POR TELA)

   ── TINTA (só troca a cor do rótulo e do fio) ─────────────────────────
   .obt-ora .obt-ouro .obt-grn .obt-red

   A luz é pseudo-elemento (::after). Onde o ::after do botão já estiver gasto
   (.lbtn, .feat-icon e outros gastam no glow), use o span filho equivalente:
   .obt-led-el / .obt-brasa-el / .obt-halo-el.

   Cor: sempre token de obat-tokens.css. O bisel da usinada é a única face com
   valores próprios (é relevo, não cor de marca) e tem par nos dois temas.
   ═══════════════════════════════════════════════════════════════════════ */

@property --obt-ang{syntax:'<angle>';initial-value:210deg;inherits:false}

@keyframes obtOrbita{to{--obt-ang:570deg}}
@keyframes obtLed{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes obtBrasa{
  0%,100%{border-color:rgba(232,130,26,.17);box-shadow:0 0 4px -2px rgba(232,130,26,.3)}
  50%{border-color:rgba(232,130,26,.46);box-shadow:0 0 11px -2px rgba(232,130,26,.6)}
}

/* ═════ base comum ═════ */
.obt-usinada,.obt-vidro,.obt-disco,.obt-mini{
  position:relative;box-sizing:border-box;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;cursor:pointer;white-space:nowrap;
  font-family:'Jost',sans-serif;text-decoration:none;
  transition:background-image .16s var(--ease,cubic-bezier(.22,.61,.36,1)),background .16s var(--ease,cubic-bezier(.22,.61,.36,1)),
             border-color .16s var(--ease,cubic-bezier(.22,.61,.36,1)),transform .1s var(--ease,cubic-bezier(.22,.61,.36,1)),
             box-shadow .16s var(--ease,cubic-bezier(.22,.61,.36,1)),filter .16s var(--ease,cubic-bezier(.22,.61,.36,1));
}
.obt-usinada:focus-visible,.obt-vidro:focus-visible,
.obt-disco:focus-visible,.obt-mini:focus-visible{
  outline:none;border-color:var(--ora,#E8821A);
  box-shadow:0 0 0 3px var(--orar,rgba(232,130,26,.14));
}

/* ═════ CORPO 1 · usinada ═════
   Quatro fios de cor diferente = bisel fresado, luz vindo de cima e da esquerda.
   Origem: .fk-cta dos Flashcards, a peça melhor construída do sistema. */
.obt-usinada{
  --u-top:#45454f;--u-lft:#33333b;--u-rgt:#16161b;--u-bot:#0c0c10;
  --u-g1:#33333b;--u-g2:#1d1d23;--u-hov1:#3b3b44;--u-hov2:#22222a;
  --u-seat:#0a0a0d;--u-lip:rgba(255,255,255,.15);--u-cava:rgba(0,0,0,.4);
  --u-tx:#F4F1EA;--u-shadow:0 1px 0 rgba(0,0,0,.55);
  padding:13px 24px;border-radius:12px;
  font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--u-tx);text-shadow:var(--u-shadow);
  border-top:1px solid var(--u-top);border-left:1px solid var(--u-lft);
  border-right:1px solid var(--u-rgt);border-bottom:1px solid var(--u-bot);
  background-color:var(--u-g2);
  background-image:linear-gradient(180deg,var(--u-g1) 0%,var(--u-g2) 100%);
  box-shadow:0 4px 0 var(--u-seat),0 7px 13px -2px rgba(0,0,0,.55),
             inset 0 1.5px 0 var(--u-lip),inset 0 -3px 6px var(--u-cava);
}
.obt-usinada:hover{background-image:linear-gradient(180deg,var(--u-hov1) 0%,var(--u-hov2) 100%)}
.obt-usinada:active{transform:translateY(2px);
  box-shadow:0 1px 0 var(--u-seat),inset 0 1.5px 0 var(--u-lip),inset 0 -2px 5px var(--u-cava)}
[data-theme="light"] .obt-usinada{
  --u-top:#FFFFFF;--u-lft:var(--key2,#1D1D20);--u-rgt:var(--key4,#101013);--u-bot:var(--keybrd2,#3C3C41);
  --u-g1:var(--key1,#161618);--u-g2:var(--key2,#1D1D20);--u-hov1:#FFFFFF;--u-hov2:var(--key3,#242428);
  --u-seat:var(--key4,#101013);--u-lip:#FFFFFF;--u-cava:rgba(120,126,140,.12);
  --u-tx:var(--tx,#F5F4F2);--u-shadow:0 1px 0 rgba(255,255,255,.8);
  box-shadow:0 4px 0 var(--u-seat),0 7px 13px -2px rgba(30,34,44,.2),
             inset 0 1.5px 0 var(--u-lip),inset 0 -3px 6px var(--u-cava);
}

/* ═════ CORPO 2 · vidro ═════
   Lâmina de vidro com lábio de luz. Não é chapa: tem gradiente e resposta ao
   toque. É o corpo do secundário, do filtro e do rótulo de ferramenta. */
.obt-vidro{
  --v-brd:rgba(255,255,255,.14);--v-brdh:rgba(255,255,255,.22);
  --v-g1:rgba(255,255,255,.085);--v-g2:rgba(255,255,255,.03);--v-g3:rgba(255,255,255,.015);
  --v-h1:rgba(255,255,255,.12);--v-h2:rgba(255,255,255,.05);--v-h3:rgba(255,255,255,.02);
  --v-lip:rgba(255,255,255,.16);--v-drop:0 2px 5px rgba(0,0,0,.3);
  --v-tx:rgba(245,244,242,.82);
  padding:10px 16px;border-radius:10px;
  font-weight:600;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--v-tx);border:1px solid var(--v-brd);
  background:linear-gradient(180deg,var(--v-g1),var(--v-g2) 55%,var(--v-g3));
  box-shadow:inset 0 1px 0 var(--v-lip),var(--v-drop);
}
.obt-vidro:hover{border-color:var(--v-brdh);
  background:linear-gradient(180deg,var(--v-h1),var(--v-h2) 55%,var(--v-h3))}
.obt-vidro:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
[data-theme="light"] .obt-vidro{
  --v-brd:var(--keybrd,#323236);--v-brdh:var(--keybrd2,#3C3C41);
  --v-g1:var(--key1,#161618);--v-g2:var(--key2,#1D1D20);--v-g3:var(--key2,#1D1D20);
  --v-h1:#FFFFFF;--v-h2:var(--key1,#161618);--v-h3:var(--key3,#242428);
  --v-lip:#FFFFFF;--v-drop:0 1px 2px rgba(30,34,44,.08);--v-tx:var(--tx,#F5F4F2);
}
[data-theme="light"] .obt-vidro:active{box-shadow:inset 0 2px 4px rgba(120,126,140,.16)}

/* ═════ CORPO 3 · disco de ícone ═════
   A face que .rq-btn (Questões) e .fk-btn (Flashcards) já compartilhavam pelas
   vars --mb-*: 17 botões que já obedeciam a um token comum. Agora tem nome. */
.obt-disco{
  --d-brd:rgba(255,255,255,.13);--d-tx:#8E8B84;--d-seat:#0b0b0e;
  --d-top:rgba(255,255,255,.1);--d-g1:#2E2E34;--d-g2:#212127;--d-g3:#17171C;
  --d-lip:rgba(255,255,255,.1);
  width:38px;height:38px;padding:0;border-radius:50%;flex:none;gap:0;
  color:var(--d-tx);border:1px solid var(--d-brd);
  background:radial-gradient(120% 120% at 50% 8%,var(--d-top) 0%,transparent 42%),
             linear-gradient(180deg,var(--d-g1),var(--d-g2) 55%,var(--d-g3));
  box-shadow:0 3px 0 var(--d-seat),0 7px 14px -3px rgba(0,0,0,.6),
             inset 0 1.5px 0 var(--d-lip);
}
.obt-disco:hover{filter:brightness(1.12)}
.obt-disco:active{transform:translateY(2px);
  box-shadow:0 1px 0 var(--d-seat),inset 0 1.5px 0 var(--d-lip)}
.obt-disco--44{width:44px;height:44px}
.obt-disco--quad{border-radius:9px}
[data-theme="light"] .obt-disco{
  --d-brd:rgba(30,34,44,.14);--d-tx:var(--keytx,rgba(245,244,242,.36));--d-seat:var(--key4,#101013);
  --d-top:rgba(255,255,255,.95);--d-g1:var(--key1,#161618);--d-g2:#F4F4F6;--d-g3:var(--key3,#242428);
  --d-lip:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 var(--d-lip),0 9px 18px -12px rgba(30,34,44,.28),
             0 1px 3px rgba(30,34,44,.16);
}
[data-theme="light"] .obt-disco:active{transform:translateY(1px);
  box-shadow:inset 0 2px 4px rgba(120,126,140,.18)}
/* disco ATIVO na cascata = anel âmbar de fora (mantido como já era no Leitor) */
.obt-disco.on,.obt-disco[aria-pressed="true"]{
  border-color:var(--orag,rgba(232,130,26,.45));color:var(--ora,#E8821A);
  box-shadow:0 0 0 3px var(--orar,rgba(232,130,26,.14)),0 3px 0 var(--d-seat),
             0 7px 14px -3px rgba(0,0,0,.6),inset 0 1.5px 0 var(--d-lip);
}
/* variante de ouro — só onde o ouro é significado (a joia do Alfred) */
.obt-disco--ouro{
  --d-brd:rgba(201,147,58,.5);--d-tx:var(--goldb,#E0B05B);
  --d-top:rgba(255,226,172,.12);--d-g1:#2E2A22;--d-g2:#1C1913;--d-g3:#141109;
  --d-lip:rgba(255,226,172,.12);--d-seat:#0b0906;
}
[data-theme="light"] .obt-disco--ouro{
  --d-brd:rgba(166,116,34,.4);--d-tx:var(--gold,#C9933A);
  --d-g1:#FFFFFF;--d-g2:#F7F6F2;--d-g3:#EFEDE6;--d-seat:#E4E1D8;
}

/* ═════ CORPO 4 · miúdo ═════
   Um corpo só no lugar dos três que existiam (r4 · r5 · r5, uns com fundo,
   outros sem): botão de coluna, chip de gabarito, camada editorial. */
.obt-mini{
  --m-brd:rgba(255,255,255,.14);--m-g1:rgba(255,255,255,.08);--m-g2:rgba(255,255,255,.025);
  --m-lip:rgba(255,255,255,.14);--m-tx:rgba(245,244,242,.72);
  width:24px;height:24px;padding:0;border-radius:6px;flex:none;gap:0;
  font-weight:700;font-size:12px;letter-spacing:0;text-transform:none;
  color:var(--m-tx);border:1px solid var(--m-brd);
  background:linear-gradient(180deg,var(--m-g1),var(--m-g2));
  box-shadow:inset 0 1px 0 var(--m-lip);
}
.obt-mini:hover{filter:brightness(1.2)}
.obt-mini:active{transform:translateY(1px)}
.obt-mini--pill{width:auto;height:auto;padding:4px 11px;border-radius:7px;
  font-weight:600;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}
.obt-mini--30{width:30px;height:30px;border-radius:7px;font-size:11px}
[data-theme="light"] .obt-mini{
  --m-brd:var(--keybrd,#323236);--m-g1:var(--key1,#161618);--m-g2:var(--key2,#1D1D20);
  --m-lip:#FFFFFF;--m-tx:var(--tx,#F5F4F2);
}

/* ═════ TINTA ═════ (só rótulo e fio; o corpo não muda) */
.obt-ora{color:var(--ora,#E8821A);border-color:var(--orag,rgba(232,130,26,.45));
  background:linear-gradient(180deg,var(--orar,rgba(232,130,26,.14)),var(--orass,rgba(232,130,26,.07)));
  box-shadow:inset 0 1px 0 rgba(255,226,172,.12)}
.obt-ouro{color:var(--goldb,#E0B05B);border-color:rgba(201,147,58,.42);
  background:linear-gradient(180deg,var(--goldg,rgba(201,147,58,.16)),var(--goldg2,rgba(201,147,58,.07)));
  box-shadow:inset 0 1px 0 rgba(255,226,172,.1)}
.obt-grn{color:var(--grnt,#7BC97F);border-color:var(--grnbrd,rgba(63,143,69,.26));
  background:linear-gradient(180deg,var(--grnb,rgba(63,143,69,.10)),transparent);
  box-shadow:inset 0 1px 0 rgba(160,230,165,.12)}
.obt-red{color:var(--redt,#E08A7E);border-color:var(--redbrd,rgba(196,70,58,.28));
  background:linear-gradient(180deg,var(--redb,rgba(196,70,58,.10)),transparent);
  box-shadow:inset 0 1px 0 rgba(255,180,170,.1)}
[data-theme="light"] .obt-ouro{color:var(--gold,#C9933A)}
[data-theme="light"] .obt-grn{color:var(--grn,#3F8F45)}
[data-theme="light"] .obt-red{color:var(--red,#C4463A)}

/* ═════ LUZ 1 · filete de LED ═════ "continue daqui" */
.obt-led::after,.obt-led-el{
  content:"";position:absolute;left:16%;right:16%;bottom:0;height:2px;
  border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ora,#E8821A),transparent);
  animation:obtLed 2.6s ease-in-out infinite;
}
.obt-led--ouro::after,.obt-led-el.obt-led--ouro{
  background:linear-gradient(90deg,transparent,var(--gold,#C9933A),transparent)}
/* item de lista: o filete acompanha o padding da linha, não a largura toda */
.obt-led--linha::after{left:11px;right:11px}

/* ═════ LUZ 2 · anel de brasa ═════ "está na hora" */
.obt-brasa::after,.obt-brasa-el{
  content:"";position:absolute;inset:4px;border-radius:8px;pointer-events:none;
  border:1px solid rgba(232,130,26,.34);
  animation:obtBrasa 3.4s ease-in-out infinite;
}
.obt-brasa.obt-disco::after,.obt-brasa-el.obt-disco{inset:3px;border-radius:50%}

/* ═════ LUZ 3 · halo em órbita ═════ "está esperando você" — UM POR TELA
   conic-gradient recortado na borda por máscara e girado por --obt-ang.
   Registrar a var como <angle> é o único jeito de o navegador interpolar. */
.obt-halo::after,.obt-halo-el{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--obt-ang),
    transparent 0deg,transparent 188deg,rgba(232,130,26,.35) 232deg,
    #FF9020 274deg,#FFB25A 300deg,#FF9020 326deg,
    rgba(232,130,26,.35) 350deg,transparent 360deg);
  padding:1px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:blur(.3px);
  animation:obtOrbita 4.2s linear infinite;
}
.obt-halo::after{border-radius:calc(12px + 1px)}
.obt-halo.obt-vidro::after{border-radius:11px}
.obt-halo.obt-disco::after{border-radius:50%}

/* ═════ NÚMERO ═════ todo número de destaque é Orbitron (corte 21 ago).
   Orbitron não tem largura tabular boa: fixar tabular-nums para não pular. */
.obt-num{
  font-family:'Orbitron',sans-serif;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:0;
}
.obt-num--pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 7px;border-radius:5px;font-size:10.5px;
  background:var(--ghost,rgba(245,244,242,.05));color:var(--tx3,rgba(245,244,242,.36));
}
.obt-num--pill.on{background:var(--orar,rgba(232,130,26,.14));color:var(--ora,#E8821A)}
.obt-num--chapa{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:26px;padding:0 8px;border-radius:6px;font-size:12px;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.07);color:var(--ora,#E8821A);
}
[data-theme="light"] .obt-num--chapa{
  background:var(--ghost,rgba(245,244,242,.05));border-color:var(--keybrd,#323236);color:var(--ora2,#C9570A);
}

/* ═════ DESATIVADO ═════ sólido + tracejado, NUNCA opacity (contrato).
   O rótulo fica em baixo-relevo e ACENDE ao habilitar. */
.obt-usinada[disabled],.obt-usinada.off,
.obt-vidro[disabled],.obt-vidro.off,
.obt-disco[disabled],.obt-disco.off,
.obt-mini[disabled],.obt-mini.off{
  cursor:default;transform:none;pointer-events:none;
  color:var(--keytx,rgba(245,244,242,.36));text-shadow:none;
  border:1px dashed var(--keybrd2,#3C3C41);background:var(--key1,#161618);background-image:none;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
}
[data-theme="light"] .obt-usinada[disabled],[data-theme="light"] .obt-usinada.off,
[data-theme="light"] .obt-vidro[disabled],[data-theme="light"] .obt-vidro.off,
[data-theme="light"] .obt-disco[disabled],[data-theme="light"] .obt-disco.off,
[data-theme="light"] .obt-mini[disabled],[data-theme="light"] .obt-mini.off{
  box-shadow:inset 0 1px 3px rgba(120,126,140,.14);
}
.obt-usinada[disabled]::after,.obt-usinada.off::after,
.obt-vidro[disabled]::after,.obt-vidro.off::after{animation:none;opacity:0}

/* ═════ MOVIMENTO REDUZIDO ═════ */
@media (prefers-reduced-motion:reduce){
  .obt-led::after,.obt-led-el,
  .obt-brasa::after,.obt-brasa-el,
  .obt-halo::after,.obt-halo-el{animation:none}
  .obt-halo::after,.obt-halo-el{background:conic-gradient(from 274deg,
    transparent 0deg,transparent 188deg,var(--ora,#E8821A) 274deg,transparent 360deg)}
}


/* ==================== bloco separator ==================== */

/* ═══════════════════════════════════════════════════════════════════════
   OBAT · DICA — a folha de dica de ferramenta, padrão único do sistema
   Origem: a cascata dos Flashcards. Vale para qualquer botão de ícone:
   disco de cascata, tecla do raio-X, item de sidebar recolhida.

   Uso:  <button data-tip="Pegadinhas" aria-label="Pegadinhas">…</button>
   Lado: data-tip-pos="left" (padrão) · "right" · "top" · "bottom"

   POR QUE NÃO É ::after — muitos botões do sistema já gastam ::after e
   ::before no glow, no anel usinado, no filete. Um elemento tem um ::after
   só, então a dica em pseudo-elemento morria calada justamente nos botões
   mais trabalhados (.lbtn, .feat-icon). Aqui a dica é UM nó flutuante,
   fixo, criado por obat-dica.js — não colide com pseudo-elemento nenhum,
   não é cortada por overflow e não é engolida por z-index de painel.

   Regras que este arquivo respeita (contrato):
   · sem wrap absoluto sem largura — o nó é fixo e tem largura própria
   · nunca usar title= junto (dobra a dica com a nativa do navegador)
   · aria-label continua obrigatório no botão
   ═══════════════════════════════════════════════════════════════════════ */

.obat-dica{
  position:fixed;
  left:0;
  top:0;
  z-index:2147483000;
  max-width:280px;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transform:translateY(1px);
  font:600 10px 'Jost','Space Grotesk',system-ui,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tx2,#8E8B84);
  background:var(--surf,#1E1E22);
  border:1px solid var(--brd2,rgba(255,255,255,.12));
  border-radius:8px;
  padding:6px 10px;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.7);
  transition:opacity .16s,transform .16s;
}

.obat-dica.on{opacity:1;transform:translateY(0)}

/* claro e livro: a folha escurece a tinta e clareia o papel */
body.th-claro .obat-dica,
body.th-paper .obat-dica,
[data-theme="light"] .obat-dica{
  color:#4A453B;
  background:#FFFFFF;
  border-color:rgba(0,0,0,.10);
  box-shadow:0 8px 18px -10px rgba(90,70,30,.45);
}

body.th-sepia .obat-dica{
  color:#4A453B;
  background:#F6EFDF;
  border-color:rgba(138,94,26,.22);
  box-shadow:0 8px 18px -10px rgba(90,70,30,.5);
}

@media print{.obat-dica{display:none!important}}


/* ==================== bloco separator ==================== */


/* ================================================================
   OBAT · Área do Aluno — Stylesheet
   Gerado a partir do Claude Design · Edite livremente
   ================================================================ */



/* ---- Google Fonts ---- */
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("b873efcf.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("178f1ba8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("aae2e427.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("b873efcf.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("178f1ba8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("aae2e427.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("b873efcf.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("178f1ba8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("aae2e427.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("b873efcf.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("178f1ba8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("aae2e427.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("b873efcf.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("178f1ba8.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("aae2e427.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("2fe5111b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("80a19def.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("2fe5111b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("80a19def.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("2fe5111b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("80a19def.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* cyrillic */

/* latin-ext */

/* latin */

/* cyrillic */

/* latin-ext */

/* latin */

/* cyrillic */

/* latin-ext */

/* latin */

/* cyrillic */

/* latin-ext */

/* latin */

/* cyrillic */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* ============ TOKENS ============ */
[data-theme="dark"]{
  --bg:#0B0B0C; --bg2:#0F0F11; --surf:#161618; --surf2:#1D1D20;
  --brd:#262629; --brd2:#323236;
  --tx:#F5F4F2; --tx2:rgba(245,244,242,0.62); --tx3:rgba(245,244,242,0.36);
  --ghost:rgba(245,244,242,0.05);
  --gold:#C9933A; --goldb:#E0B05B; --goldd:#8B6525;
  --goldg:rgba(201,147,58,0.16); --goldg2:rgba(201,147,58,0.07);
  --ora:#E8650A; --ora2:#C9570A; --orab:#FF8534;
  --orag:rgba(232,101,10,0.45); --orar:rgba(232,101,10,0.12); --orass:rgba(232,101,10,0.06);
  --grn:#4CAF50; --grnt:#7BC97F;
  --grnb:rgba(76,175,80,0.08); --grnbrd:rgba(76,175,80,0.22);
  --herobg:radial-gradient(120% 140% at 78% 8%, rgba(232,101,10,0.16) 0%, rgba(201,147,58,0.06) 30%, transparent 62%), linear-gradient(140deg,#0E0E10,#131110,#15110B);
  --wavep:#E8650A; --wavee:#2A2A2D;
  --shadow:0 24px 64px rgba(0,0,0,0.55);
  --shadow-sm:0 10px 30px rgba(0,0,0,0.45);
  --hairline:rgba(255,255,255,0.06);
  --logobg:#080809; --logobrd:#161618;
  --vinyl-a:#0a0a0a; --vinyl-b:#1c1c1f;
  --topbg:rgba(11,11,12,0.78);
}
/* ─── SÓ ESCURO (19 ago) ────────────────────────────────────────────────
   O Painel v2 é dark-only por decisão de contrato. O bloco de tokens claros
   que vivia aqui usava --bg #F4EFE7 (creme saturado) e --ora #C94F08 — dois
   desvios do contrato — e produzia uma quinta mesa clara no sistema.
   Removido: applyThemeAccess() agora trava data-theme="dark" em toda view. */

*{margin:0;padding:0;box-sizing:border-box;}
html.no-anim *{transition:none!important;}
html,body{height:100%;}
body{
  background:var(--bg);color:var(--tx);
  font-family:'Outfit',system-ui,sans-serif;font-weight:400;
  -webkit-font-smoothing:antialiased;
  transition:background-color .45s ease,color .45s ease;
  overflow:hidden;
}
::selection{background:var(--orar);color:var(--tx);}
.jost{font-family:'Jost',sans-serif;}

/* scrollbar */
.scroll::-webkit-scrollbar{width:10px;}
.scroll::-webkit-scrollbar-thumb{background:var(--brd2);border-radius:10px;border:3px solid transparent;background-clip:content-box;}
.scroll::-webkit-scrollbar-track{background:transparent;}

/* ============ APP SHELL ============ */
.app{position:relative;display:grid;grid-template-columns:var(--sbw,272px) 1fr;height:100vh;transition:grid-template-columns .38s cubic-bezier(.4,0,.15,1);}
.app.collapsed{--sbw:74px;}

/* ============ SIDEBAR ============ */
.sidebar{
  border:none;
  display:flex;flex-direction:column;min-height:0;position:relative;z-index:60;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 30%),linear-gradient(0deg,rgba(0,0,0,.3),transparent 26%),#0E0D10;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.07),inset -2px 0 0 rgba(255,255,255,.055),9px 0 30px -10px rgba(0,0,0,.72);
  transition:background-color .45s ease,transform .38s cubic-bezier(.4,0,.15,1);
}
[data-theme="dark"] .sidebar{
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 30%),linear-gradient(0deg,rgba(0,0,0,.3),transparent 26%),#0E0D10;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.07),inset -2px 0 0 rgba(255,255,255,.055),9px 0 30px -10px rgba(0,0,0,.72);
}
.sb-brand{display:flex;align-items:center;gap:13px;padding:22px 22px 20px;}
.sb-logo{width:42px;height:42px;border-radius:50%;flex-shrink:0;object-fit:cover;
  background:transparent;border:none;
  box-shadow:0 0 0 1px rgba(232,101,10,0.22),0 6px 18px rgba(0,0,0,0.4);}
[data-theme="light"] .sb-logo{box-shadow:0 0 0 1px rgba(232,101,10,0.18),0 2px 6px rgba(80,50,10,0.14);}
.sb-brand-tx{display:flex;flex-direction:column;gap:2px;overflow:hidden;white-space:nowrap;transition:opacity .25s;}
.sb-brand-tx .nm{font-family:'Jost',sans-serif;font-weight:800;font-size:17px;letter-spacing:.22em;}
.sb-brand-tx .sub{font-family:'Jost',sans-serif;font-weight:500;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--tx3);}

.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 14px 14px;min-height:0;}
.nav-group{margin-top:18px;}
.nav-group:first-child{margin-top:4px;}
.group-label{font-family:'Jost',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--tx3);padding:0 14px 10px;white-space:nowrap;transition:opacity .25s;}

.nav-item{position:relative;display:flex;align-items:center;gap:13px;width:100%;
  padding:13px 14px;border-radius:13px;background:none;border:1px solid transparent;
  cursor:pointer;text-align:left;color:var(--tx2);margin-bottom:3px;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
.nav-item .ic{flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--tx3);transition:color .2s;}
.nav-item .ic svg{width:21px;height:21px;}
.nav-item .lbl{font-family:'Jost',sans-serif;font-weight:600;font-size:14px;letter-spacing:.02em;white-space:nowrap;flex:1;transition:opacity .25s;}
.nav-item:hover:not(.locked):not(.active){background:var(--ghost);color:var(--tx);}
.nav-item:hover:not(.locked):not(.active) .ic{color:var(--tx2);}

.nav-item.active{
  background:linear-gradient(112deg,rgba(255,196,120,.22),rgba(255,196,120,.06) 40%,transparent 58%),linear-gradient(180deg,#1a1712,#0E0D10);
  border-color:transparent;color:var(--tx);
  box-shadow:0 9px 18px -10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12),inset 1px 0 0 rgba(255,214,150,.2);
}
.nav-item.active .ic{color:var(--ora);filter:drop-shadow(-1px 1px 2px rgba(0,0,0,.5)) drop-shadow(0 0 5px rgba(244,169,60,.35));}
.nav-item.active .lbl{font-weight:700;text-shadow:-1px 1px 2px rgba(0,0,0,.28);}
.nav-item.active::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#FFF3DC,#FFD9A0 55%,#E8821A);
  animation:sbLightPulse 3.2s ease-in-out infinite;}
@keyframes sbLightPulse{0%,100%{box-shadow:0 0 8px rgba(255,217,160,.8),0 0 20px rgba(232,130,26,.45)}50%{box-shadow:0 0 12px rgba(255,225,180,.95),0 0 30px rgba(232,130,26,.6)}}

.nav-item.locked{cursor:not-allowed;opacity:.62;filter:saturate(.55);}
.nav-item.locked .ic{color:var(--tx3);}

.badge{font-family:'Jost',sans-serif;font-weight:700;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;white-space:nowrap;transition:opacity .25s;}
.badge.free{color:var(--grnt);background:var(--grnb);border:1px solid var(--grnbrd);}
.badge.soon{color:var(--tx3);background:var(--ghost);border:1px solid var(--brd);}

/* user chip */
.sb-foot{padding:14px;border-top:1px solid var(--brd);transition:border-color .45s;}
/* ============ GAVETA DO GUARDIÃO ============
   Porta de destaque da Sala dos Guardiões: aba na borda direita da mesa, recolhida.
   Não é ferramenta de módulo (a cascata é isso) nem item de nav — é camada transversal.
   Progresso lido de obat_cartas; silhueta pela mesma técnica da Custódia (clip-path). */
.gg{position:fixed;top:50%;right:0;translate:0 -50%;z-index:58;display:flex;align-items:center;
  font-family:'Jost',sans-serif;pointer-events:none;}
.gg-tab{position:relative;pointer-events:auto;cursor:pointer;flex:none;width:40px;margin-left:-1px;padding:15px 0 13px;display:flex;flex-direction:column;align-items:center;gap:12px;
  border:1px solid rgba(201,147,58,.34);border-right:0;border-radius:14px 0 0 14px;
  background-color:#17150F;
  background-image:linear-gradient(90deg,rgba(255,255,255,.05),transparent 46%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,rgba(0,0,0,.05) 1px 3px),
    linear-gradient(200deg,#201C15,#131315 62%,#18150F);
  box-shadow:-12px 0 30px -14px rgba(0,0,0,.85),inset 1px 0 0 rgba(255,255,255,.07),
    inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.55);
  transition:width .22s,border-color .22s,filter .22s;}
/* fio gravado a 6px da aresta — mesma leitura de metal usinado do bezel */
.gg-tab::before{content:'';position:absolute;left:6px;top:11px;bottom:11px;width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(201,147,58,.26) 16%,rgba(201,147,58,.26) 84%,transparent);}
/* lábio de luz seguindo a curva da aba */
.gg-tab::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);}
.gg-tab:hover{width:45px;border-color:rgba(201,147,58,.8);filter:brightness(1.16);}
.gg-tab:active{width:42px;filter:brightness(.95);}
.gg-tab .selo{flex:none;width:23px;height:23px;background:url("70abce2f.png") center/contain no-repeat;
  filter:drop-shadow(0 0 7px rgba(255,190,100,.5)) drop-shadow(0 1px 0 rgba(0,0,0,.6));}
.gg-tab .rot{writing-mode:vertical-rl;text-orientation:mixed;font-weight:700;font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:#C9933A;white-space:nowrap;}
.gg-tab .n{flex:none;font-family:'Orbitron','Reddit Mono',monospace;font-size:9px;letter-spacing:.04em;color:#8a7040;
  writing-mode:vertical-rl;padding-top:11px;border-top:1px solid rgba(201,147,58,.2);}
.gg-pan{pointer-events:auto;width:0;overflow:hidden;transition:width .3s cubic-bezier(.35,.9,.3,1);
  border:0;border-radius:15px 0 0 15px;
  background:linear-gradient(196deg,rgba(22,19,15,.96),rgba(11,11,12,.97));backdrop-filter:blur(9px);}
.gg.on .gg-pan{width:288px;border:1px solid rgba(201,147,58,.32);border-right:0;
  box-shadow:-18px 0 44px -18px rgba(0,0,0,.85);}
.gg.on .gg-tab{border-color:rgba(201,147,58,.85);}
.gg-in{width:288px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:13px;}
.gg-hd{display:flex;align-items:flex-start;gap:9px;}
.gg-eyebrow{font-weight:700;font-size:8.5px;letter-spacing:.24em;color:#8a7040;}
.gg-tit{font-family:'Cinzel','Space Grotesk',serif;font-weight:700;font-size:15px;letter-spacing:.09em;color:#FFE8C4;}
.gg-x{margin-left:auto;flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;cursor:pointer;
  color:#6E6B64;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);}
.gg-x:hover{color:#F5F4F2;border-color:rgba(255,255,255,.2);}
.gg-fig{position:relative;height:210px;}
.gg-fig .sil,.gg-fig .rev{position:absolute;inset:0 -6%;width:112%;height:100%;object-fit:contain;object-position:bottom;pointer-events:none;}
.gg-fig .sil{filter:brightness(0) saturate(0) drop-shadow(0 0 2px rgba(255,170,70,.55)) drop-shadow(0 0 20px rgba(255,150,40,.16));opacity:.96;}
.gg-fig .rev{filter:drop-shadow(0 14px 30px rgba(0,0,0,.8));transition:clip-path 1.1s cubic-bezier(.3,.9,.3,1);}
.gg-fig .fio{position:absolute;left:8%;right:8%;height:2px;translate:0 -1px;filter:blur(1.4px);
  background:linear-gradient(90deg,transparent,rgba(255,237,210,.9) 26%,#FFF 50%,rgba(255,237,210,.9) 74%,transparent);
  transition:top 1.1s cubic-bezier(.3,.9,.3,1);}
.gg-fig .base{position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(244,169,60,.85) 24%,rgba(255,214,150,.95) 50%,rgba(244,169,60,.85) 76%,transparent);
  box-shadow:0 0 14px rgba(244,169,60,.55);}
.gg-nome{text-align:center;font-family:'Cinzel','Space Grotesk',serif;font-weight:700;font-size:13px;letter-spacing:.3em;margin-left:.3em;}
.gg-med{display:flex;align-items:center;gap:9px;}
.gg-med .bar{flex:1;height:5px;border-radius:3px;background:#1c1c1f;overflow:hidden;}
.gg-med .bar i{display:block;height:100%;background:linear-gradient(90deg,#E8650A,#F4A93C);}
.gg-med .num{flex:none;font-family:'Orbitron','Reddit Mono',monospace;font-size:10.5px;color:#F4A93C;}
.gg-txt{font-family:'Outfit',sans-serif;font-size:11.5px;line-height:1.55;color:#8E8B84;text-wrap:pretty;}
.gg-cta{display:flex;align-items:center;justify-content:center;gap:8px;height:38px;border-radius:9px;text-decoration:none;
  font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#F0E4CE;
  border:1px solid rgba(201,147,58,.55);background:linear-gradient(180deg,#1A1815,#101010);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .2s,color .2s;}
.gg-cta:hover{color:#FFE8C4;border-color:rgba(232,168,80,.9);}
@media (max-width:900px){.gg{display:none;}}

/* CONTA · menu do disco do aluno. É a porta da Sala dos Guardiões fora do Questões:
   a Custódia é transversal, então mora aqui e não na nav de módulos. Mesmo desenho do
   componente OBAT Sidebar — os dois têm de bater. */
.sb-foot{position:relative;}
.sm-off{display:none;}
.sm-veil{position:fixed;inset:0;z-index:60;}
.sb-menu{position:absolute;left:12px;right:12px;bottom:100%;z-index:61;margin-bottom:9px;display:none;flex-direction:column;
  padding:7px;border-radius:14px;background:linear-gradient(178deg,var(--surf2),var(--surf));
  border:1px solid var(--brd2);box-shadow:0 18px 44px rgba(0,0,0,.5);}
.sb-menu.on{display:flex;animation:smIn .18s ease both;}
@keyframes smIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.sm-hd{font-family:'Jost',sans-serif;font-weight:700;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--tx3);padding:5px 9px 7px;}
.sm-it{display:flex;align-items:center;gap:9px;padding:9px;border-radius:10px;color:var(--tx2);text-decoration:none;
  border:1px solid transparent;transition:background .18s,color .18s,border-color .18s;}
.sm-it+.sm-it{margin-top:2px;}
.sm-it:hover{background:var(--ghost);color:var(--tx);}
.sm-it .ic{width:18px;height:18px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--tx3);}
.sm-it .tx{font-family:'Jost',sans-serif;font-weight:600;font-size:12.5px;display:block;}
.sm-it .sub{display:block;font-family:'Outfit',sans-serif;font-weight:500;font-size:9.5px;color:var(--tx3);}
.sm-cust{border-color:rgba(201,147,58,.5);background:linear-gradient(178deg,rgba(255,150,40,.07),transparent 72%);}
.sm-cust:hover{border-color:rgba(201,147,58,.85);background:linear-gradient(178deg,rgba(255,150,40,.12),transparent 72%);}
.sm-cust .tx{color:var(--tx);}
.sm-cust .selo{width:23px;height:23px;flex:none;background:url("70abce2f.png") center/contain no-repeat;
  filter:drop-shadow(0 0 6px rgba(255,190,100,.45));}
.sm-n{margin-left:auto;font-family:'Orbitron','Reddit Mono',monospace;font-size:10px;letter-spacing:.08em;color:#8a7040;white-space:nowrap;}
.sm-sep{height:1px;background:var(--brd);margin:6px 3px;}
.sm-out:hover{color:#e08a8a;background:rgba(196,70,58,.10);}
.user-chip .uc-caret{margin-left:auto;flex:none;color:var(--tx3);transition:transform .2s,color .2s;}
.user-chip:hover .uc-caret{color:var(--tx2);}
.sb-foot.menu-on .uc-caret{transform:rotate(180deg);}
.app.collapsed .sb-menu{left:8px;right:auto;min-width:214px;}
.app.collapsed .user-chip .uc-caret{display:none;}
.user-chip{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;
  background:var(--surf);border:1px solid var(--brd);cursor:pointer;transition:border-color .2s,background-color .2s;}
.user-chip:hover{border-color:var(--brd2);}
.avatar{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:'Jost',sans-serif;font-weight:700;font-size:14px;color:#fff;letter-spacing:.04em;
  background:linear-gradient(135deg,var(--ora2),var(--ora));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 12px var(--orag);}
.user-meta{overflow:hidden;white-space:nowrap;transition:opacity .25s;}
.user-meta .un{font-family:'Jost',sans-serif;font-weight:600;font-size:13px;}
.user-meta .ue{font-size:11px;color:var(--tx3);text-overflow:ellipsis;overflow:hidden;}

/* ---- COLLAPSED STATE ---- */

/* DICA: aberta, o rótulo já está ao lado do ícone, então a dica cala.
   Recolhida (ou no drawer do celular, onde o rótulo volta) ela assume. */
.app:not(.collapsed) .nav-item[data-tip]{--tip-off:1}
@media(max-width:900px){.app.collapsed .nav-item[data-tip]{--tip-off:1}}
/* esconde textos e badges sem ocupar espaço */
.app.collapsed .sb-brand-tx,
.app.collapsed .nav-item .lbl,
.app.collapsed .nav-item .badge,
.app.collapsed .user-meta{
  opacity:0;
  max-width:0;
  overflow:hidden;
  pointer-events:none;
  padding:0;
  margin:0;
  flex-shrink:1;
  min-width:0;
}
/* group labels viram zero height */
.app.collapsed .group-label{
  opacity:0;
  height:0;
  padding:0;
  margin:0;
  overflow:hidden;
  pointer-events:none;
}
/* sb-nav: padding lateral reduzido pro container de 84px */
.app.collapsed .sb-nav{padding-left:8px;padding-right:8px;}
/* nav-item: altura fixa, ícone centralizado, sem gap */
.app.collapsed .nav-item{
  justify-content:center;
  padding:12px 0;
  gap:0;
  width:100%;
}
.app.collapsed .nav-item .ic{margin:0 auto;}
/* indicador lateral some — não cabe na largura */
.app.collapsed .nav-item.active::before{display:none;}
/* ativo: fundo circular sutil no lugar do indicador */
.app.collapsed .nav-item.active{
  background:linear-gradient(112deg,rgba(255,196,120,.22),rgba(255,196,120,.06) 45%,transparent 62%),linear-gradient(180deg,#1a1712,#0E0D10);
  border-color:transparent;
  box-shadow:0 9px 18px -10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);
}
/* brand: centraliza logo, zera gap */
.app.collapsed .sb-brand{justify-content:center;padding-left:0;padding-right:0;gap:0;}
/* user chip: só avatar centralizado */
.app.collapsed .user-chip{justify-content:center;padding-left:0;padding-right:0;gap:0;}
.app.collapsed .avatar{margin:0 auto;}

/* ============ MAIN ============ */
.main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);transition:background-color .45s;}
[data-theme="dark"] .main{background:transparent;position:relative;z-index:1;}
[data-theme="dark"] .app{background-color:#07080b;background-image:radial-gradient(85% 62% at 14% 6%,rgba(48,64,118,.11),transparent 56%),radial-gradient(78% 58% at 90% 94%,rgba(82,56,120,.10),transparent 56%),radial-gradient(70% 55% at 88% 3%,rgba(255,166,102,.045),transparent 55%),radial-gradient(140% 122% at 50% 44%,transparent 46%,rgba(0,0,0,.62) 100%),linear-gradient(27deg,rgba(255,255,255,.022) 1.5px,transparent 1.5px),linear-gradient(207deg,rgba(255,255,255,.022) 1.5px,transparent 1.5px),linear-gradient(27deg,rgba(0,0,0,.18) 1.5px,transparent 1.5px),linear-gradient(207deg,rgba(0,0,0,.18) 1.5px,transparent 1.5px);background-position:0 0,0 0,0 0,0 0,0 1.5px,3px 0,0 1.5px,3px 0;background-size:100% 100%,100% 100%,100% 100%,100% 100%,6px 6px,6px 6px,6px 6px,6px 6px;background-attachment:fixed;}
[data-theme="dark"] .app::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(48% 64% at 50% -6%,rgba(255,214,168,.13),rgba(255,214,168,.04) 42%,transparent 66%);animation:main-sway 11s cubic-bezier(.45,0,.55,1) infinite alternate;will-change:transform,opacity;}
[data-theme="dark"] .app::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(42% 52% at 28% 108%,rgba(120,150,205,.09),transparent 60%);animation:main-sway2 14s cubic-bezier(.45,0,.55,1) infinite alternate;will-change:transform,opacity;}
@keyframes main-sway{0%{transform:translateX(-7%) scale(1);opacity:.7;}50%{opacity:1;}100%{transform:translateX(7%) scale(1.04);opacity:.82;}}
@keyframes main-sway2{0%{transform:translateX(5%);opacity:.5;}100%{transform:translateX(-5%);opacity:.85;}}
@media (prefers-reduced-motion:reduce){[data-theme="dark"] .app::before,[data-theme="dark"] .app::after{animation:none;}}

.topbar{display:flex;align-items:center;gap:16px;height:66px;flex-shrink:0;padding:0 26px;
  background:var(--topbg);backdrop-filter:blur(14px);border-bottom:1px solid var(--brd);
  position:relative;z-index:40;transition:background-color .45s,border-color .45s;}
.hamb{width:40px;height:40px;border-radius:11px;border:1px solid var(--brd);background:var(--surf);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tx2);flex-shrink:0;
  transition:border-color .2s,color .2s,background-color .2s;}
.hamb:hover{color:var(--tx);border-color:var(--brd2);}
.crumb{display:flex;align-items:center;gap:9px;font-family:'Jost',sans-serif;font-weight:500;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);min-width:0;}
.crumb .sep{opacity:.4;}
.crumb .cur{color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.theme-toggle{display:flex;align-items:center;gap:11px;margin-left:auto;flex-shrink:0;}
.tlabel{font-family:'Jost',sans-serif;font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);}
.tsw{position:relative;width:46px;height:25px;cursor:pointer;flex-shrink:0;}
.tsw input{position:absolute;opacity:0;width:0;height:0;}
.ttrack{position:absolute;inset:0;background:var(--surf2);border:1px solid var(--brd);border-radius:13px;transition:all .35s;}
.tthumb{position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;
  background:linear-gradient(135deg,var(--goldb),var(--gold));display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.4,0,.15,1);}
.tthumb svg{width:11px;height:11px;color:#15110D;}
.tsw input:checked ~ .tthumb{transform:translateX(21px);}

/* views */
.views{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;position:relative;}
.view{display:none;}
.view.active{display:block;}
.view.enter{animation:fadeIn .42s cubic-bezier(.22,.61,.36,1) both;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ============ SHARED ============ */
.section-tag{display:inline-flex;align-items:center;gap:11px;font-family:'Jost',sans-serif;font-weight:700;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);}
.section-tag::before{content:'';width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--goldd));}

.card{background:var(--surf);border:1px solid var(--brd);border-radius:18px;position:relative;
  box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s,background-color .45s;}
.card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 var(--hairline);}

/* ============ INÍCIO ============ */
#view-inicio.view.active{display:flex;flex-direction:column;justify-content:center;min-height:100%;}
.home-wrap{max-width:1080px;margin:0 auto;padding:46px 40px 80px;width:100%;}
.holo{transition:transform .2s cubic-bezier(.22,.61,.36,1),border-color .2s,box-shadow .2s;}
.holo:hover{transform:translateY(-3px);border-color:rgba(245,178,74,.55)!important;box-shadow:0 20px 40px -18px rgba(224,96,8,.4),inset 0 1px 0 rgba(255,220,150,.12)!important;}

.greet{margin-bottom:42px;}
.greet h1{font-family:'Jost',sans-serif;font-weight:700;font-size:40px;line-height:1.08;letter-spacing:-.01em;margin-top:16px;}
.greet h1 .name{background:linear-gradient(105deg,var(--goldb),var(--gold) 55%,var(--goldd));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.greet p{margin-top:14px;color:var(--tx2);font-size:15.5px;max-width:560px;line-height:1.55;}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:40px;}
.stat{padding:22px 22px 20px;}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brd2);}
.stat .sic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  background:var(--goldg2);border:1px solid var(--goldg);color:var(--gold);}
.stat .sic svg{width:21px;height:21px;}
.stat .snum{font-family:'Jost',sans-serif;font-weight:700;font-size:32px;line-height:1;letter-spacing:-.01em;}
.stat .snum .u{font-size:15px;font-weight:600;color:var(--tx3);margin-left:3px;letter-spacing:0;}
.stat .slbl{margin-top:9px;font-size:12.5px;color:var(--tx2);letter-spacing:.01em;}

.block-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;gap:16px;}
.block-head h2{font-family:'Jost',sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em;}
.block-head .h-hint{font-size:12px;color:var(--tx3);}

/* continue strip */
.continue{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;
  padding:24px 28px;margin-bottom:46px;background:var(--herobg);overflow:hidden;}
.continue::before{content:'';position:absolute;top:-90px;left:-40px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,var(--orar),transparent 68%);pointer-events:none;}
.cont-info{position:relative;min-width:0;}
.cont-info .ct{font-family:'Jost',sans-serif;font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:9px;}
.cont-info .cttl{font-family:'Jost',sans-serif;font-weight:700;font-size:20px;line-height:1.25;margin-bottom:6px;}
.cont-info .csub{font-size:12.5px;color:var(--tx3);margin-bottom:16px;}
.cont-info .csub b{color:var(--goldd);font-weight:600;}
.cont-prog{display:flex;align-items:center;gap:13px;max-width:440px;}
.cont-prog .track{flex:1;height:5px;border-radius:3px;background:var(--brd2);overflow:hidden;}
.cont-prog .fill{height:100%;border-radius:3px;width:34%;background:linear-gradient(90deg,var(--ora2),var(--ora));box-shadow:0 0 10px var(--orag);}
.cont-prog .pl{font-family:'Jost',sans-serif;font-weight:700;font-size:12px;color:var(--ora);white-space:nowrap;}

/* play button (shared circular) */
.play-btn{position:relative;flex-shrink:0;border:none;cursor:pointer;border-radius:50%;
  background:linear-gradient(135deg,var(--ora2),var(--ora));display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 26px var(--orag),0 0 0 3px var(--orar),inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s;}
.play-btn:hover{transform:scale(1.06);box-shadow:0 10px 36px var(--orag),0 0 0 4px var(--orar),inset 0 1px 0 rgba(255,255,255,.2);}
.play-btn svg{color:#fff;}
.play-btn.big{width:66px;height:66px;}
.play-btn.big svg{width:24px;height:24px;}
.play-btn::before{content:'';position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--orar);animation:ringpulse 2.4s ease-in-out infinite;}
@keyframes ringpulse{0%,100%{opacity:.35;transform:scale(1);}50%{opacity:.85;transform:scale(1.07);}}

/* ============ VINYL ============ */
.vinyl{position:relative;border-radius:50%;flex-shrink:0;cursor:grab;
  background:
    repeating-radial-gradient(circle at center, rgba(0,0,0,0.5) 0 1.4px, rgba(255,255,255,0.018) 1.4px 3px),
    radial-gradient(circle at center, var(--vinyl-b) 0%, var(--vinyl-a) 60%, #050505 100%);
  box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
}
.vinyl::before{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 210deg, transparent 0deg, rgba(255,255,255,.10) 30deg, transparent 80deg, transparent 200deg, rgba(255,255,255,.07) 240deg, transparent 300deg);
  mix-blend-mode:screen;opacity:.7;}
.vinyl .label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;
  object-fit:cover;background:transparent;
  border:2px solid var(--ora);box-shadow:0 0 14px var(--orag),0 2px 8px rgba(0,0,0,.5);}
.vinyl .spindle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:9px;height:9px;border-radius:50%;background:var(--bg);border:1.5px solid var(--ora);z-index:3;box-shadow:0 0 6px var(--orag);}
.vinyl-spin{animation:spin var(--spd,6.5s) linear infinite;}
.vinyl-spin.paused{animation-play-state:paused;}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.vinyl-shell{position:relative;flex-shrink:0;}
.vinyl-glow{position:absolute;inset:-14px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--orag),transparent 70%);animation:glowpulse 3.2s ease-in-out infinite;opacity:.5;}
@keyframes glowpulse{0%,100%{opacity:.35;transform:scale(1);}50%{opacity:.75;transform:scale(1.06);}}

/* continue vinyl sizing */
.cont-vinyl .vinyl{width:108px;height:108px;}
.cont-vinyl .vinyl .label{width:42px;height:42px;}

/* ============ MODULES GRID ============ */
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:42px;}
.mod{padding:24px 24px 22px;display:flex;flex-direction:column;min-height:188px;}
.mod .mtop{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;}
.mod .mic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--surf2);border:1px solid var(--brd);color:var(--tx2);}
.mod .mic svg{width:23px;height:23px;}
.mod .mttl{font-family:'Jost',sans-serif;font-weight:700;font-size:17px;letter-spacing:.01em;margin-bottom:7px;}
.mod .mdesc{font-size:12.5px;color:var(--tx2);line-height:1.5;flex:1;}
.mod .mfoot{margin-top:18px;}

.mod.live{background:var(--herobg);}
.mod.live .mic{background:var(--orass);border-color:var(--orar);color:var(--ora);}
.mod.live:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--orar);}
.mod-prog{display:flex;align-items:center;gap:11px;margin-bottom:16px;}
.mod-prog .track{flex:1;height:4px;border-radius:3px;background:var(--brd2);overflow:hidden;}
.mod-prog .fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--ora2),var(--ora));}
.mod-prog .pl{font-family:'Jost',sans-serif;font-weight:700;font-size:11px;color:var(--ora);}
.cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--ora2),var(--ora));
  color:#fff;border:none;border-radius:11px;padding:11px 18px;font-family:'Jost',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 6px 18px var(--orag),inset 0 1px 0 rgba(255,255,255,.15);transition:transform .2s,box-shadow .2s;}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--orag),inset 0 1px 0 rgba(255,255,255,.15);}
.cta svg{width:15px;height:15px;}

.mod.soon{filter:saturate(.5);opacity:.74;}
.mod.soon .mttl{color:var(--tx2);}
.lockchip{display:inline-flex;align-items:center;gap:7px;font-family:'Jost',sans-serif;font-weight:700;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);
  background:var(--ghost);border:1px solid var(--brd);border-radius:9px;padding:9px 13px;}
.lockchip svg{width:13px;height:13px;}

/* closing banner */
.banner{display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:16px;
  background:var(--goldg2);border:1px solid var(--goldg);}
.banner .bic{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--goldg);border:1px solid var(--goldg);color:var(--gold);}
.banner .btx strong{display:block;font-family:'Jost',sans-serif;font-weight:600;font-size:13.5px;margin-bottom:3px;}
.banner .btx span{font-size:12.5px;color:var(--tx2);line-height:1.5;}

/* ============ MISSION LAUNCHER — aço em espera ============ */
.mission{display:flex;flex-direction:column;align-items:center;padding:30px 0;margin-bottom:0;}
.mission-launch{display:flex;flex-direction:column;align-items:center;gap:24px;}
.mission-label{font-weight:700;font-size:10px;letter-spacing:3.5px;text-transform:uppercase;
  color:#8A867E;padding-left:3.5px;transition:color .35s;}
.mission.open .mission-label{color:#C9933A;}

/* ===== BOTÃO INICIAR MISSÃO — .mb-steel (padrão do protótipo) ===== */
@keyframes msteelring{0%{opacity:0;transform:scale(.92)}50%{opacity:.5}100%{opacity:0;transform:scale(1.28)}}
.mb-steel:hover{transform:translateY(-3px);}
.mb-steel:active{transform:translateY(2px) scale(.97);}
.mission.open .mb-steel{transform:translateY(3px);}
.mission.open .mb-steel__path{fill:url(#rkAmber);}
.mission.open .mb-steel__rk{transform:translateY(1px) scale(.97);filter:drop-shadow(0 0 7px rgba(232,101,10,.65));}
.mission.open .mb-steel__ring{animation:msteelring 2.4s ease-out infinite;}
.mission.open .mb-steel__gloss{opacity:.25;}
.mission.open .mb-steel__body{border-color:rgba(255,150,30,.6);background-image:radial-gradient(rgba(255,140,20,.05) .5px,transparent .6px),radial-gradient(62% 56% at 50% 60%,rgba(232,101,10,.30),transparent 60%),radial-gradient(circle at 42% 34%,#241a12 0%,#150d08 52%,#0a0604 100%);background-size:4px 4px,100% 100%,100% 100%;box-shadow:inset 0 8px 16px rgba(0,0,0,.72),inset 0 -2px 5px rgba(255,180,90,.14),0 0 24px rgba(232,101,10,.34),0 1px 0 rgba(255,255,255,.05);}
@media(prefers-reduced-motion:reduce){.mission.open .mb-steel__ring{animation:none;}}

.mission-btn{position:relative;width:130px;height:130px;border-radius:50%;cursor:pointer;border:1px solid rgba(201,147,58,.28);
  display:flex;align-items:center;justify-content:center;color:#A8A49B;-webkit-tap-highlight-color:transparent;
  background-color:#191920;
  background-image:radial-gradient(rgba(255,255,255,.045) .5px,transparent .6px),radial-gradient(circle at 42% 30%,#2f2f3a 0%,#1a1a20 48%,#0e0e13 100%);
  background-size:4px 4px,100% 100%;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.75),inset 0 2px 0 rgba(255,255,255,.10),inset 0 -12px 22px rgba(0,0,0,.6);
  transition:transform .35s cubic-bezier(.4,0,.15,1),background-color .42s,background-image .42s,box-shadow .42s,border-color .42s,color .42s;}
.mission-btn::before{content:"";position:absolute;left:14%;right:14%;top:8%;height:26%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent);pointer-events:none;}
.mission-btn:hover{transform:translateY(-3px) scale(1.03);}
.mission-btn:active{transform:scale(.95);}
.mission-rocket{width:55px;height:62px;position:relative;z-index:2;color:#A8A49B;
  transition:transform .5s cubic-bezier(.34,1.4,.5,1),color .42s,filter .35s;}
.mission-btn:hover .mission-rocket{transform:translateY(-2px);}

/* three pulse rings — silenciosos em repouso, só pulsam armado */
.mission-rings{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:0;}
.m-ring{position:absolute;inset:2px;border-radius:50%;border:2px solid rgba(201,147,58,.5);opacity:0;}
.m-ring:nth-child(2){animation-delay:.97s;}
.m-ring:nth-child(3){animation-delay:1.94s;}
@keyframes mRing{0%{transform:scale(1);opacity:.4;}70%{opacity:0;}100%{transform:scale(1.75);opacity:0;}}
.mission.open .m-ring{animation:mRing 2.9s ease-out infinite;}
@media(prefers-reduced-motion:reduce){.m-ring{animation:none;}}

/* armado — clica e finca: afunda + acende âmbar */
.mission.open .mission-btn{color:#F0821A;border-color:rgba(255,150,30,.6);transform:translateY(3px);
  background-color:#191920;
  background-image:radial-gradient(rgba(255,140,20,.05) .5px,transparent .6px),radial-gradient(62% 56% at 50% 60%,rgba(232,101,10,.30),transparent 60%),radial-gradient(circle at 42% 34%,#241a12 0%,#150d08 52%,#0a0604 100%);
  background-size:4px 4px,100% 100%,100% 100%;
  box-shadow:inset 0 8px 16px rgba(0,0,0,.72),inset 0 -2px 5px rgba(255,180,90,.14),0 0 24px rgba(232,101,10,.34),0 1px 0 rgba(255,255,255,.05);}
.mission.open .mission-rocket{color:#F0821A;filter:drop-shadow(0 0 7px rgba(232,101,10,.65));}
.mission.open .mission-rocket__path{fill:url(#rkAmber);}
.mission.open .mission-btn::before{opacity:.25;}

/* light mode — contained, subtle button shadow */
[data-theme="light"] .mission-btn{box-shadow:0 2px 6px rgba(90,70,35,.18),inset 0 2px 0 rgba(255,255,255,.22),inset 0 -10px 20px rgba(120,55,10,.14);}
[data-theme="light"] .mission.open .mission-btn{box-shadow:0 5px 14px rgba(90,70,35,.18),0 2px 5px rgba(90,70,35,.12),inset 0 2px 0 rgba(255,255,255,.05);}

/* soft pulsing gold ring — active state */
.mission-aura{position:absolute;inset:-3px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;
  border:2px solid #C9933A;}
.mission.open .mission-aura{opacity:1;animation:goldPulse 2.6s cubic-bezier(.25,.46,.45,.94) infinite;}
@keyframes goldPulse{0%{transform:scale(1);opacity:.6;}70%{opacity:0;}100%{transform:scale(1.32);opacity:0;}}
@media(prefers-reduced-motion:reduce){.mission.open .mission-aura{animation:none;opacity:0;}}

/* expanding panel */
.mission-panel{width:100%;max-height:0;opacity:0;overflow:hidden;position:relative;z-index:2;transform:translateY(-6px);
  transition:max-height .55s cubic-bezier(.4,0,.15,1),opacity .42s ease,transform .45s ease,margin-top .45s ease;}
.mission.open .mission-panel{max-height:300px;opacity:1;transform:none;margin-top:28px;}

/* ==== módulos em placa de metal (protótipo Cravado) — revelação ==== */
.mission-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px 20px;margin-top:0;width:100%;
  max-height:0;opacity:0;overflow:hidden;position:relative;z-index:2;
  transition:max-height .34s cubic-bezier(.4,0,.6,1),opacity .2s ease,margin-top .28s ease;}
.mission.open .mission-cards{max-height:2600px;opacity:1;margin-top:28px;
  transition:max-height .75s cubic-bezier(.22,.61,.36,1),opacity .4s ease,margin-top .45s ease;}
.mission-cards .rv{opacity:0;transform:translateY(26px) scale(.95);}
.mission.open .mission-cards .rv{animation:rvIn .55s cubic-bezier(.22,.61,.36,1) forwards;}
.mission.open .mission-cards .rv:nth-child(1){animation-delay:.03s}
.mission.open .mission-cards .rv:nth-child(2){animation-delay:.09s}
.mission.open .mission-cards .rv:nth-child(3){animation-delay:.15s}
.mission.open .mission-cards .rv:nth-child(4){animation-delay:.21s}
.mission.open .mission-cards .rv:nth-child(5){animation-delay:.27s}
.mission.open .mission-cards .rv:nth-child(6){animation-delay:.33s}
.mission.open .mission-cards .rv:nth-child(7){animation-delay:.39s}
.mission.open .mission-cards .rv:nth-child(8){animation-delay:.45s}
.mission.open .mission-cards .rv:nth-child(9){animation-delay:.51s}
@keyframes rvIn{0%{opacity:0;transform:translateY(26px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cbEmber{0%,100%{opacity:.72}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.mission.open .mission-cards .rv{animation:none;opacity:1;transform:none;}}
/* painel de KPIs some suavemente quando a missão abre */
.bat-panel-wrap{transition:opacity .25s ease,transform .25s ease,max-height .35s ease,margin-bottom .35s ease;max-height:1000px;}
.home-wrap.kpi-hidden .bat-panel-wrap{opacity:0;transform:translateY(-10px);max-height:0;margin-bottom:0;overflow:hidden;pointer-events:none;}
.mission-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px 20px;width:100%;}
.fan-slot{width:100%;position:relative;opacity:0;transform:translateY(-22px) scale(.72);transform-origin:top center;pointer-events:none;
  transition:transform .42s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;will-change:transform,opacity;}
.fan-slot:nth-child(1){transition-delay:.24s;}
.fan-slot:nth-child(2){transition-delay:.21s;}
.fan-slot:nth-child(3){transition-delay:.18s;}
.fan-slot:nth-child(4){transition-delay:.15s;}
.fan-slot:nth-child(5){transition-delay:.12s;}
.fan-slot:nth-child(6){transition-delay:.09s;}
.fan-slot:nth-child(7){transition-delay:.06s;}
.fan-slot:nth-child(8){transition-delay:.03s;}

/* VM-CARD — vidro sobre metal, símbolo cravado direto na placa */
.vm-card{position:relative;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;border:1px solid rgba(0,0,0,.55);border-radius:20px;padding:10px 10px 15px;
  background-color:#26262c;background-image:linear-gradient(118deg,rgba(255,255,255,.08) 0%,transparent 30%,transparent 70%,rgba(255,255,255,.04) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.06) 1px 2px),linear-gradient(180deg,#2e2e37,#1b1b20);
  background-size:100% 100%,2px 2px,100% 100%;
  box-shadow:0 28px 52px -22px rgba(0,0,0,.9),0 6px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 2px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.4);
  transition:transform .2s cubic-bezier(.22,.61,.36,1);}
.vm-card:hover{transform:translateY(-3px);}
.vm-card.soon{cursor:default;opacity:.9;}
.vm-card__rim{position:absolute;left:16px;right:16px;bottom:7px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,150,30,.8),transparent);box-shadow:0 0 8px rgba(232,101,10,.6);animation:cbEmberVM 3s ease-in-out infinite;}
.vm-card.premium .vm-card__rim{background:linear-gradient(90deg,transparent,rgba(232,176,91,.85),transparent);box-shadow:0 0 8px rgba(201,147,58,.6);}
@keyframes cbEmberVM{0%,100%{opacity:.72}50%{opacity:1}}
.vm-card__glass{position:relative;border-radius:13px;padding:20px;border:1px solid rgba(255,255,255,.14);
  background-color:#171720;background-image:linear-gradient(133deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 20%,transparent 44%),linear-gradient(180deg,rgba(48,48,62,.55),rgba(14,14,20,.82));
  box-shadow:0 8px 16px -6px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -8px 16px rgba(0,0,0,.4);}
.vm-card.soon .vm-card__glass{border-color:rgba(255,255,255,.10);background-color:#151519;background-image:linear-gradient(133deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 20%,transparent 44%),linear-gradient(180deg,rgba(40,40,52,.5),rgba(12,12,18,.82));}
.vm-card__row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;}
.vm-card__ic{stroke:#0c0c0a;filter:drop-shadow(0 1px 0.5px rgba(255,255,255,.22));}
.vm-card__badge{font-family:inherit;font-weight:700;font-size:10.5px;letter-spacing:.08em;padding:4px 9px;border-radius:20px;margin-top:6px;}
.vm-card__badge.avail{color:#7BC97F;background:rgba(76,175,80,.10);border:1px solid rgba(76,175,80,.28);}
.vm-card__badge.premium{color:#E0B05B;background:rgba(201,147,58,.12);border:1px solid rgba(201,147,58,.34);}
.vm-card__badge.soon{color:rgba(240,236,228,.5);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);}
.vm-card__ttl{font-family:'Jost',sans-serif;font-weight:700;font-size:19px;letter-spacing:.01em;color:#F7F4EE;text-shadow:0 1px 0 rgba(0,0,0,.5);}
.vm-card.soon .vm-card__ttl{color:#E8E4DA;}
.vm-card__desc{font-size:12.5px;line-height:1.5;color:rgba(240,236,228,.62);margin-top:6px;}
.vm-card.soon .vm-card__desc{color:rgba(240,236,228,.55);}

.launch-card{text-align:left;font:inherit;color:inherit;background:var(--surf);border:1px solid var(--brd);
  border-radius:16px;box-shadow:var(--shadow-sm);padding:20px;width:100%;height:200px;overflow:hidden;display:flex;flex-direction:column;
  position:relative;cursor:default;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s,border-color .28s,background-color .45s;}
.launch-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 var(--hairline);}
.launch-card .lc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;}
.launch-card .lc-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--surf2);border:1px solid var(--brd);color:var(--tx2);transition:all .25s;}
.launch-card .lc-ic svg{width:22px;height:22px;}
.launch-card .lc-ttl{font-family:'Jost',sans-serif;font-weight:700;font-size:16px;letter-spacing:.01em;margin-bottom:6px;}
.launch-card .lc-desc{font-size:12px;color:var(--tx2);line-height:1.5;}

/* light mode — borda fina bege + sombra suave, sem inset/outline (sem quadrado delimitador) */
[data-theme="light"] .launch-card{box-shadow:0 2px 8px rgba(0,0,0,0.06);outline:none;border:1px solid #E8E0D0;}
[data-theme="light"] .launch-card::after{box-shadow:none;}
[data-theme="light"] .launch-card.live:hover,
[data-theme="light"] .launch-card.premium:hover{box-shadow:0 6px 16px rgba(0,0,0,0.10);border-color:#D8CFBE;}

.launch-card.live{background:var(--herobg);cursor:pointer;}
.launch-card.live .lc-ic{background:var(--orass);border-color:var(--orar);color:var(--ora);}
.launch-card.live:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--orar);}
.launch-card.premium{cursor:pointer;}
.launch-card.premium .lc-ic{background:var(--goldg2);border-color:var(--goldg);color:var(--gold);}
.launch-card.premium:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--goldg);}
.launch-card.soon{filter:saturate(.55);opacity:.72;}
.launch-card.soon .lc-ttl{color:var(--tx2);}

.lc-badge{font-family:'Jost',sans-serif;font-weight:700;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:20px;white-space:nowrap;}
.lc-badge.avail{color:var(--grnt);background:var(--grnb);border:1px solid var(--grnbrd);}
.lc-badge.premium{color:var(--gold);background:var(--goldg2);border:1px solid var(--goldg);}
.lc-badge.soon{color:var(--tx3);background:var(--ghost);border:1px solid var(--brd);}

/* linha horizontal — 4 cards lado a lado, surgindo do botão */
.mission.cards .fan-slot{opacity:1;pointer-events:auto;}
.mission.cards .fan-slot.s1,
.mission.cards .fan-slot.s2,
.mission.cards .fan-slot.s3,
.mission.cards .fan-slot.s4{transform:translateY(0) scale(1);}
.mission.cards .fan-slot.s2{transition-delay:.06s;}
.mission.cards .fan-slot.s3{transition-delay:.12s;}
.mission.cards .fan-slot.s4{transition-delay:.18s;}
.home-wrap .banner{display:none;}
@media(prefers-reduced-motion:reduce){
  .fan-slot{transition-duration:.01s;}
}

@media(max-width:560px){
  .mission-grid{gap:7px;}
  .launch-card{padding:12px;height:200px;border-radius:13px;}
  .mission{padding:24px 0;}
}

/* ============ BATVOX VIEW ============ */
.bv-wrap{max-width:1180px;margin:0 auto;padding:34px 40px 80px;}
.bv-top{display:flex;align-items:center;gap:18px;margin-bottom:28px;}
.back-btn{display:inline-flex;align-items:center;gap:9px;background:var(--surf);border:1px solid var(--brd);
  border-radius:11px;padding:10px 16px;font-family:'Jost',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.06em;color:var(--tx2);cursor:pointer;transition:border-color .2s,color .2s,background-color .2s;}
.back-btn:hover{color:var(--tx);border-color:var(--brd2);background:var(--ghost);}
.back-btn svg{width:16px;height:16px;}

.bv-grid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:24px;align-items:start;}

/* player card */
.player-card{overflow:hidden;}
.logo-bar{background:var(--logobg);border-bottom:1px solid var(--logobrd);display:flex;align-items:center;gap:13px;
  padding:16px 26px;transition:background-color .45s,border-color .45s;}
.logo-bar img{width:30px;height:30px;border-radius:50%;border:none;background:transparent;}
.logo-bar .wm{font-family:'Jost',sans-serif;font-weight:800;font-size:16px;letter-spacing:.4em;color:#F5F4F2;}
.logo-bar .wm .dot{color:var(--ora);}

.bv-hero{display:grid;grid-template-columns:218px 1fr;background:var(--herobg);border-bottom:1px solid var(--brd);
  position:relative;overflow:hidden;transition:background-color .45s,border-color .45s;}
.bv-hero::before{content:'';position:absolute;top:-70px;right:30px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,var(--orar),transparent 70%);pointer-events:none;}
.hero-disco{display:flex;align-items:center;justify-content:center;padding:34px 16px 34px 34px;}
.hero-disco .vinyl{width:160px;height:160px;}
.hero-disco .vinyl .label{width:62px;height:62px;}
.hero-info{padding:34px 34px 34px 6px;display:flex;flex-direction:column;justify-content:center;gap:11px;position:relative;}
.hero-info .htag{font-family:'Jost',sans-serif;font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:9px;}
.hero-info .htag::before{content:'';width:22px;height:1px;background:var(--goldd);}
.hero-info .htitle{font-family:'Jost',sans-serif;font-weight:700;font-size:21px;line-height:1.26;}
.hero-info .hsub{font-size:12.5px;color:var(--tx3);}
.hero-info .hsub b{color:var(--goldd);font-weight:600;}
.hero-prog{display:flex;align-items:center;gap:11px;margin-top:6px;max-width:360px;}
.hero-prog .track{flex:1;height:4px;border-radius:3px;background:var(--brd2);overflow:hidden;}
.hero-prog .fill{height:100%;border-radius:3px;width:34%;background:linear-gradient(90deg,var(--gold),var(--goldb));}
.hero-prog .pl{font-family:'Jost',sans-serif;font-weight:700;font-size:11px;color:var(--goldb);white-space:nowrap;}

/* controls */
.ctrl-zone{padding:24px 30px 28px;background:var(--bg2);border-bottom:1px solid var(--brd);transition:background-color .45s,border-color .45s;}
.waveform{width:100%;height:60px;display:block;margin-bottom:18px;cursor:pointer;}
.wv-bar{flex:1;min-width:2px;border-radius:2px;transition:background-color .3s;}
.prog-track{height:4px;background:var(--brd2);border-radius:3px;cursor:pointer;margin-bottom:11px;position:relative;}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--ora2),var(--ora));border-radius:3px;width:34%;position:relative;}
.prog-fill::after{content:'';position:absolute;right:-6px;top:-4px;width:12px;height:12px;background:var(--ora);border-radius:50%;box-shadow:0 0 8px var(--orag),0 2px 4px rgba(0,0,0,.4);}
.prog-mark{position:absolute;top:50%;transform:translate(-50%,-50%);width:2.5px;height:11px;border-radius:2px;background:var(--tx3);opacity:.5;cursor:pointer;transition:opacity .18s,height .18s,background .18s;z-index:4;}
.prog-mark::before{content:'';position:absolute;inset:-5px -6px;} /* área de toque maior */
.prog-mark:hover{opacity:1;height:16px;background:var(--ora);}
.prog-mark.passed{background:var(--ora2);opacity:.85;}
.prog-tip{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--surf2);color:var(--tx);border:1px solid var(--brd);border-radius:7px;padding:5px 9px;font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:.01em;box-shadow:var(--shadow-sm);opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;z-index:8;}
.prog-tip b{color:var(--ora);font-weight:700;margin-left:4px;}
.prog-mark:hover .prog-tip{opacity:1;transform:translateX(-50%) translateY(-2px);}
.time-row{display:flex;justify-content:space-between;font-family:'Jost',sans-serif;font-weight:500;font-size:11px;color:var(--tx3);letter-spacing:.06em;margin-bottom:22px;}

.ctrl-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;}

/* seletor de velocidade — gaveta oculta, abre no hover (mesma paleta OBAT) */
.spd{position:relative;display:inline-flex;justify-self:start;}
.spd-btn-label{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px solid rgba(232,228,220,.12);border-radius:11px;padding:8px 12px;
  background-color:#191920;
  background-image:radial-gradient(rgba(255,255,255,.03) .5px,transparent .6px),radial-gradient(circle at 42% 26%,#2a2a33 0%,#191920 52%,#0e0e13 100%);
  background-size:4px 4px,100% 100%;
  box-shadow:0 2px 0 #08080b,inset 0 2px 0 rgba(255,255,255,.08),inset 0 -6px 12px rgba(0,0,0,.5);
  font-family:'Jost',sans-serif;font-weight:600;font-size:12px;color:#F2A93E;transition:border-color .18s,transform .18s,box-shadow .18s;}
.spd-btn-label > *{position:relative;z-index:2;}
.spd-btn-label svg{color:#8A867E;transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.spd:hover .spd-btn-label,.spd:focus-within .spd-btn-label{border-color:rgba(232,228,220,.32);transform:translateY(-1px);}
.spd:hover .spd-btn-label svg,.spd:focus-within .spd-btn-label svg{transform:rotate(180deg);}
.spd-drawer{position:absolute;left:0;bottom:calc(100% + 10px);z-index:20;
  display:flex;flex-direction:column;gap:3px;padding:6px;border-radius:12px;border:1px solid var(--brd2);
  background:var(--surf);box-shadow:var(--shadow-sm);opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .18s cubic-bezier(.22,.61,.36,1),transform .18s cubic-bezier(.22,.61,.36,1);}
.spd:hover .spd-drawer,.spd:focus-within .spd-drawer{opacity:1;pointer-events:auto;transform:translateY(0);}
.spd-btn{font-family:'Jost',sans-serif;font-weight:500;font-size:12.5px;color:var(--tx3);padding:8px 22px;border-radius:7px;cursor:pointer;border:none;background:transparent;text-align:center;min-width:82px;transition:color .15s,background-color .15s;}
.spd-btn:hover{color:var(--tx);background:var(--ghost);}
.spd-btn.active{color:var(--ora);font-weight:600;background:var(--orass);}

/* transporte central — ±15s teclas de aço (acabamento vidro/carbono) */
.ctrl-center{display:flex;align-items:center;gap:12px;justify-self:center;}
.iround{position:relative;overflow:hidden;width:42px;height:42px;border-radius:12px;border:1px solid rgba(232,228,220,.12);cursor:pointer;padding:0;color:#A8A49B;
  background-color:#191920;
  background-image:radial-gradient(rgba(255,255,255,.03) .5px,transparent .6px),radial-gradient(circle at 42% 30%,#2c2c36 0%,#1a1a20 48%,#0e0e13 100%);
  background-size:4px 4px,100% 100%;
  box-shadow:0 4px 0 #08080b,inset 0 2px 0 rgba(255,255,255,.10),inset 0 -8px 14px rgba(0,0,0,.6),0 10px 20px -8px rgba(0,0,0,.7);
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  transition:transform .18s cubic-bezier(.22,.61,.36,1),border-color .18s,color .18s;}
.iround::before{content:"";position:absolute;inset:5px;border-radius:11px;border:1px solid rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);pointer-events:none;z-index:1;}
.iround::after{content:"";position:absolute;left:11%;right:11%;top:6%;height:32%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent);pointer-events:none;z-index:1;}
.iround svg,.iround .l{position:relative;z-index:2;}
.iround:hover{transform:translateY(-1px);border-color:rgba(232,228,220,.32);color:#F4F1EA;}
.iround:active{transform:translateY(2px);box-shadow:0 1px 0 #08080b,inset 0 2px 6px rgba(0,0,0,.6);}
.iround svg{width:17px;height:17px;}
.iround .l{font-family:'Jost',sans-serif;font-weight:700;font-size:7px;color:currentColor;}
.iround .ir-rew,.iround .ir-fwd{transition:transform .45s cubic-bezier(.22,.61,.36,1);transform-origin:center;transform-box:fill-box;}
.iround:hover .ir-rew{transform:rotate(-42deg);}
.iround:hover .ir-fwd{transform:rotate(42deg);}

/* PLAY OBATVOX — orb oficial (SVG), acende âmbar com halos ao tocar */
.opv{position:relative;width:66px;height:66px;border:none;background:transparent;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .22s cubic-bezier(.22,.61,.36,1);}
.opv__svg{position:relative;z-index:2;display:block;transition:filter .3s cubic-bezier(.22,.61,.36,1);filter:drop-shadow(0 6px 15px rgba(180,60,0,.4)) drop-shadow(0 2px 6px rgba(0,0,0,.8));}
.opv:hover{transform:translateY(-3px);}
.opv:hover .opv__svg{filter:drop-shadow(0 12px 24px rgba(224,96,8,.55)) drop-shadow(0 0 32px rgba(224,96,8,.22)) drop-shadow(0 4px 10px rgba(0,0,0,.9));}
.opv:active{transform:translateY(1px) scale(.98);}
.opv .gp-pause{display:none;}
.opv.is-playing .gp-play{display:none;}
.opv.is-playing .gp-pause{display:block;}
.opv__halo{position:absolute;inset:6px;border-radius:50%;border:2px solid rgba(255,144,32,.55);opacity:0;pointer-events:none;z-index:1;}
.opv--halo.is-playing .opv__halo{animation:opvhalo 3.4s ease-out infinite;}
.opv--halo.is-playing .opv__halo2{animation-delay:1.7s;}
@keyframes opvhalo{0%{transform:scale(.86);opacity:.7;}100%{transform:scale(1.42);opacity:0;}}

/* volume — botão de aço + trilho com preenchimento âmbar */
.ctrl-right{display:flex;align-items:center;gap:10px;justify-self:end;}
/* volume — carcaça de aço única: botão de mudo + trilho num só corpo */
.vol-grp{position:relative;overflow:hidden;display:flex;align-items:center;gap:11px;height:38px;padding:0 15px 0 5px;border-radius:12px;border:1px solid rgba(232,228,220,.12);
  background-color:#191920;
  background-image:radial-gradient(rgba(255,255,255,.03) .5px,transparent .6px),radial-gradient(circle at 42% 30%,#2a2a33 0%,#191920 48%,#0e0e13 100%);
  background-size:4px 4px,100% 100%;
  box-shadow:0 3px 0 #08080b,inset 0 2px 0 rgba(255,255,255,.08),inset 0 -6px 12px rgba(0,0,0,.55),0 8px 16px -8px rgba(0,0,0,.7);
  transition:border-color .18s cubic-bezier(.22,.61,.36,1);}
.vol-grp::after{content:"";position:absolute;left:6%;right:6%;top:6%;height:26%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent);pointer-events:none;z-index:1;}
.vol-grp:hover{border-color:rgba(232,228,220,.32);}
.vbtn{position:relative;z-index:2;width:30px;height:34px;border:none;background:transparent;cursor:pointer;padding:0;color:#A8A49B;flex:none;
  display:inline-flex;align-items:center;justify-content:center;transition:color .18s;}
.vbtn svg{width:15px;height:15px;}
.vbtn:hover{color:#F4F1EA;}
.vbtn.is-muted{color:#6E6B64;}
.vol-track{position:relative;z-index:2;width:82px;height:5px;border-radius:4px;background:rgba(0,0,0,.5);box-shadow:inset 0 1px 2px rgba(0,0,0,.6);cursor:pointer;}
.vol-fill{position:absolute;left:0;top:0;bottom:0;width:72%;border-radius:4px;background:linear-gradient(90deg,var(--ora2),var(--ora));box-shadow:0 0 8px var(--orag);}
.vol-knob{position:absolute;top:50%;left:72%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 40% 32%,var(--goldb),var(--gold) 70%);box-shadow:0 2px 5px rgba(0,0,0,.4);transition:transform .12s;}
.vol-track:hover .vol-knob{transform:translate(-50%,-50%) scale(1.15);}
@media(max-width:560px){.ctrl-row{grid-template-columns:1fr;justify-items:center;gap:16px;}.spd,.ctrl-center,.ctrl-right{justify-self:center;}}
/* botão Offline realojado na barra de topo do player (fundo sempre escuro) */
.logo-bar .btn-dl{margin-left:auto;color:rgba(245,244,242,.62);border-color:rgba(245,244,242,.16);background:rgba(245,244,242,.05);}
.logo-bar .btn-dl:hover{color:var(--goldb);border-color:var(--goldd);background:var(--goldg2);}
.btn-dl{display:flex;align-items:center;gap:7px;background:var(--surf2);border:1px solid var(--brd);border-radius:10px;
  padding:9px 14px;color:var(--tx3);font-family:'Jost',sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;transition:all .2s;white-space:nowrap;}
.btn-dl svg{width:15px;height:15px;}
.btn-dl:hover{border-color:var(--goldd);color:var(--goldb);background:var(--goldg2);}
.btn-dl.loading{border-color:var(--ora);color:var(--ora);animation:blink 1s ease-in-out infinite;}
.btn-dl.done{border-color:var(--grn);color:var(--grnt);background:var(--grnb);}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.5;}}

/* now playing footer of player */
.np-bar{display:flex;align-items:center;gap:12px;padding:18px 30px;background:var(--grnb);border-top:1px solid var(--grnbrd);}
.np-bar .ic{width:34px;height:34px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--grnb);border:1px solid var(--grnbrd);color:var(--grn);}
.np-bar .ic svg{width:17px;height:17px;}
.np-bar .tx{flex:1;}
.np-bar .tx strong{display:block;font-size:12.5px;font-weight:600;color:var(--grnt);margin-bottom:2px;}
.np-bar .tx span{font-size:11.5px;color:var(--tx3);}
.np-prog{width:96px;}
.np-prog .track{height:5px;background:var(--brd2);border-radius:3px;margin-bottom:4px;overflow:hidden;}
.np-prog .fill{height:100%;background:var(--grn);border-radius:3px;width:34%;}
.np-prog .pl{font-size:10px;color:var(--tx3);text-align:right;}

/* sections panel */
.sec-card{overflow:hidden;}
.sec-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 16px;}
.sec-head .sl{font-family:'Jost',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);}
.sec-head .sc{font-size:11px;color:var(--tx3);}
.sec-list{padding:0 14px 8px;display:flex;flex-direction:column;gap:3px;}
.sec-item{display:grid;grid-template-columns:30px 1fr auto;align-items:start;gap:13px;padding:13px;border-radius:12px;
  cursor:pointer;border:1px solid transparent;transition:background-color .15s,border-color .15s;}
.sec-item:hover{background:var(--ghost);border-color:var(--brd);}
.sec-item.active{background:var(--orass);border-color:var(--orar);}
.sec-num{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:'Jost',sans-serif;font-weight:700;font-size:12px;color:var(--tx3);background:var(--surf2);transition:all .2s;}
.sec-item.done .sec-num{background:var(--grnb);color:var(--grn);}
.sec-item.done .sec-num svg{width:15px;height:15px;}
.sec-item.active .sec-num{background:linear-gradient(135deg,var(--ora2),var(--ora));color:#fff;box-shadow:0 2px 8px var(--orag);}
.sec-body{min-width:0;}
.sec-name{font-size:13.5px;font-weight:500;color:var(--tx);margin-bottom:4px;line-height:1.3;}
.sec-item.active .sec-name{color:var(--ora);font-weight:600;}
.sec-hint{font-size:11.5px;color:var(--tx3);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sec-time{font-family:'Jost',sans-serif;font-weight:600;font-size:11px;color:var(--tx3);padding-top:6px;letter-spacing:.04em;display:flex;align-items:center;gap:6px;}
.sec-item.active .sec-time{color:var(--ora);}
.np-dots{display:flex;gap:2px;align-items:center;height:13px;}
.np-dots i{width:3px;border-radius:2px;background:var(--ora);animation:bounce .85s ease-in-out infinite;}
.np-dots i:nth-child(1){height:6px;animation-delay:0s;}
.np-dots i:nth-child(2){height:12px;animation-delay:.15s;}
.np-dots i:nth-child(3){height:8px;animation-delay:.3s;}
@keyframes bounce{0%,100%{transform:scaleY(.55);}50%{transform:scaleY(1);}}

/* ============ DRAWER / MOBILE ============ */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);opacity:0;pointer-events:none;z-index:55;transition:opacity .3s;}
.overlay.show{opacity:1;pointer-events:auto;}

@media(max-width:1080px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .mods{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:940px){
  .bv-grid{grid-template-columns:1fr;}
  .bv-grid .sec-card{max-width:560px;}
}
@media(max-width:760px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;transform:translateX(-100%);box-shadow:var(--shadow);}
  .app.drawer-open .sidebar{transform:translateX(0);}
  .app.collapsed{--sbw:1fr;}
  .app.collapsed .sb-brand-tx,.app.collapsed .nav-item .lbl,.app.collapsed .nav-item .badge,
  .app.collapsed .group-label,.app.collapsed .user-meta{
    opacity:1;pointer-events:auto;max-width:none;overflow:visible;flex-shrink:0;padding:revert;margin:revert;
  }
  .app.collapsed .nav-item,.app.collapsed .sb-brand{gap:13px;justify-content:flex-start;padding-left:14px;padding-right:14px;}
  .app.collapsed .nav-item{padding-top:13px;padding-bottom:13px;}
  .app.collapsed .sb-nav{padding-left:14px;padding-right:14px;}
  .app.collapsed .nav-item .ic{margin:0;}
  .app.collapsed .user-chip{justify-content:flex-start;padding-left:12px;padding-right:12px;gap:12px;}
  .app.collapsed .avatar{margin:0;}
  .app.collapsed .sb-brand{padding:22px 22px 20px;}
  .home-wrap,.bv-wrap{padding-left:22px;padding-right:22px;}
  .greet h1{font-size:30px;}
  .stats{grid-template-columns:repeat(2,1fr);gap:12px;}
  .mods{grid-template-columns:1fr;}
  .continue{grid-template-columns:1fr;text-align:center;gap:18px;justify-items:center;}
  .cont-prog{margin:0 auto;}
  .bv-hero{grid-template-columns:1fr;}
  .hero-disco{padding:30px 30px 4px;}
  .hero-info{padding:18px 30px 30px;}
  .ctrl-row{justify-content:center;}
  .speed-grp{order:3;width:100%;justify-content:center;}
}
@media(prefers-reduced-motion:reduce){
  .vinyl-spin,.vinyl-glow,.play-btn::before,.np-dots i,.disco-glow{animation:none!important;}
  .view.enter{animation:none!important;}
}

/* ================================================================
   PAINEL DO ALUNO — Premium Redesign
   Carbon fiber · Gold shimmer border · Deep levitation
   ================================================================ */

/* === Wrapper + animated gold border === */
.bat-panel-wrap {
  position: relative;
  margin-bottom: 40px;
  border-radius: 12px;
  box-shadow: 0 2px 0 rgba(255,255,255,.035);
}
.bat-panel-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  background: linear-gradient(158deg, #3b3844 0%, #16151d 30%, #09080f 62%, #2a2833 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -2px 3px rgba(0,0,0,.92),
    inset 2px 0 3px rgba(0,0,0,.5),
    inset -2px 0 3px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.04),
    0 18px 40px -20px rgba(0,0,0,.9);
  z-index: 0;
}
/* fio de luz interno — quina do vidro (recesso de janela) */
.bat-panel-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 11px;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 2px 1px rgba(255,255,255,.07),
    inset 0 -10px 22px -8px rgba(0,0,0,.7);
}
@keyframes bat-border-shimmer {
  0%  { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* === Main card === */
.bat-card {
  position: relative;
  z-index: 1;
  border-radius: 26px;
  padding: 38px 44px 36px;
  background-image:
    linear-gradient(122deg,
      rgba(255,255,255,0.035) 0%, transparent 22%,
      transparent 78%, rgba(255,255,255,0.02) 100%),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px,
      transparent 1px, transparent 6px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px,
      transparent 1px, transparent 6px),
    repeating-linear-gradient(45deg,
      rgba(0,0,0,0.24) 0px, rgba(0,0,0,0.24) 1px,
      transparent 1px, transparent 6px);
  background-color: #111111;
  background-size: 100% 100%, 6px 6px, 6px 6px, 6px 6px;
  box-shadow:
    0 4px 8px  rgba(0,0,0,0.65),
    0 14px 32px rgba(0,0,0,0.72),
    0 36px 72px rgba(0,0,0,0.62),
    0 70px 130px rgba(0,0,0,0.45),
    0 0 96px   rgba(201,168,76,0.10),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}
[data-theme="light"] .bat-card {
  box-shadow:
    0 2px 5px  rgba(80,50,10,0.08),
    0 6px 16px rgba(80,50,10,0.10),
    0 16px 32px rgba(80,50,10,0.07),
    0 0 24px   rgba(201,168,76,0.05);
}
/* Corner glow — destaca os quatro cantos + brilho */
.bat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(52% 46% at 0% 0%,   rgba(255,255,255,0.06),  transparent 72%),
    radial-gradient(52% 46% at 100% 0%, rgba(255,188,116,0.075), transparent 72%),
    radial-gradient(46% 42% at 0% 100%, rgba(255,255,255,0.032), transparent 72%),
    radial-gradient(46% 42% at 100% 100%, rgba(255,188,116,0.05), transparent 72%);
}
[data-theme="light"] .bat-card::after {
  background:
    radial-gradient(52% 46% at 0% 0%,   rgba(255,255,255,0.5),   transparent 72%),
    radial-gradient(52% 46% at 100% 0%, rgba(201,120,40,0.06),   transparent 72%),
    radial-gradient(46% 42% at 100% 100%, rgba(201,120,40,0.04), transparent 72%);
}

/* === Panel header === */
.bat-panel-header { margin-bottom: 30px; }

.bat-panel-label {
  font-family: 'Jost', sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: #C9A84C;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.bat-panel-label::before {
  content: '';
  width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, #C9A84C);
}

.bat-panel-greeting {
  font-family: 'Jost', sans-serif;
  font-size: 20px; font-weight: 400;
  color: rgba(255,255,255,0.55);
  line-height: 1.1; margin-bottom: 2px;
}
.bat-panel-name {
  font-family: 'Jost', sans-serif;
  font-size: 44px; font-weight: 800;
  line-height: 1; letter-spacing: -0.02em;
  background: linear-gradient(130deg, #F5D78E 0%, #C9A84C 45%, #E8C86A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.bat-panel-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 13px; color: rgba(255,255,255,0.38);
  margin-bottom: 22px; line-height: 1.5;
}

.bat-panel-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.bat-btn-primary {
  font-family: 'Jost', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  color: #0B0B0C;
  background: linear-gradient(135deg, #F5D78E 0%, #C9A84C 55%, #E0B84A 100%);
  border: none; border-radius: 11px;
  padding: 12px 22px; cursor: pointer;
  box-shadow: 0 4px 18px rgba(201,168,76,0.42), inset 0 1px 0 rgba(255,255,255,0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.bat-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(201,168,76,0.6), inset 0 1px 0 rgba(255,255,255,0.28);
}
.bat-btn-secondary {
  font-family: 'Jost', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  color: #C9A84C;
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: 11px; padding: 12px 22px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.bat-btn-secondary:hover {
  background: rgba(201,168,76,0.13);
  border-color: rgba(201,168,76,0.55);
  transform: translateY(-1px);
}

/* === Metrics grid === */
.bat-metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .bat-metrics-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  {
  .bat-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .bat-card { padding: 24px 20px; }
}

/* === Single metric card === */
.bat-metric {
  background: rgba(24,24,24,0.95);
  border: 1px solid #2A2A2A;
  border-radius: 16px;
  padding: 17px 16px 15px;
  display: flex; flex-direction: column; gap: 5px;
  position: relative; overflow: hidden;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
}
.bat-metric::before {
  content: '';
  position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.bat-metric:hover {
  border-color: rgba(201,168,76,0.38);
  box-shadow: 0 0 28px rgba(201,168,76,0.13), 0 8px 20px rgba(0,0,0,0.5);
  transform: translateY(-2px);
}

/* metric icon */
.bat-metric-icon {
  display: flex; align-items: center;
  margin-bottom: 4px; opacity: 0.9;
}

/* metric value typography */
.bat-val-main {
  font-family: 'Jost', sans-serif;
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.01em; color: #F5D78E; line-height: 1;
}
.bat-val-unit, .bat-val-sub {
  font-family: 'Jost', sans-serif;
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.32); letter-spacing: 0.03em;
  align-self: flex-end; padding-bottom: 3px;
}
.bat-val-total {
  font-family: 'Jost', sans-serif;
  font-size: 11.5px; font-weight: 600;
  color: rgba(201,168,76,0.65); letter-spacing: 0.02em;
}
.bat-metric-value   { display: flex; align-items: baseline; gap: 5px; }
.bat-metric-value-2 { display: flex; align-items: center; }
.bat-metric-label {
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px; color: rgba(255,255,255,0.30);
  line-height: 1.35; margin-top: 4px;
}

/* Heatmap */
.bat-heatmap { display: flex; gap: 4px; align-items: center; margin: 3px 0; }
.bat-dot {
  width: 21px; height: 21px; border-radius: 50%;
  background: #222; border: 1px solid #333; flex-shrink: 0;
  transition: all 0.2s;
}
.bat-dot--on {
  background: radial-gradient(circle at 38% 38%, #F5D78E, #C9A84C);
  border-color: rgba(201,168,76,0.45);
  box-shadow: 0 0 8px rgba(201,168,76,0.35);
}

/* Progress bar */
.bat-progbar-track {
  height: 4px; background: #2A2A2A;
  border-radius: 3px; overflow: hidden; margin: 5px 0;
}
.bat-progbar-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #C9A84C, #F5D78E);
  box-shadow: 0 0 8px rgba(201,168,76,0.45);
  transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
}

/* Acerto badge */
.bat-acerto-badge {
  display: inline-flex; align-items: center;
  font-family: 'Jost', sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  color: #C9A84C;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.22);
  border-radius: 20px; padding: 3px 9px;
  width: fit-content; margin: 2px 0;
}

/* === Foguete === */
#app { transition: opacity 0.3s ease; }
.screen-fading { opacity: 0 !important; }

.bat-rocket {
  position: fixed;
  bottom: 36px; right: 44px;
  width: 144px; height: 180px;
  z-index: 999;
  pointer-events: none;
  will-change: transform;
  animation: bat-float 3s ease-in-out infinite;
  display: none;
  isolation: isolate;
}
body.view-inicio.mission-armed .bat-rocket { display: block; }
body.rocket-active .bat-rocket { display: block; }
.bat-rocket-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
  z-index: 10; /* bem acima do wrapper (z-index: 0) — gap grande evita ambiguidade do compositor GPU */
  transform: translateZ(0); /* force own compositor layer, acima das chamas */
  filter: drop-shadow(0 0 26px rgba(232,101,10,0.68))
          drop-shadow(0 4px 18px rgba(0,0,0,0.65));
}
[data-theme="light"] .bat-rocket-img {
  filter: drop-shadow(0 0 14px rgba(232,101,10,0.32))
          drop-shadow(0 2px 6px rgba(80,50,10,0.14));
}

/* Flame — shared base */
.bat-flame-outer, .bat-flame-mid, .bat-flame-core {
  position: absolute;
  left: 50%;
  border-radius: 50% 50% 35% 35%;
  pointer-events: none;
  transform-origin: top center;
  z-index: 0;
}

/* Wrapper que agrupa todos os glows/chamas — z-index: 0, abaixo do foguete */
.bat-flames-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

/* ===== CHAMA DETALHADA (portada do 1a) ===== */
.bat-flame{position:absolute;left:50%;top:132px;transform:translateX(-50%);width:130px;height:150px;z-index:0;pointer-events:none}
.bat-fl-glow{position:absolute;left:50%;top:-24px;transform:translateX(-50%);width:130px;height:150px;border-radius:50%;
  background:radial-gradient(46% 42% at 50% 30%,rgba(255,160,50,.6),rgba(255,90,10,.24) 46%,transparent 72%);
  filter:blur(5px);animation:bfGlow .22s ease-in-out infinite alternate}
.bat-plume{position:absolute;top:0;width:26px;height:150px;transform-origin:50% 0;transition:transform .18s ease}
.bat-plume.l{left:calc(50% - 20px)}
.bat-plume.r{left:calc(50% - 6px)}
.bat-fl-o,.bat-fl-m,.bat-fl-c{position:absolute;left:50%;top:0;transform:translateX(-50%);border-radius:46% 46% 46% 46% / 8% 8% 94% 94%;transform-origin:50% 0}
.bat-fl-o{width:26px;height:142px;
  background:repeating-linear-gradient(94deg,rgba(255,240,200,.13) 0 1px,transparent 1px 6px),linear-gradient(to bottom,#FFC24A 0%,#FF8A1E 34%,#FF5405 66%,rgba(255,64,0,0) 100%);
  background-size:100% 22px,100% 100%;filter:blur(1.4px);opacity:.82;animation:bfO .19s ease-in-out infinite alternate,bfFlow .6s linear infinite}
.bat-fl-m{width:15px;height:104px;
  background:repeating-linear-gradient(86deg,rgba(255,250,220,.16) 0 1px,transparent 1px 5px),linear-gradient(to bottom,#FFF1C2 0%,#FFD24A 40%,#FF8A1E 82%,rgba(255,120,0,0) 100%);
  background-size:100% 18px,100% 100%;filter:blur(.6px);opacity:.94;animation:bfM .15s ease-in-out infinite alternate,bfFlow .45s linear infinite}
.bat-fl-c{width:7px;height:64px;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.9) 0 1.5px,rgba(255,255,255,0) 1.5px 9px),linear-gradient(to bottom,#CFE3FF 0%,#FFFFFF 16%,#FFF3D0 52%,#FFD98A 100%);
  background-size:100% 9px,100% 100%;filter:blur(.3px);animation:bfC .12s ease-in-out infinite alternate,bfDiamond .4s linear infinite}
.bat-lick{position:absolute;top:6px;width:9px;height:70px;border-radius:50% 50% 50% 50%/6% 6% 96% 96%;filter:blur(1.6px);opacity:.5;
  background:linear-gradient(to bottom,#FFB03A,#FF6A12 55%,rgba(255,80,0,0) 100%);transform-origin:50% 0}
.bat-lick.a{left:calc(50% - 26px);animation:blickA .26s ease-in-out infinite alternate}
.bat-lick.b{left:calc(50% + 17px);animation:blickB .3s ease-in-out infinite alternate}
.bat-spark{position:absolute;left:50%;top:70px;width:3px;height:3px;border-radius:50%;background:#FFD98A;box-shadow:0 0 5px rgba(255,160,60,.9);opacity:0}
.bat-spark.s1{animation:bsp1 1.05s linear infinite}
.bat-spark.s2{animation:bsp2 .82s .2s linear infinite}
.bat-spark.s3{animation:bsp3 1.28s .5s linear infinite}
.bat-spark.s4{animation:bsp1 .95s .7s linear infinite}
@keyframes bfGlow{0%{opacity:.5;transform:translateX(-50%) scale(.92)}100%{opacity:.85;transform:translateX(-50%) scale(1.08)}}
@keyframes bfO{0%{opacity:.62;transform:translateX(-50%) scaleY(.86) scaleX(1.04)}100%{opacity:.9;transform:translateX(-50%) scaleY(1.12) scaleX(.9)}}
@keyframes bfM{0%{opacity:.78;transform:translateX(-50%) scaleY(.82)}100%{opacity:1;transform:translateX(-50%) scaleY(1.16)}}
@keyframes bfC{0%{opacity:.8;transform:translateX(-50%) scaleY(.78)}100%{opacity:1;transform:translateX(-50%) scaleY(1.2)}}
@keyframes bfFlow{from{background-position:0 0,0 0}to{background-position:0 22px,0 0}}
@keyframes bfDiamond{from{background-position:0 0,0 0}to{background-position:0 9px,0 0}}
@keyframes blickA{0%{opacity:.3;transform:rotate(-8deg) scaleY(.8)}100%{opacity:.62;transform:rotate(-3deg) scaleY(1.15)}}
@keyframes blickB{0%{opacity:.28;transform:rotate(9deg) scaleY(.85)}100%{opacity:.58;transform:rotate(4deg) scaleY(1.1)}}
@keyframes bsp1{0%{opacity:0;transform:translate(-50%,0) scale(1)}12%{opacity:1}100%{opacity:0;transform:translate(calc(-50% - 16px),96px) scale(.2)}}
@keyframes bsp2{0%{opacity:0;transform:translate(-50%,0) scale(1)}12%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + 20px),110px) scale(.2)}}
@keyframes bsp3{0%{opacity:0;transform:translate(-50%,0) scale(1)}12%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + 4px),120px) scale(.15)}}
/* decolagem: plumas alongam, brilho cresce */
.bat-rocket.launching .bat-plume{transform:scaleY(2.05)!important}
.bat-rocket.launching .bat-fl-glow{opacity:1!important;transform:translateX(-50%) scale(1.55)!important}
.bat-rocket.launching .bat-lick{opacity:.75!important;transform:scaleY(1.7)!important}

/* Base glow halo around nozzle */
.bat-flame-glow {
  position: absolute;
  z-index: 0;
  left: 50%; bottom: -40px;
  width: 136px; height: 58px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 58%,
    rgba(232,101,10,0.58) 0%,
    rgba(232,168,74,0.24) 42%,
    transparent 72%);
  filter: blur(15px);
  border-radius: 50%;
  pointer-events: none;
  animation: bat-glow-pulse 1.6s ease-in-out infinite alternate;
}

/* Layer 1 — central golden flame (long, dominant) */
.bat-flame-outer {
  bottom: -36px;
  width: 92px; height: 132px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 8%,
    rgba(232,168,74,0.98) 0%,
    rgba(232,168,74,0.74) 28%,
    rgba(228,122,28,0.44) 56%,
    transparent 78%);
  filter: blur(9px);
  animation: bat-flame-a 0.55s ease-in-out infinite alternate;
}

/* Layer 2 — intermediate orange flame */
.bat-flame-mid {
  bottom: -23px;
  width: 54px; height: 110px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 5%,
    rgba(255,152,42,0.98) 0%,
    rgba(232,93,36,0.92) 26%,
    rgba(232,93,36,0.52) 54%,
    transparent 76%);
  filter: blur(4px);
  animation: bat-flame-b 0.40s ease-in-out 0.1s infinite alternate;
}

/* Layer 3 — white hot core (small, pulsing) */
.bat-flame-core {
  bottom: -13px;
  width: 22px; height: 58px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 5%,
    rgba(255,245,224,1.0) 0%,
    rgba(255,212,115,0.98) 28%,
    rgba(232,93,36,0.62) 60%,
    transparent 82%);
  filter: blur(1.5px);
  animation: bat-flame-c 0.30s ease-in-out infinite alternate;
}

/* Spark particles */
.bat-particle {
  position: absolute;
  left: 50%;
  bottom: -5px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}
.bat-particle.p1 { width:5px;height:5px;background:#E8A84A;margin-left:-13px;animation:bat-ptcl 1.0s 0.00s ease-out infinite; }
.bat-particle.p2 { width:4px;height:4px;background:#E85D24;margin-left:  6px;animation:bat-ptcl 1.2s 0.22s ease-out infinite; }
.bat-particle.p3 { width:3px;height:3px;background:#FFF5E0;margin-left: -2px;animation:bat-ptcl 0.8s 0.42s ease-out infinite; }
.bat-particle.p4 { width:5px;height:5px;background:#E8A84A;margin-left: 15px;animation:bat-ptcl 1.1s 0.14s ease-out infinite; }
.bat-particle.p5 { width:3px;height:3px;background:#E85D24;margin-left:-17px;animation:bat-ptcl 0.9s 0.36s ease-out infinite; }
.bat-particle.p6 { width:4px;height:4px;background:#FFF5E0;margin-left: 10px;animation:bat-ptcl 1.3s 0.58s ease-out infinite; }

@keyframes bat-float {
  0%   { transform: translateY(2px)  rotate(-1.2deg); }
  22%  { transform: translateY(-9px) rotate(0.8deg); }
  46%  { transform: translateY(-4px) rotate(1.6deg); }
  68%  { transform: translateY(-13px) rotate(-0.5deg); }
  88%  { transform: translateY(-2px) rotate(0.4deg); }
  100% { transform: translateY(2px)  rotate(-1.2deg); }
}
/* tremor de propulsão em alta velocidade — vibração rápida de ~1px */
@keyframes bat-thrust {
  0%   { transform: translate(0, 0)          rotate(0deg); }
  14%  { transform: translate(-0.9px, 0.6px) rotate(-0.4deg); }
  28%  { transform: translate(0.8px, -0.7px) rotate(0.45deg); }
  42%  { transform: translate(-0.6px, 0.9px) rotate(-0.3deg); }
  56%  { transform: translate(0.9px, -0.5px) rotate(0.4deg); }
  70%  { transform: translate(-0.8px, 0.5px) rotate(-0.45deg); }
  84%  { transform: translate(0.6px, 0.8px)  rotate(0.25deg); }
  100% { transform: translate(0, 0)          rotate(0deg); }
}
@keyframes bat-flame-a {
  0%   { opacity: 0.62; height: 120px; transform: translateX(-50%) scaleX(0.92); }
  100% { opacity: 0.96; height: 168px; transform: translateX(-50%) scaleX(1.08); }
}
@keyframes bat-flame-b {
  0%   { opacity: 0.75; height:  92px; transform: translateX(-50%) scaleX(0.88); }
  100% { opacity: 1.00; height: 134px; transform: translateX(-50%) scaleX(1.12); }
}
@keyframes bat-flame-c {
  0%   { opacity: 0.82; height: 47px; }
  100% { opacity: 1.00; height: 74px; }
}
@keyframes bat-glow-pulse {
  0%   { opacity: 0.50; transform: translateX(-50%) scaleX(0.84); }
  100% { opacity: 1.00; transform: translateX(-50%) scaleX(1.24); }
}
@keyframes bat-ptcl {
  0%   { opacity: 0.90; transform: translateY(0)    scale(1.0); }
  100% { opacity: 0.00; transform: translateY(54px) scale(0.2); }
}

/* === Launch / Land / Cooling animations === */

/* Temperatura do motor — elemento invisível com box-shadow animado */
.bat-engine-glow {
  position: absolute;
  left: 50%; bottom: -10px;
  width: 0; height: 0;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;  /* sempre atrás da imagem do foguete (z-index: 1) */
}

/* Garante que o foguete permaneça na frente durante TODA a animação de decolagem */
.bat-rocket.launching .bat-flames-wrap { z-index: 0 !important; }
.bat-rocket.launching .bat-rocket-img  { z-index: 10 !important; }
.bat-rocket.landing   .bat-flames-wrap { z-index: 0 !important; }
.bat-rocket.landing   .bat-rocket-img  { z-index: 10 !important; }

/* Departure: chamas 2× + foguete sobe */
.bat-rocket.launching {
  animation: bat-launch 0.95s forwards !important;
}
.bat-rocket.launching .bat-flame-outer {
  animation: bat-flame-a-launch 0.28s ease-in-out infinite alternate !important;
}
.bat-rocket.launching .bat-flame-mid {
  animation: bat-flame-b-launch 0.20s ease-in-out 0.05s infinite alternate !important;
}
.bat-rocket.launching .bat-flame-core {
  animation: bat-flame-c-launch 0.16s ease-in-out infinite alternate !important;
}
.bat-rocket.launching .bat-flame-glow {
  animation: bat-glow-launch 0.35s ease-in-out infinite alternate !important;
}
.bat-rocket.launching .bat-engine-glow {
  animation: bat-engine-heat 0.8s ease-out forwards !important;
}

/* Arrival: foguete desce suavemente */
.bat-rocket.landing {
  animation: bat-land 0.8s cubic-bezier(0.2, 0.8, 0.4, 1) forwards !important;
}

/* Motor desligando: chamas somem gradualmente */
.bat-rocket.cooling .bat-flame-outer,
.bat-rocket.cooling .bat-flame-mid,
.bat-rocket.cooling .bat-flame-core,
.bat-rocket.cooling .bat-flame-glow,
.bat-rocket.cooling .bat-particle {
  animation: bat-cool-fade 0.4s ease forwards !important;
}
.bat-rocket.cooling .bat-engine-glow {
  animation: bat-cool-fade 0.25s ease forwards !important;
}

@keyframes bat-launch {
  0%   { transform: translateY(0);      animation-timing-function: cubic-bezier(.34,.6,.5,1); }
  12%  { transform: translateY(9px);    animation-timing-function: cubic-bezier(.5,0,.9,.6); }  /* agacha / carrega empuxo */
  26%  { transform: translateY(-4px);   animation-timing-function: cubic-bezier(.45,0,.85,1); }
  100% { transform: translateY(-120vh); }
}
@keyframes bat-enter {
  0%   { transform: translateY(120px); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0);     opacity: 1; }
}
@keyframes bat-land {
  0%   { transform: translateY(-120vh); }
  100% { transform: translateY(0); }
}
@keyframes bat-engine-heat {
  0%   { box-shadow: 0 0  40px 20px rgba(201,147, 58,0.00); }
  15%  { box-shadow: 0 0  55px 28px rgba(201,147, 58,0.85); }
  55%  { box-shadow: 0 0  85px 44px rgba(232, 93, 36,0.90); }
  100% { box-shadow: 0 0 130px 65px rgba(255,245,224,0.95); }
}
@keyframes bat-cool-fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes bat-flame-a-launch {
  0%   { opacity: 0.90; height: 240px; transform: translateX(-50%) scaleX(1.32); }
  100% { opacity: 1.00; height: 336px; transform: translateX(-50%) scaleX(1.68); }
}
@keyframes bat-flame-b-launch {
  0%   { opacity: 0.90; height: 184px; transform: translateX(-50%) scaleX(1.22); }
  100% { opacity: 1.00; height: 268px; transform: translateX(-50%) scaleX(1.55); }
}
@keyframes bat-flame-c-launch {
  0%   { opacity: 0.92; height:  94px; }
  100% { opacity: 1.00; height: 148px; }
}
@keyframes bat-glow-launch {
  0%   { opacity: 0.90; transform: translateX(-50%) scaleX(1.60); }
  100% { opacity: 1.00; transform: translateX(-50%) scaleX(2.40); }
}

/* === Progress Drawer === */
.bat-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  z-index: 200;
  transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1);
}
.bat-drawer-overlay.show { opacity: 1; pointer-events: auto; }

.bat-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 92vw;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.014) 0px, rgba(255,255,255,0.014) 1px,
      transparent 1px, transparent 7px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,0.014) 0px, rgba(255,255,255,0.014) 1px,
      transparent 1px, transparent 7px);
  background-color: #0F0F0F;
  background-size: 7px 7px, 7px 7px;
  border-left: 1px solid rgba(201,168,76,0.22);
  box-shadow: -20px 0 60px rgba(0,0,0,0.7);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.bat-drawer.open { transform: translateX(0); }

.bat-drawer-header {
  padding: 28px 26px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-shrink: 0;
}
.bat-drawer-label {
  font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: #C9A84C; margin-bottom: 6px;
}
.bat-drawer-title {
  font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 700;
  color: #F5F4F2;
}
.bat-drawer-close {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.55); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s;
}
.bat-drawer-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

.bat-drawer-list {
  flex: 1; overflow-y: auto;
  padding: 14px 18px 28px;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,0.18) transparent;
}
.bat-drawer-list::-webkit-scrollbar { width: 3px; }
.bat-drawer-list::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.2); border-radius: 4px; }

.bat-drawer-item {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 13px; border-radius: 12px;
  border: 1px solid transparent;
  transition: all 0.17s; margin-bottom: 3px;
}
.bat-drawer-item.done {
  border-color: rgba(201,168,76,0.13);
  background: rgba(201,168,76,0.04);
}
.bat-drawer-item.current {
  border-color: rgba(201,168,76,0.42);
  background: rgba(201,168,76,0.09);
  box-shadow: 0 0 22px rgba(201,168,76,0.11);
}
.bat-drawer-item.locked { opacity: 0.4; }

.bat-drawer-num {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Jost', sans-serif; font-size: 11.5px; font-weight: 700;
}
.bat-drawer-item.done    .bat-drawer-num { background: rgba(201,168,76,0.14); color: #C9A84C; border: 1px solid rgba(201,168,76,0.28); }
.bat-drawer-item.current .bat-drawer-num { background: linear-gradient(135deg,#C9A84C,#F5D78E); color: #0B0B0C; box-shadow: 0 2px 10px rgba(201,168,76,0.36); }
.bat-drawer-item.locked  .bat-drawer-num { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.07); }

.bat-drawer-body { flex: 1; min-width: 0; }
.bat-drawer-item-title {
  font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.82); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.bat-drawer-item.current .bat-drawer-item-title { color: #F5D78E; font-weight: 600; }
.bat-drawer-item-mod {
  font-family: 'Jost', sans-serif; font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.22);
}
.bat-drawer-item.done    .bat-drawer-item-mod { color: rgba(201,168,76,0.48); }
.bat-drawer-item.current .bat-drawer-item-mod { color: rgba(201,168,76,0.7); }

.bat-drawer-status { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 18px; }
.bat-status-done    { color: #C9A84C; }
.bat-status-current { color: #F5D78E; }
.bat-status-locked  { color: rgba(255,255,255,0.12); }

@media (prefers-reduced-motion: no-preference) {
  .bat-panel-wrap::before { animation: bat-border-shimmer 7s ease infinite; }
  .bat-rocket      { animation: bat-enter .62s cubic-bezier(.2,.75,.3,1) both, bat-float 5.4s ease-in-out .62s infinite; }
  /* repouso: deriva solta, orgânica — sem tremor travado; entra subindo ao armar a missão */
  .bat-flame-outer { animation: bat-flame-a 0.55s ease-in-out infinite alternate; }
  .bat-flame-mid   { animation: bat-flame-b 0.40s ease-in-out 0.1s infinite alternate; }
  .bat-flame-core  { animation: bat-flame-c 0.30s ease-in-out infinite alternate; }
  .bat-flame-glow  { animation: bat-glow-pulse 1.6s ease-in-out infinite alternate; }
  .bat-particle.p1 { animation: bat-ptcl 1.0s 0.00s ease-out infinite; }
  .bat-particle.p2 { animation: bat-ptcl 1.2s 0.22s ease-out infinite; }
  .bat-particle.p3 { animation: bat-ptcl 0.8s 0.42s ease-out infinite; }
  .bat-particle.p4 { animation: bat-ptcl 1.1s 0.14s ease-out infinite; }
  .bat-particle.p5 { animation: bat-ptcl 0.9s 0.36s ease-out infinite; }
  .bat-particle.p6 { animation: bat-ptcl 1.3s 0.58s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .bat-panel-wrap::before { animation: none !important; }
  .bat-rocket       { animation: none !important; }
  .bat-rocket-img,
  .bat-flames-wrap  { animation: none !important; }
  .bat-flame-outer,
  .bat-flame-mid,
  .bat-flame-core,
  .bat-flame-glow   { animation: none !important; }
  .bat-particle     { display: none; }
  .bat-fl-o,.bat-fl-m,.bat-fl-c,.bat-fl-glow,.bat-lick,.bat-spark { animation: none !important; }
}