/* Reset básico */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* RECOMENDADO: layout simples e confiável */
body {
  font-family: 'Verdana', sans-serif;
  background: linear-gradient(180deg, #e8dcf0, #ffffff);
  margin: 0;
  padding: 20px 0; /* espaço vertical */
  cursor: url('https://files.catbox.moe/k18meo.ani'), auto;
}

.page-bg {
  width: 760px;
  max-width: 95%;
  margin: 0 auto; /* centraliza horizontalmente sem usar flex no body */
}

/* Corpo */
body {
  font-family: 'Verdana', sans-serif;
  background: linear-gradient(180deg, #e8dcf0, #ffffff);
  display: flex;
  justify-content: center;   /* centraliza horizontalmente */
  align-items: flex-start;   /* alinha ao topo e permite crescer verticalmente */
  padding: 0;
  margin: 0;
  cursor: url('https://files.catbox.moe/k18meo.ani'), auto;
}

/* Janela */
.window {
  background: linear-gradient(180deg, #e8dcf0, #fff);
  border-radius: 28px;
  padding: 18px;
  border: 6px solid #d8bfe8;
  box-shadow: 0 8px 30px rgba(150, 100, 210, 0.12);
  /* removido overflow:hidden para não cortar conteúdo que ultrapassar a altura do viewport */
}

/* Container */
.page-bg {
  width: 760px;
  max-width: 95%;
}

/* Cabeçalho */
.top {
  background: #e8dcf0;
  border-radius: 18px;
  padding: 12px 16px;
  text-align: center;
  border: 3px solid rgba(255, 255, 255, 0.6);
}

.top .title {
  font-weight: 700;
  font-size: 20px;
  color: #8a4cdb;
}

.top .subtitle {
  font-size: 11px;
  color: #a588b5;
}

/* Banner */
.hero {
  margin-top: 12px;
}

.hero-image {
  height: 170px;
  background-image: url('https://i.pinimg.com/1200x/8a/ea/46/8aea463a4b57a9849c4e6a1bf91c9776.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 140px;
  border: 6px solid #e8dcf0;
}

/* Navegação */
.tabs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  background: linear-gradient(180deg, #d8bfe8, #e8dcf0);
  border-radius: 12px;
  font-weight: 600;
  color: #fff;
  opacity: 0.95;
  box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.2);
  cursor: url('https://files.catbox.moe/25aihj.ani'), pointer;
}

/* Barra de busca */
.search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.search-box {
  flex: 1;
  padding: 12px 16px;
  border-radius: 24px;
  background: #f4e8fb;
  border: 3px solid #d8bfe8;
  color: #9369b7;
  font-weight: 700;
}

.mini-icons {
  display: flex;
  gap: 8px;
}

.round {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #d8bfe8;
  background: transparent;
  font-weight: 700;
  cursor: url('https://files.catbox.moe/25aihj.ani'), pointer;
}

/* Links extras */
.links-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.pill {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f4e8fb);
  border: 2px solid #d8bfe8;
  font-weight: 700;
  cursor: url('https://files.catbox.moe/25aihj.ani'), pointer;
}

/* Conteúdo */
.content {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

/* Bio */
.bio {
  flex: 1;
  background: linear-gradient(180deg, #fff6fb, #fff);
  padding: 14px;
  border-radius: 14px;
  border: 2px dashed rgba(150, 100, 210, 0.12);
}

.handle {
  color: #8c4ce1;
  font-size: 20px;
  margin-bottom: 8px;
}

.desc {
  color: #7a44ac;
  line-height: 1.4;
  margin-bottom: 10px;
}

/* Imagens decorativas */
.sweets {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.sweet {
  width: 140px;
  height: 140px;
  object-fit: contain;
}

.divizor {
  width: 300px;
  height: 100px;
  right: 10000%;
  object-fit: contain;
}

/* Avatar */
.avatar {
  width: 140px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.avatar img {
  width: 120px;
  height: 120px;
  border-radius: 18px;
  border: 6px solid #e8dcf0;
}

/* Rodapé */
.made {
  text-align: center;
  margin-top: 12px;
  color: #ac92c6;
  font-size: 12px;
}

/* Responsivo */
@media (max-width: 640px) {
  .content {
    flex-direction: column;
  }

  .avatar {
    width: 100%;
    justify-content: flex-end;
  }
}
.kawaii-container {
  /* 1. Cores e Fundo */
  
  /* Um roxo escuro, mas não preto (Ex: #6A1B9A) */
  background-color: #d8bfe8; 
  
  /* Cor do texto para contrastar bem com o fundo escuro */
  color: #fff8fc; /* Um rosa/branco claro (kawaii!) */
  
  /* 2. Formato e Dimensões */
  
  /* Largura máxima para o contêiner não ocupar a tela inteira */
  max-width: 600px; 
  /* Adiciona um espaço interno (para o conteúdo não encostar na borda) */
  padding: 20px; 
  /* Centraliza o contêiner na página (opcional) */
  margin: 20px auto; 
  
  /* 3. Efeito Kawaii (Arredondamento e Sombra) */
  
  /* Cantos bem arredondados, essencial para o visual fofo */
  border-radius: 20px; 
  
  /* Sombra sutil que dá um efeito "almofadado" ou 3D */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2), /* Sombra padrão */
              0 0 0 4px #c9addb; /* "Borda" suave, roxo claro */
  
  /* 4. Estilo do Texto (Opcional, mas melhora o visual) */
  font-family: sans-serif;
  text-align: center;
}




 /* Estilo para o Contêiner Principal */
        .blinkie-box {
            /* 1. Dimensões e Posicionamento */
            max-width: 400px; 
            padding: 15px; 
            margin: 20px auto; 
            text-align: center;
            
            /* 2. Cores e Formato Interno */
            background-color: #7B1FA2; /* Roxo Escuro */
            color: #ffcdd2; 
            border-radius: 25px; 
            
            /* 3. Necessário para a nova borda de listras */
            position: relative;
            z-index: 1; /* Garante que o conteúdo fique por cima da borda */
            
            /* 4. Sombra de profundidade suave (solicitada) */
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
            
            /* Remove o fundo do elemento pai onde a borda listrada será aplicada */
            background-clip: padding-box; 
        }
        
        /* NOVO ESTILO DE BORDA: Fundo listrado aplicado a um elemento ::before */
        .blinkie-box::before {
            content: '';
            position: absolute;
            /* Expande o elemento para cobrir uma área maior que o container,
               criando o espaço para a borda */
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            
            /* Arredondamento da borda externa */
            border-radius: 30px; 
            
            /* Z-index menor que o principal para ficar por baixo */
            z-index: -1; 
            
            /* O EFEITO KAWAII LISTRADO/FITA! */
            /* Degradê que se repete em um ângulo de -45 graus, 
               criando um padrão de listras rosa e roxas claras */
            background: repeating-linear-gradient(
                -45deg,
                #f8a1d1, /* Rosa Kawaii (Começo da lista) */
                #f8a1d1 8px, /* Largura do rosa */
                #9c27b0 8px, /* Roxo Claro (Começo da segunda lista) */
                #9c27b0 16px /* Largura total do padrão (Rosa + Roxo) */
            );
        }

        /* Estilo para garantir que os Blinkies fiquem grudados */
        .blinkie-wrapper {
            line-height: 0; 
            font-size: 0; 
            display: flex;
            flex-wrap: wrap; 
            justify-content: center; 
        }
        
        /* Estilo dos Blinkies Individuais */
        .sweet {
            margin: 0;
            padding: 0;
            display: inline-block; 
            border: none; 
        }

        /* Estilo para a 'Marca D'água' (Atribuição) */
        .attribution-area {
            margin-top: 15px;
            padding-top: 10px;
            border-top: 1px dashed #fff8fc; /* Linha tracejada suave */
            text-align: center;
        }

        .attribution-area a img {
            display: block;
            margin: 5px auto 0;
        }

        h2 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: #fff8fc;
            text-shadow: 1px 1px 2px #4a148c;
        }