/* === Unified Green Dark Mode === */
/* Body */
html, body {
  font-family: 'Lexend', sans-serif;
  height: 100%;
  background: linear-gradient(-45deg, #0f2027, #203a43, #2c5364, #06b966);
  background-size: 400% 400%;
  -webkit-animation: gradientShift 12s ease infinite;
          animation: gradientShift 12s ease infinite; }

/* Gradient animation */
@-webkit-keyframes gradientShift {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }
@keyframes gradientShift {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

/* Links */
a {
  color: #1DB954; }

a:hover,
a:focus {
  color: #28E066;
  /* slightly brighter green on hover */ }

/* Buttons */
.button.is-primary,
.button.is-link {
  background-color: #1DB954;
  color: #121212; }

.button.is-primary:hover,
.button.is-link:hover {
  background-color: #28E066; }

/* Navbar */
.navbar {
  background-color: #1F1F1F; }

.navbar .navbar-item,
.navbar .navbar-link {
  color: #E0E0E0; }

.navbar .navbar-item:hover,
.navbar .navbar-link:hover {
  background-color: #2A2A2A; }

/* Hamburger */
.navbar-burger span {
  background-color: #E0E0E0; }

.navbar-burger:hover span,
.navbar-burger.is-active span {
  background-color: #1DB954; }

/* Mobile menu */
.navbar-menu {
  background-color: #1F1F1F; }

.navbar-menu .navbar-item {
  color: #E0E0E0; }

.navbar-menu .navbar-item:hover {
  background-color: #2A2A2A; }

/* Cards / Panels */
.card,
.panel {
  background: linear-gradient(135deg, #1B1B1B, #1C1C1C);
  background-size: 200% 200%;
  -webkit-animation: cardGradient 20s ease infinite;
          animation: cardGradient 20s ease infinite;
  border: 1px solid #2C2C2C;
  color: #E0E0E0;
  border-radius: 6px; }

@-webkit-keyframes cardGradient {
  0% {
    background-position: 0% 0%; }
  50% {
    background-position: 100% 100%; }
  100% {
    background-position: 0% 0%; } }

@keyframes cardGradient {
  0% {
    background-position: 0% 0%; }
  50% {
    background-position: 100% 100%; }
  100% {
    background-position: 0% 0%; } }

/* Inputs / Textareas */
input,
textarea,
select {
  background-color: #1C1C1C;
  border: 1px solid #2C2C2C;
  color: #E0E0E0; }

input:focus,
textarea:focus,
select:focus {
  border-color: #1DB954;
  -webkit-box-shadow: 0 0 0 1px rgba(29, 185, 84, 0.2);
          box-shadow: 0 0 0 1px rgba(29, 185, 84, 0.2); }

/* Tables */
table {
  background-color: #1B1B1B;
  color: #E0E0E0;
  border-color: #2C2C2C; }

table thead {
  background-color: #1F1F1F; }

table tbody tr:nth-child(even) {
  background-color: #161616; }

/* Code blocks */
pre,
code {
  background-color: #1B1B1B;
  color: #E0E0E0;
  border-radius: 4px; }

/* Horizontal rules */
hr {
  border-color: #2C2C2C; }

/* Footer */
.footer {
  background-color: #1B1B1B;
  color: #E0E0E0;
  margin-top: auto; }

/* Padding utility */
.is-paddingless-top {
  padding-top: 0; }

.main-content {
  flex: 1; }

.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 76vh; }