:root {
--md-sys-shape-corner-none: 0px;
--md-sys-shape-corner-extra-small: 4px;
--md-sys-shape-corner-small: 8px;
--md-sys-shape-corner-medium: 12px;
--md-sys-shape-corner-large: 16px;
--md-sys-shape-corner-large-increased: 20px;
--md-sys-shape-corner-extra-large: 28px;
--md-sys-shape-corner-extra-large-increased: 32px;
--md-sys-shape-corner-extra-extra-large: 48px;
--md-sys-shape-corner-full: 9999px;

--md-ref-typeface-brand: 'Roboto Flex', 'Roboto', sans-serif;
--md-ref-typeface-plain: 'Roboto', sans-serif;

--md-sys-typescale-display-large-size: 3.5625rem;
--md-sys-typescale-display-large-line-height: 4rem;
--md-sys-typescale-display-large-weight: 400;

--md-sys-typescale-headline-large-size: 2rem;
--md-sys-typescale-headline-large-line-height: 2.5rem;
--md-sys-typescale-headline-large-weight: 400;

--md-sys-typescale-headline-medium-size: 1.75rem;
--md-sys-typescale-headline-medium-line-height: 2.25rem;
--md-sys-typescale-headline-medium-weight: 400;

--md-sys-typescale-headline-small-size: 1.4375rem;
--md-sys-typescale-headline-small-line-height: 2rem;
--md-sys-typescale-headline-small-weight: 400;

--md-sys-typescale-title-large-size: 1.375rem;
--md-sys-typescale-title-large-line-height: 1.75rem;
--md-sys-typescale-title-large-weight: 400;

--md-sys-typescale-title-medium-size: 1rem;
--md-sys-typescale-title-medium-line-height: 1.5rem;
--md-sys-typescale-title-medium-weight: 500;
--md-sys-typescale-title-medium-tracking: 0.009375rem;

--md-sys-typescale-title-small-size: 0.875rem;
--md-sys-typescale-title-small-line-height: 1.25rem;
--md-sys-typescale-title-small-weight: 500;
--md-sys-typescale-title-small-tracking: 0.00625rem;

--md-sys-typescale-body-large-size: 1rem;
--md-sys-typescale-body-large-line-height: 1.5rem;
--md-sys-typescale-body-large-weight: 400;
--md-sys-typescale-body-large-tracking: 0.03125rem;

--md-sys-typescale-body-medium-size: 0.875rem;
--md-sys-typescale-body-medium-line-height: 1.25rem;
--md-sys-typescale-body-medium-weight: 400;
--md-sys-typescale-body-medium-tracking: 0.015625rem;

--md-sys-typescale-body-small-size: 0.75rem;
--md-sys-typescale-body-small-line-height: 1rem;
--md-sys-typescale-body-small-weight: 400;

--md-sys-typescale-label-large-size: 0.875rem;
--md-sys-typescale-label-large-line-height: 1.25rem;
--md-sys-typescale-label-large-weight: 500;
--md-sys-typescale-label-large-tracking: 0.00625rem;

--md-sys-typescale-label-medium-size: 0.75rem;
--md-sys-typescale-label-medium-line-height: 1rem;
--md-sys-typescale-label-medium-weight: 500;

--md-sys-typescale-label-small-size: 0.6875rem;
--md-sys-typescale-label-small-line-height: 1rem;
--md-sys-typescale-label-small-weight: 500;

--md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
--md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
--md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);

--md-sys-motion-duration-short2: 100ms;
--md-sys-motion-duration-short3: 150ms;
--md-sys-motion-duration-short4: 200ms;
--md-sys-motion-duration-medium1: 250ms;
--md-sys-motion-duration-medium2: 300ms;
--md-sys-motion-duration-long1: 450ms;
--md-sys-motion-duration-long2: 500ms;

--md-sys-elevation-0: none;
--md-sys-elevation-1: 0px 1px 2px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
--md-sys-elevation-2: 0px 1px 2px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15);
--md-sys-elevation-3: 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px rgba(0,0,0,0.3);

