@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Poppins:wght@500;600&display=swap");

* { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; }
:root { font-size: 62.5%; scroll-behavior: smooth; }

body { background-color: #13131F; color: #F9F9F9; font-family: 'DM Sans', sans-serif; overflow-x: hidden; }

/* HEADER */
header { position: sticky; top: 0; width: 100%; background-color: #13131F; z-index: 1000; border-bottom: 0.1rem solid rgba(130, 87, 230, 0.2); }
header .container { display: flex; justify-content: space-between; align-items: center; padding: 2.2rem 5%; max-width: 1200px; margin: 0 auto; }
.header-left { display: flex; align-items: center; gap: 2rem; }
.menu i, .back-button i { font-size: 2.4rem; color: #8257E6; cursor: pointer; transition: 0.3s; }
header h2 { font-size: 2rem; font-family: 'Poppins'; font-weight: 600; color: #F9F9F9; letter-spacing: 1px; }

/* TOGGLE TEMA */
.toggle .label { display: flex; background: #8257E6; width: 5.5rem; height: 2.6rem; border-radius: 2rem; padding: 0.3rem; cursor: pointer; position: relative; }
.toggle input { opacity: 0; position: absolute; }
.toggle .box { background-color: #13131F; height: 2rem; width: 2rem; border-radius: 50%; transition: 0.4s; }
.toggle input:checked + .label { background-color: #F9F9F9; }
.toggle input:checked + .label .box { transform: translateX(2.9rem); background-color: #13131F; }

/* MENU LATERAL (VERTICAL) */
.menuOpen { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(19, 19, 31, 0.98); backdrop-filter: blur(10px); z-index: 2000; display: flex; justify-content: center; align-items: center; }
.menu-content { display: flex; flex-direction: column; align-items: center; }
.menuOpen h2 { font-size: 2.4rem; color: #8257E6; margin-bottom: 5rem; font-family: 'Poppins'; }
.menuOpen nav { display: flex; flex-direction: column; gap: 3.5rem; text-align: center; }
.menuOpen a { font-size: 3.2rem; color: #F9F9F9; font-weight: 600; transition: 0.3s; font-family: 'Poppins'; }
.menuOpen a:hover { color: #8257E6; transform: scale(1.05); }
.hidden { display: none !important; }

/* CONTEÚDO EXERCÍCIOS */
.page-title { text-align: center; margin: 6rem 0 4rem; }
.page-title h2 { font-size: 3.2rem; font-family: 'Poppins'; text-transform: uppercase; line-height: 1.2; }
.container-exercicios { width: 90%; max-width: 800px; margin: 0 auto 10rem; }
details { background-color: #1c1c2d; border-radius: 1.5rem; margin-bottom: 2rem; border: 1px solid #2a2a40; transition: 0.3s; }
summary { padding: 2.5rem; cursor: pointer; font-size: 1.8rem; font-weight: 600; display: flex; justify-content: space-between; outline: none; color: #F9F9F9;}
summary::after { content: '+'; color: #8257E6; font-size: 2.2rem; }
details[open] summary::after { content: '-'; }
.content { padding: 0 2.5rem 2.5rem; font-size: 1.6rem; color: #828282; line-height: 1.8; }

/* LIGHT MODE */
body.light-mode { background-color: #F9F9F9; color: #13131F; }
body.light-mode header h2 { color: #8257E6; }
body.light-mode header { background-color: #13131F; }
body.light-mode .banner h1, body.light-mode .banner p, body.light-mode h2 { color: #13131F; }
body.light-mode .folder-card { background-color: #EEEEEE; border: 0.1rem solid #DDD; }
body.light-mode .icon .box { background-color: #EEEEEE; }

/* ESTILIZAÇÃO DO SCROLLBAR */
::-webkit-scrollbar { width: 1rem; }
::-webkit-scrollbar-track { background-color: #13131F; }
::-webkit-scrollbar-thumb { background-color: #8257E6; border-radius: 1rem; border: 0.2rem solid #13131F; }
::-webkit-scrollbar-thumb:hover { background-color: #9466ff; }

/* SUPORTE FIREFOX */
* { scrollbar-width: thin; scrollbar-color: #8257E6 #13131F; }
body.light-mode { scrollbar-color: #8257E6 #F9F9F9; }

/*Padrão formulario */
.content form {display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1.5rem; align-items: center; }

/* Input */
.content input[type="number"],
.content input[type="text"] { width: 100%; padding: 1rem 1.5rem; background: var(--input-bg); border: 2px solid #13131F; border-radius: 5rem; color: #8257E6; font-size: 1.5rem; font-family: 'Poppins', sans-serif; font-weight: bold; transition: 0.3s; outline: none; text-align: center; }
.content input:focus { border-color: #8257E6; background: #1a1a2e; }

/* Botão */
.content button { background: #8257E6; color: #F9F9F9; border: none; padding: 0.8rem 4.5rem; border-radius: 5rem; cursor: pointer; font-weight: bold; transition: 0.3s; font-family: 'Poppins', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; width: fit-content; min-width: 220px; }
.content button:hover { background: #9466ff; transform: scale(1.05); }

/* Ajuste para o resultado acompanhar o arredondamento */
.resultado { width: 100%; margin-top: 1.8rem; padding: 1.2rem 2rem; background: rgba(130, 87, 230, 0.15); border-left: 6px solid #8257E6; border-radius: 0.8rem; font-family: 'Poppins', sans-serif; font-size: 1.4rem; font-weight: 500; color: #F9F9F9; text-align: center; line-height: 1.4; }

/* Ajuste para o modo claro, se necessário */
.light-mode .content input { border: 2px solid #dce2e6; background: #fff; }

/* REMOVER SETAS PADRÃO DO INPUT NUMBER */
.content input[type="number"]::-webkit-outer-spin-button,
.content input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Firefox */
.content input[type="number"] { -moz-appearance: textfield; appearance: textfield; }