body {
    background-color: #121212;
    color: #e0e0e0;
    font-family: 'Bitcount Single Ink';
}

.card {
    background-color: #1e1e1e;
    border: 1px solid #333;
    color: #e0e0e0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.card-header {
    background-color: #2c2c2c;
    color: #ffffff;
    font-weight: bold;
}

.card-title {
    color: #ffffff;
}

.card-subtitle {
    color: #b0b0b0;
}

.btn-danger {
    background-color: #bb86fc;
    border: none;
    color: #121212;
    font-weight: bold;
}

.btn-danger:hover {
    background-color: #9b6de2;
    color: #ffffff;
}

h1 {
    color: #ffffff;
}

/* Light Mode */
body.light-mode {
    background-color: #ffffff;
    color: #000000;
}

.card.light-mode {
    background-color: #f8f9fa;
    color: #000000;
}

.card-header.light-mode {
    background-color: #e9ecef;
    color: #000000;
}

.card-title.light-mode {
    color: #000000;
}

.card-subtitle.light-mode {
    color: #333333;
}

.btn-danger.light-mode {
    background-color: #dc3545;
    color: #ffffff;
}

/* Light Mode */
body.light-mode {
    background-color: #ffffff;
    color: #000000;
}

h1.light-mode {
    color: #000000;
}

.card.light-mode {
    background-color: #f8f9fa;
    color: #000000;
}

.card-header.light-mode {
    background-color: #e9ecef;
    color: #000000;
}

.card-title.light-mode {
    color: #000000;
}

.card-subtitle.light-mode {
    color: #333333;
}

.btn-danger.light-mode {
    background-color: #dc3545;
    color: #ffffff;
}

/* Dark Mode */
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

h1.dark-mode {
    color: #ffffff;
}

.card.dark-mode {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

.card-header.dark-mode {
    background-color: #2c2c2c;
    color: #ffffff;
}

.card-title.dark-mode {
    color: #ffffff;
}

.card-subtitle.dark-mode {
    color: #b0b0b0;
}

.btn-danger.dark-mode {
    background-color: #bb86fc;
    color: #121212;
}

.tool-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

.tool-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

/* Hidden description reveal */
.tool-description {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.4s ease;
}

.tool-card:hover .tool-description {
  opacity: 1;
  max-height: 150px;
}