--md-spacing-4: 4px;
--md-spacing-8: 8px;
--md-spacing-12: 12px;
--md-spacing-16: 16px;
--md-spacing-20: 20px;
--md-spacing-24: 24px;
--md-spacing-32: 32px;
}

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}

html {
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: var(--md-sys-color-outline-variant) transparent;
}

html::-webkit-scrollbar {
width: 8px;
}

html::-webkit-scrollbar-thumb {
background: var(--md-sys-color-outline-variant);
border-radius: var(--md-sys-shape-corner-full);
}

body {
font-family: var(--md-ref-typeface-plain);
background-color: var(--md-sys-color-surface);
color: var(--md-sys-color-on-surface);
line-height: 1.5;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.barra-superior {
position: sticky;
top: 0;
z-index: 100;
background: var(--md-sys-color-surface);
border-bottom: 1px solid var(--md-sys-color-outline-variant);
transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
box-shadow var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.barra-superior-conteudo {
max-width: 1200px;
margin: 0 auto;
padding: var(--md-spacing-16);
display: flex;
align-items: center;
gap: var(--md-spacing-16);
}

.logo-barra {
width: 48px;
height: 48px;
border-radius: var(--md-sys-shape-corner-full);
object-fit: cover;
box-shadow: var(--md-sys-elevation-1);
flex-shrink: 0;
}

.barra-superior-titulos {
flex: 1;
min-width: 0;
}

.barra-superior-titulos h1 {
font-family: var(--md-ref-typeface-brand);
font-size: var(--md-sys-typescale-headline-small-size);
font-weight: var(--md-sys-typescale-headline-small-weight);
line-height: var(--md-sys-typescale-headline-small-line-height);
color: var(--md-sys-color-on-surface);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.barra-superior-titulos p {
font-family: var(--md-ref-typeface-plain);
font-size: var(--md-sys-typescale-body-medium-size);
color: var(--md-sys-color-on-surface-variant);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.botao-icone {
width: 48px;
height: 48px;
border: none;
background: transparent;
color: var(--md-sys-color-on-surface);
cursor: pointer;
border-radius: var(--md-sys-shape-corner-full);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
flex-shrink: 0;
}

.botao-icone::before {
content: "";
position: absolute;
inset: 0;
background: var(--md-sys-color-on-surface);
opacity: 0;
transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
border-radius: inherit;
}

.botao-icone:hover::before {
opacity: 0.08;
}

.botao-icone:focus-visible {
outline: 2px solid var(--md-sys-color-primary);
outline-offset: 2px;
}

.botao-icone:focus-visible::before {
opacity: 0.12;
}

.botao-icone:active::before {
opacity: 0.12;
}

.botao-icone .material-symbols-outlined {
position: relative;
z-index: 1;
}

.conteudo-principal {
flex: 1 0 auto;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: var(--md-spacing-24) var(--md-spacing-16);
padding-bottom: 120px;
display: flex;
flex-direction: column;
gap: var(--md-spacing-32);
}

.secao-apps {
display: flex;
flex-direction: column;
gap: var(--md-spacing-20);
}

.cabecalho-secao {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--md-spacing-16);
padding: 0 var(--md-spacing-4);
}

.titulo-secao {
font-family: var(--md-ref-typeface-brand);
font-size: var(--md-sys-typescale-headline-small-size);
font-weight: var(--md-sys-typescale-headline-small-weight);
line-height: var(--md-sys-typescale-headline-small-line-height);
color: var(--md-sys-color-on-surface);
margin: 0;
}

.contador-apps {
font-family: var(--md-ref-typeface-plain);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
color: var(--md-sys-color-on-surface-variant);
padding: var(--md-spacing-8) var(--md-spacing-16);
background: var(--md-sys-color-surface-container-high);
border-radius: var(--md-sys-shape-corner-full);
white-space: nowrap;
}

.grid-apps {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--md-spacing-16);
}

.cartao-app {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--md-spacing-8);
padding: var(--md-spacing-20) var(--md-spacing-12);
background: var(--md-sys-color-surface-container-low);
border-radius: var(--md-sys-shape-corner-large);
cursor: pointer;
overflow: hidden;
transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
isolation: isolate;
}

.cartao-app::before {
content: "";
position: absolute;
inset: 0;
background: var(--md-sys-color-primary);
opacity: 0;
transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
border-radius: inherit;
z-index: -1;
}

.cartao-app:hover {
background: var(--md-sys-color-surface-container);
box-shadow: var(--md-sys-elevation-1);
transform: translateY(-2px);
}

.cartao-app:hover::before {
opacity: 0.08;
}

.cartao-app:focus-visible {
outline: 2px solid var(--md-sys-color-primary);
outline-offset: 2px;
}

.cartao-app:active::before {
opacity: 0.12;
}

.icone-app {
width: 72px;
height: 72px;
border-radius: var(--md-sys-shape-corner-large);
object-fit: cover;
box-shadow: var(--md-sys-elevation-1);
background: var(--md-sys-color-surface-container-highest);
}

.nome-app {
font-family: var(--md-ref-typeface-plain);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
color: var(--md-sys-color-on-surface);
text-align: center;
max-width: 100%;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.2;
min-height: 2.4em;
word-break: break-word;
}

.plataforma-app {
font-family: var(--md-ref-typeface-plain);
font-size: var(--md-sys-typescale-label-small-size);
font-weight: var(--md-sys-typescale-label-small-weight);
color: var(--md-sys-color-on-surface-variant);
}

.fab-telegram {
position: fixed;
bottom: calc(var(--md-spacing-24) + env(safe-area-inset-bottom, 0px));
right: var(--md-spacing-24);
z-index: 200;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--md-spacing-12);
padding: 0 var(--md-spacing-20);
height: 56px;
min-width: 56px;
background: var(--md-sys-color-primary);
color: var(--md-sys-color-on-primary);
border-radius: var(--md-sys-shape-corner-large);
box-shadow: var(--md-sys-elevation-3);
font-family: var(--md-ref-typeface-plain);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
overflow: hidden;
position: fixed;
}

