@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 */
.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; }

/* BOX ESTÁTICA (Substituindo o Details) */
.terminal-wrapper { background-color: #1c1c2d; border-radius: 1.5rem; margin-bottom: 2rem; border: 1px solid #2a2a40; overflow: hidden; }
.terminal-title { padding: 2.5rem; font-size: 1.8rem; font-weight: 600; color: #F9F9F9; border-bottom: 1px solid #2a2a40; text-transform: uppercase; }
.content { padding: 2.5rem; font-size: 1.6rem; color: #828282; line-height: 1.8; }

/* ESTILIZAÇÃO DA IDE / TERMINAL */
.terminal-ide-container { background-color: #0d0d15; border-radius: 1.2rem; border: 0.1rem solid #2a2a40; margin-top: 2rem; overflow: hidden; }
.terminal-ide-header { background-color: #1c1c2d; padding: 1.2rem 2rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 0.1rem solid #2a2a40; }

/* BOTÃO RUN (Mais comprido e border-radius total) */
#btnRunTerminal { 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'; text-transform: uppercase; letter-spacing: 0.5px; }
#btnRunTerminal:hover { background: #9466ff; transform: scale(1.03); }

/* DOTS ESTILO MAC */
.dots { display: flex; gap: 0.8rem; }
.dots span { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #ff5f56; }
.dots span:nth-child(2) { background: #ffbd2e; }
.dots span:nth-child(3) { background: #27c93f; }

/* TERMINAL XTERM */
#terminal-container { padding: 1.5rem; background: #000; min-height: 300px; }

/* 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 .terminal-wrapper { background-color: #EEEEEE; border: 0.1rem solid #DDD; }
body.light-mode .terminal-title, body.light-mode h2 { color: #13131F; }

/* SCROLLBARS */
::-webkit-scrollbar { width: 1rem; }
::-webkit-scrollbar-track { background-color: #13131F; }
::-webkit-scrollbar-thumb { background-color: #8257E6; border-radius: 1rem; border: 0.2rem solid #13131F; }