:root {
  /* Neutral: */
  --neutral900: hsl(227, 75%, 14%);
  --neutral800: hsl(226, 25%, 17%);
  --neutral700: hsl(225, 23%, 24%);
  --neutral600: hsl(226, 11%, 37%);
  --neutral300: hsl(0, 0%, 78%);
  --neutral200: hsl(217, 61%, 90%);
  --neutral100: hsl(0, 0%, 93%);
  --neutral0: hsl(200, 60%, 99%);
  /* Red */
  --red400: hsl(3, 86%, 64%);
  --red500: hsl(3, 71%, 56%);
  --red700: hsl(3, 77%, 44%);
  /* Gradient */
  --light-gradient: linear-gradient(180deg, #EBF2FC 0%, #EEF8F9 100%);
  --dark-gradient: linear-gradient(180deg, #040918 0%, #091540 100%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100%;
  min-height: 100vh;
  background: var(--dark-gradient);
}

body.light {
  height: 100%;
  min-height: 100vh;
  background: var(--light-gradient);
}

.global-container {
  margin: 2rem auto;
  max-width: 80vw;
}

.extensions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--neutral800);
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
}

body.light .extensions {
  display: none;
}

.extensions-light {
  display: none;
}

body.light .extensions-light {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.change-theme {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-radius: 10px;
  background-color: var(--neutral700);
  border: none;
}

.change-theme:hover {
  background-color: var(--neutral600);
  cursor: pointer;
}

.change-theme:focus {
  outline: 2px solid var(--red500);
  outline-offset: 1px;
  background-color: var(--neutral600);
}

.change-theme-light {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-radius: 10px;
  background-color: var(--neutral100);
  border: none;
}

.change-theme-light:hover {
  background-color: var(--neutral300);
  cursor: pointer;
}

.change-theme-light:focus {
  outline: 2px solid var(--red500);
  outline-offset: 1px;
}

.extensions-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  color: white;
  margin-bottom: 1rem;
}

body.light .extensions-list {
  color: var(--neutral900);
}

.button-style {
  padding: 8px 15px;
  border-radius: 30px;
  background-color: var(--neutral700);
  color: white;
  border: 1px solid var(--neutral600);
  line-height: 1;
}

.button-style:hover {
  background-color: var(--neutral600);
  cursor: pointer;
}

.button-style:focus {
  outline: 2px solid var(--red500);
  outline-offset: 1px;
  background-color: var(--neutral600);
}

body.light .button-style {
  padding: 8px 15px;
  border-radius: 30px;
  background-color: white;
  color: var(--neutral900);
  border: 1px solid var(--neutral200);
  line-height: 1;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

body.light .button-style:hover {
  background-color: var(--neutral0);
  color: var(--neutral600);
  cursor: pointer;
}

.body.light .button-style:focus {
  outline: 2px solid var(--red500);
  outline-offset: 1px;
}

.extensions-list-buttons {
  display: flex;
  gap: 0.5rem;
}

.selected-button {
  background-color: var(--red500);
  border: 1px solid var(--red500);
  color: var(--neutral900);
}

.selected-button:hover {
  background-color: var(--red400);
  border: 1px solid var(--red400);
}

.selected-button:focus {
  background-color: var(--red400);
  border: 1px solid var(--red400);
}

body.light .selected-button {
  background-color: var(--red700);
  border: 1px solid var(--red700);
  color: white;
}

body.light .selected-button:hover {
  background-color: var(--red500);
  border: 1px solid var(--red500);
  color: white;
}

.extensions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}

.extension {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--neutral800);
  border: 1px solid var(--neutral600);
  padding: 0.8rem;
  border-radius: 10px;
}

/* Colocar border-shadow */
body.light .extension {
  display: flex;
  justify-content: space-between;
  background-color: white;
  border: 1px solid var(--neutral200);
  padding: 0.8rem;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.extension-header {
  display: flex;
  align-items: start;
  gap: 10px;
  color: white;
  margin-bottom: 2rem;
}

body.light .extension-header {
  display: flex;
  align-items: start;
  gap: 10px;
  color: var(--neutral900);
  margin-bottom: 2rem;
}

.extension-header h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.extension-header p {
  font-size: 0.8rem;
  color: var(--neutral300);
}

body.light .extension-header p {
  font-size: 0.8rem;
  color: var(--neutral600)
}

.extension-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.remove-button {
  padding: 6px 10px;
  border-radius: 30px;
  font-size: 0.8rem;
  color: white;
  background-color: var(--neutral800);
  border: 1px solid var(--neutral600);
}

.remove-button:hover {
  background-color: var(--red500);
  border: 1px solid var(--red500);
  color: var(--neutral900);
  cursor: pointer;
}

.remove-button:focus {
  outline: 2px solid var(--red500);
  outline-offset: 1px;
  background-color: var(--neutral600);
}

body.light .remove-button {
  padding: 6px 10px;
  border-radius: 30px;
  font-size: 0.8rem;
  color: var(--neutral900);
  background-color: white;
  border: 1px solid var(--neutral300);
}

body.light .remove-button:hover {
  background-color: var(--red700);
  border: 1px solid var(--red700);
  color: white;
  cursor: pointer;
}

body.light .remove-button:focus {
  outline: 2px solid var(--red500);
  outline-offset: 1px;
  background-color: var(--neutral100);
  border: 1px solid var(--neutral100);
}

.switch-toggle {
  position: relative;
  width: 37px;
  height: 20px;
}

.switch-toggle:focus {
  border-radius: 50px;
  outline: 2px solid var(--red500);
  outline-offset: 1px;
}

/* Mudar a partir daqui */
.switch-toggle label {
  position: absolute;
  top: 0;
  left: 0;
  width: 37px;
  height: 20px;
  border-radius: 50px;
  background: var(--neutral600);
  cursor: pointer;
  transition: all 0.3s ease;
}

body.light .switch-toggle label {
  position: absolute;
  top: 0;
  left: 0;
  width: 37px;
  height: 20px;
  border-radius: 50px;
  background: var(--neutral300);
  cursor: pointer;
  transition: all 0.3s ease;
}

.switch-toggle label:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.switch-toggle input[type="checkbox"]:checked + label {
  background: var(--red500);
}

.switch-toggle input[type="checkbox"]:checked + label:hover {
  background: var(--red700);
}

body.light .switch-toggle input[type="checkbox"]:checked + label {
  background: var(--red700);
}

body.light .switch-toggle input[type="checkbox"]:checked + label:hover {
  background: var(--red500);
}


.switch-toggle input[type="checkbox"]:checked + label:after {
  transform: translateX(17px);
}

.yep {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 20px;
  opacity: 0;
}

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }

@media (max-width: 800px) {
  .extensions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .extensions-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .extensions-list {
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
}