.fab-telegram::before {
content: "";
position: absolute;
inset: 0;
background: var(--md-sys-color-on-primary);
opacity: 0;
transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.fab-telegram:hover {
transform: scale(1.05);
box-shadow: var(--md-sys-elevation-3);
}

.fab-telegram:hover::before {
opacity: 0.08;
}

.fab-telegram:active {
transform: scale(0.96);
}

.fab-telegram:focus-visible {
outline: 2px solid var(--md-sys-color-primary);
outline-offset: 4px;
}

.fab-telegram .material-symbols-outlined,
.fab-telegram .fab-texto {
position: relative;
z-index: 1;
}

.fab-icone {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

dialog.modal-md3 {
margin: auto;
border: none;
border-radius: var(--md-sys-shape-corner-extra-large);
background: var(--md-sys-color-surface-container-high);
color: var(--md-sys-color-on-surface);
padding: var(--md-spacing-24);
max-width: min(92vw, 720px);
max-height: 85vh;
width: min(92vw, 720px);
box-shadow: var(--md-sys-elevation-3);
box-sizing: border-box;
}

dialog.modal-md3::backdrop {
background: var(--md-sys-color-scrim);
opacity: 0.4;
backdrop-filter: blur(2px);
}

dialog.modal-md3[open] {
animation: modal-abrir var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);
align-items: center;
justify-content: center;
}

@keyframes modal-abrir {
from {
opacity: 0;
transform: scale(0.9) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}

.modal-config {
max-width: min(92vw, 480px);
}

.modal-cabecalho {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--md-spacing-16);
margin-bottom: var(--md-spacing-16);
}

.modal-titulo {
font-family: var(--md-ref-typeface-brand);
font-size: var(--md-sys-typescale-headline-small-size);
font-weight: var(--md-sys-typescale-headline-small-weight);
color: var(--md-sys-color-on-surface);
margin: 0;
}

.modal-cabecalho-app {
display: flex;
align-items: center;
gap: var(--md-spacing-16);
flex: 1;
min-width: 0;
}

.icone-app-modal {
width: 64px;
height: 64px;
border-radius: var(--md-sys-shape-corner-large);
object-fit: cover;
box-shadow: var(--md-sys-elevation-1);
background: var(--md-sys-color-surface-container-highest);
flex-shrink: 0;
}

.info-app-modal {
display: flex;
flex-direction: column;
gap: var(--md-spacing-8);
flex: 1;
min-width: 0;
}

.titulo-app-modal {
font-family: var(--md-ref-typeface-brand);
font-size: var(--md-sys-typescale-headline-small-size);
font-weight: var(--md-sys-typescale-headline-small-weight);
line-height: var(--md-sys-typescale-headline-small-line-height);
color: var(--md-sys-color-on-surface);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
}

.meta-tags-app {
display: flex;
gap: var(--md-spacing-8);
flex-wrap: wrap;
}

.tag-versao,
.tag-plataforma {
font-family: var(--md-ref-typeface-plain);
font-size: var(--md-sys-typescale-label-medium-size);
font-weight: var(--md-sys-typescale-label-medium-weight);
padding: var(--md-spacing-4) var(--md-spacing-12);
border-radius: var(--md-sys-shape-corner-small);
}

.tag-versao {
background: var(--md-sys-color-primary-container);
color: var(--md-sys-color-on-primary-container);
}

.tag-plataforma {
background: var(--md-sys-color-tertiary-container);
color: var(--md-sys-color-on-tertiary-container);
}

.modal-corpo {
display: flex;
flex-direction: column;
gap: var(--md-spacing-16);
padding: var(--md-spacing-8) 0;
max-height: 60vh;
overflow-y: auto;
}

.abas-md3 {
display: flex;
gap: var(--md-spacing-8);
border-bottom: 1px solid var(--md-sys-color-outline-variant);
margin-bottom: var(--md-spacing-16);
position: relative;
}

.aba-md3 {
font-family: var(--md-ref-typeface-plain);
font-size: var(--md-sys-typescale-title-small-size);
font-weight: var(--md-sys-typescale-title-small-weight);
letter-spacing: var(--md-sys-typescale-title-small-tracking);
color: var(--md-sys-color-on-surface-variant);
background: transparent;
border: none;
padding: var(--md-spacing-12) var(--md-spacing-16);
cursor: pointer;
position: relative;
transition: color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.aba-md3::after {
content: "";
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 100%;
height: 2px;
background: var(--md-sys-color-primary);
border-radius: var(--md-sys-shape-corner-full);
transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}

.aba-md3:hover {
color: var(--md-sys-color-on-surface);
}

.aba-md3:focus-visible {
outline: 2px solid var(--md-sys-color-primary);
outline-offset: -2px;
border-radius: var(--md-sys-shape-corner-extra-small);
}

.aba-md3.ativa {
color: var(--md-sys-color-primary);
}

.aba-md3.ativa::after {
transform: translateX(-50%) scaleX(1);
}

.painel-aba {
padding: var(--md-spacing-16) 0;
min-height: 200px;
}

.texto-descricao {
font-family: var(--md-ref-typeface-plain);
font-size: var(--md-sys-typescale-body-medium-size);
line-height: var(--md-sys-typescale-body-medium-line-height);
color: var(--md-sys-color-on-surface);
}

.texto-descricao ul {
list-style: none;
padding: 0;
margin: var(--md-spacing-12) 0;
display: flex;
flex-direction: column;
gap: var(--md-spacing-8);
}

.texto-descricao li {
padding-left: var(--md-spacing-16);
position: relative;
color: var(--md-sys-color-on-surface-variant);
}

.texto-descricao li::before {
content: "•";
position: absolute;
left: 0;
color: var(--md-sys-color-primary);
font-weight: 700;
}

.texto-descricao strong {
color: var(--md-sys-color-on-surface);
font-weight: 500;
}

.galeria-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--md-spacing-12);
}

