:root{--fundo:#faf7f2;--superficie:#fff;--texto:#2a2420;--texto-discreto:#6b6058;--borda:#e4dcd2;--primaria:#7a4b2a;--primaria-texto:#fff;--raio:12px;--erro:#b42318;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--texto);background:var(--fundo);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--fundo:#171412;--superficie:#221e1b;--texto:#ece6df;--texto-discreto:#a99d92;--borda:#3a332d;--primaria:#e0a77c;--primaria-texto:#1d130c;--erro:#ff8a80}}*,:before,:after{box-sizing:border-box}body{min-height:100dvh;margin:0}h1{margin:.25rem 0;font-size:2rem}.discreto{color:var(--texto-discreto);margin:0}.tela-central{min-height:100dvh;padding:max(1.5rem, env(safe-area-inset-top)) 1.5rem max(1.5rem, env(safe-area-inset-bottom));text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;display:flex}h1.titulo-menor{font-size:1.5rem}.tela-central .botao{min-width:240px}.tela-central>.discreto{max-width:34rem}.erro{color:var(--erro);max-width:34rem;margin:0}.botao-google{gap:.6rem;margin-top:1rem}.botao-google svg{box-sizing:content-box;background:#fff;border-radius:50%;padding:2px}.botao:disabled{opacity:.55;cursor:default}.avatar{object-fit:cover;border-radius:50%;display:block}.avatar-inicial{background:var(--primaria);color:var(--primaria-texto);place-items:center;font-weight:700;display:grid}.topo{z-index:10;padding:max(.5rem, env(safe-area-inset-top)) 1rem .5rem;background:var(--fundo);border-bottom:1px solid var(--borda);justify-content:space-between;align-items:center;gap:1rem;display:flex;position:sticky;top:0}.topo-marca{align-items:center;gap:.5rem;font-size:1.1rem;font-weight:700;display:flex}.topo-marca img{border-radius:7px}.conta{position:relative}.conta-botao{cursor:pointer;background:0 0;border:0;border-radius:50%;padding:6px;display:block}.conta-botao:focus-visible{outline:2px solid var(--primaria);outline-offset:2px}.conta-menu{border:1px solid var(--borda);border-radius:var(--raio);background:var(--superficie);overflow-wrap:anywhere;flex-direction:column;gap:.35rem;width:min(80vw,280px);padding:1rem;display:flex;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 12px 32px #0000002e}.conta-menu .botao{margin-top:.5rem}.biblioteca{width:min(100%,880px);padding:1.25rem 1rem max(2rem, env(safe-area-inset-bottom));flex-direction:column;gap:1.25rem;margin:0 auto;display:flex}.biblioteca-cabecalho{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.barra-uso{flex-direction:column;gap:.4rem;display:flex}.barra-uso-texto{color:var(--texto-discreto);justify-content:space-between;font-size:.9rem;display:flex}.barra-uso-trilho{background:var(--borda);border-radius:999px;height:8px;overflow:hidden}.barra-uso-preenchido{border-radius:inherit;background:var(--primaria);height:100%;transition:width .3s}.nivel-atencao .barra-uso-preenchido{background:#c27c0e}.nivel-cheia .barra-uso-preenchido{background:var(--erro)}.barra-uso-aviso{color:var(--erro);margin:0;font-size:.9rem}.vazio{border:1px dashed var(--borda);border-radius:var(--raio);text-align:center;padding:3rem 1rem}.vazio h2{margin:0 0 .25rem;font-size:1.1rem}.botao{border:1px solid var(--borda);border-radius:var(--raio);background:var(--superficie);min-height:48px;color:var(--texto);font:inherit;cursor:pointer;justify-content:center;align-items:center;padding:0 1.25rem;font-weight:600;text-decoration:none;display:inline-flex}.botao-primario{background:var(--primaria);border-color:var(--primaria);color:var(--primaria-texto)}.fundo-dialogo{z-index:50;background:#0006;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.dialogo{border-radius:var(--raio);background:var(--superficie);width:min(100%,360px);color:var(--texto);flex-direction:column;gap:.75rem;padding:1.25rem;display:flex;box-shadow:0 12px 32px #00000040}.dialogo p{margin:0}.girando{border:3px solid var(--borda);border-top-color:var(--primaria);border-radius:50%;align-self:center;width:28px;height:28px;animation:.8s linear infinite girar}@keyframes girar{to{transform:rotate(360deg)}}