.galeria-grid img {
width: 100%;
height: auto;
border-radius: var(--md-sys-shape-corner-medium);
cursor: pointer;
transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.galeria-grid img:hover {
transform: scale(1.02);
box-shadow: var(--md-sys-elevation-2);
}

.sem-imagens-galeria {
color: var(--md-sys-color-on-surface-variant);
text-align: center;
grid-column: 1/-1;
padding: var(--md-spacing-16);
font-family: var(--md-ref-typeface-plain);
font-size: var(--md-sys-typescale-body-medium-size);
}

.modal-rodape {
display: flex;
justify-content: flex-end;
gap: var(--md-spacing-12);
padding-top: var(--md-spacing-16);
border-top: 1px solid var(--md-sys-color-outline-variant);
margin-top: var(--md-spacing-16);
}

.botao-preenchido {
display: inline-flex;
align-items: center;
gap: var(--md-spacing-8);
padding: 0 var(--md-spacing-24);
height: 40px;
background: var(--md-sys-color-primary);
color: var(--md-sys-color-on-primary);
border: none;
border-radius: var(--md-sys-shape-corner-full);
font-family: var(--md-ref-typeface-plain);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
text-decoration: none;
cursor: pointer;
position: relative;
overflow: hidden;
transition: box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.botao-preenchido::before {
content: "";
position: absolute;
inset: 0;
background: var(--md-sys-color-on-primary);
opacity: 0;
transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.botao-preenchido:hover {
box-shadow: var(--md-sys-elevation-1);
}

.botao-preenchido:hover::before {
opacity: 0.08;
}

.botao-preenchido:focus-visible {
outline: 2px solid var(--md-sys-color-primary);
outline-offset: 2px;
}

.botao-preenchido:active::before {
opacity: 0.12;
}

.botao-preenchido .material-symbols-outlined,
.botao-preenchido span {
position: relative;
z-index: 1;
}

.linha-config {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--md-spacing-16);
padding: var(--md-spacing-16) var(--md-spacing-8);
border-radius: var(--md-sys-shape-corner-medium);
transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.linha-config:hover {
background: var(--md-sys-color-surface-container-highest);
}

.texto-linha-config {
display: flex;
flex-direction: column;
gap: var(--md-spacing-4);
flex: 1;
min-width: 0;
}

.titulo-linha-config {
font-family: var(--md-ref-typeface-plain);
font-size: var(--md-sys-typescale-body-large-size);
font-weight: var(--md-sys-typescale-body-large-weight);
color: var(--md-sys-color-on-surface);
}

.subtitulo-linha-config {
font-family: var(--md-ref-typeface-plain);
font-size: var(--md-sys-typescale-body-small-size);
color: var(--md-sys-color-on-surface-variant);
}

.switch-md3 {
width: 52px;
height: 32px;
border: none;
background: transparent;
cursor: pointer;
position: relative;
padding: 0;
flex-shrink: 0;
border-radius: var(--md-sys-shape-corner-full);
display: inline-block;
}

.switch-md3::before {
content: "";
position: absolute;
inset: -8px;
background: var(--md-sys-color-on-surface);
opacity: 0;
border-radius: var(--md-sys-shape-corner-full);
transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
pointer-events: none;
}

.switch-md3:hover::before {
opacity: 0.08;
}

.switch-md3:focus-visible::before {
opacity: 0.12;
}

.switch-md3:focus-visible {
outline: 2px solid var(--md-sys-color-primary);
outline-offset: 4px;
}

.switch-md3-track {
position: absolute;
inset: 0;
background: var(--md-sys-color-surface-container-highest);
border: 2px solid var(--md-sys-color-outline);
border-radius: var(--md-sys-shape-corner-full);
transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.switch-md3-thumb {
position: absolute;
top: 50%;
left: 8px;
width: 16px;
height: 16px;
background: var(--md-sys-color-outline);
border-radius: 50%;
transform: translateY(-50%);
transition: left var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized),
width var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized),
height var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized),
background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
z-index: 1;
}

.switch-md3[aria-checked="true"] .switch-md3-track {
background: var(--md-sys-color-primary);
border-color: var(--md-sys-color-primary);
}

.switch-md3[aria-checked="true"] .switch-md3-thumb {
left: 20px;
width: 24px;
height: 24px;
background: var(--md-sys-color-on-primary);
}

.seletor-musica-md3 {
font-family: var(--md-ref-typeface-plain);
font-size: var(--md-sys-typescale-body-medium-size);
padding: var(--md-spacing-12) var(--md-spacing-16);
border-radius: var(--md-sys-shape-corner-extra-small);
border: 1px solid var(--md-sys-color-outline);
background: var(--md-sys-color-surface-container-low);
color: var(--md-sys-color-on-surface);
cursor: pointer;
min-width: 140px;
transition: border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.seletor-musica-md3:focus-visible {
outline: 2px solid var(--md-sys-color-primary);
outline-offset: 2px;
border-color: var(--md-sys-color-primary);
}

.seletor-musica-md3:hover {
border-color: var(--md-sys-color-on-surface);
}

.miniplayer {
position: fixed;
bottom: calc(var(--md-spacing-24) + env(safe-area-inset-bottom, 0px));
left: 50%;
transform: translateX(-50%) translateY(120%);
width: min(680px, calc(100vw - 32px));
background: var(--md-sys-color-surface-container);
border-radius: var(--md-sys-shape-corner-extra-large);
box-shadow: var(--md-sys-elevation-3);
padding: var(--md-spacing-16);
display: flex;
flex-direction: column;
gap: var(--md-spacing-12);
z-index: 80;
transition: transform var(--md-sys-motion-duration-long1) var(--md-sys-motion-easing-emphasized),
opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
opacity: 0;
pointer-events: none;
}

.miniplayer[data-ativo="true"] {
transform: translateX(-50%) translateY(0);
opacity: 1;
pointer-events: auto;
}

.miniplayer-info {
display: flex;
align-items: center;
gap: var(--md-spacing-12);
}

.icone-musica {
color: var(--md-sys-color-primary);
font-size: 32px !important;
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 32;
}

.miniplayer-textos {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}

.miniplayer-titulo {
font-family: var(--md-ref-typeface-plain);
font-size: var(--md-sys-typescale-title-medium-size);
font-weight: var(--md-sys-typescale-title-medium-weight);
color: var(--md-sys-color-on-surface);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.miniplayer-artista {
font-family: var(--md-ref-typeface-plain);
font-size: var(--md-sys-typescale-body-small-size);
color: var(--md-sys-color-on-surface-variant);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.miniplayer-progresso {
display: flex;
flex-direction: column;
gap: var(--md-spacing-4);
}

.miniplayer-barra {
width: 100%;
height: 4px;
background: var(--md-sys-color-surface-container-highest);
border-radius: var(--md-sys-shape-corner-full);
cursor: pointer;
position: relative;
overflow: hidden;
transition: height var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.miniplayer-barra:hover,
.miniplayer-barra:focus-visible {
height: 6px;
}

.miniplayer-barra-preenchida {
height: 100%;
background: var(--md-sys-color-primary);
border-radius: var(--md-sys-shape-corner-full);
width: 0%;
transition: width var(--md-sys-motion-duration-short2) linear;
}

.miniplayer-tempos {
display: flex;
justify-content: space-between;
font-family: var(--md-ref-typeface-plain);
font-size: var(--md-sys-typescale-label-small-size);
color: var(--md-sys-color-on-surface-variant);
}

.miniplayer-controles {
display: flex;
align-items: center;
gap: var(--md-spacing-8);
}

.botao-play {
width: 56px;
height: 56px;
background: var(--md-sys-color-primary-container);
color: var(--md-sys-color-on-primary-container);
}

.botao-play::before {
background: var(--md-sys-color-on-primary-container);
}

.botao-play:hover {
box-shadow: var(--md-sys-elevation-1);
}

.miniplayer-volume {
display: flex;
align-items: center;
gap: var(--md-spacing-8);
margin-left: auto;
flex: 1;
max-width: 160px;
}

.miniplayer-volume .material-symbols-outlined {
font-size: 20px !important;
color: var(--md-sys-color-on-surface-variant);
}

.slider-volume-md3 {
flex: 1;
height: 4px;
-webkit-appearance: none;
appearance: none;
background: var(--md-sys-color-surface-container-highest);
border-radius: var(--md-sys-shape-corner-full);
outline: none;
cursor: pointer;
}

.slider-volume-md3::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: var(--md-sys-shape-corner-full);
background: var(--md-sys-color-primary);
cursor: pointer;
border: none;
}

.slider-volume-md3::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: var(--md-sys-shape-corner-full);
background: var(--md-sys-color-primary);
cursor: pointer;
border: none;
}

.rodape-app {
flex-shrink: 0;
padding: var(--md-spacing-24) var(--md-spacing-16);
padding-bottom: calc(var(--md-spacing-24) + env(safe-area-inset-bottom, 0px));
text-align: center;
background: var(--md-sys-color-surface-container);
border-top: 1px solid var(--md-sys-color-outline-variant);
}

.rodape-app span {
font-family: var(--md-ref-typeface-plain);
font-size: var(--md-sys-typescale-body-small-size);
color: var(--md-sys-color-on-surface-variant);
}

@media (max-width: 599px) {
.barra-superior-conteudo {
padding: var(--md-spacing-12) var(--md-spacing-16);
gap: var(--md-spacing-12);
}

.logo-barra {
width: 40px;
height: 40px;
}

.barra-superior-titulos h1 {
font-size: var(--md-sys-typescale-title-large-size);
}

.barra-superior-titulos p {
display: none;
}

.conteudo-principal {
padding: var(--md-spacing-16) var(--md-spacing-12);
padding-bottom: 100px;
gap: var(--md-spacing-24);
}

.grid-apps {
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: var(--md-spacing-12);
}

.icone-app {
width: 56px;
height: 56px;
}

.fab-telegram {
bottom: calc(var(--md-spacing-16) + env(safe-area-inset-bottom, 0px));
right: var(--md-spacing-16);
padding: 0;
width: 56px;
min-width: 56px;
justify-content: center;
}

.fab-texto {
display: none;
}

.miniplayer {
bottom: calc(var(--md-spacing-16) + env(safe-area-inset-bottom, 0px));
width: calc(100vw - 24px);
padding: var(--md-spacing-12);
}

.miniplayer-volume {
display: none;
}

.botao-icone {
width: 40px;
height: 40px;
}

.botao-play {
width: 48px;
height: 48px;
}

.cabecalho-secao {
padding: 0;
}

.contador-apps {
padding: var(--md-spacing-4) var(--md-spacing-12);
}

dialog.modal-md3 {
padding: var(--md-spacing-20);
margin: var(--md-spacing-16);
}
}

@media (min-width: 600px) and (max-width: 839px) {
.grid-apps {
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
}

@media (min-width: 840px) and (max-width: 1199px) {
.grid-apps {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--md-spacing-20);
}
}

@media (min-width: 1200px) {
.conteudo-principal {
padding: var(--md-spacing-32) var(--md-spacing-24);
gap: var(--md-spacing-48);
}

.grid-apps {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--md-spacing-24);
}

.icone-app {
width: 80px;
height: 80px;
}
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}