/* Theme Styles */

/* 
* Theme 1: Fallout Pipboy 3000 Style 
* Monochrome green, CRT effect, terminal-inspired interface
*/
.theme-fallout {
  --color-primary: #63ff00;
  --color-secondary: #319800;
  --color-accent: #4bff62;
  --color-background: #0a0a0a;
  --color-text: #63ff00;
  --color-text-light: #45ae00;
  --color-border: #1a4900;

  --color-button-primary: #63ff00;
  --color-button-secondary: #319800;
  --color-button-danger: #ff2a2a;

  font-family: "Roboto Mono", monospace;
  background-color: var(--color-background);
  color: var(--color-text);
  text-shadow: 0 0 8px rgba(99, 255, 0, 0.7);
}

.theme-fallout::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    transparent 0%,
    rgba(32, 32, 32, 0.2) 50%,
    transparent 100%
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 1000;
}

.theme-fallout .logo,
.theme-fallout h1,
.theme-fallout h2,
.theme-fallout h3 {
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.theme-fallout input,
.theme-fallout textarea,
.theme-fallout select,
.theme-fallout .practice-card,
.theme-fallout .stat-card,
.theme-fallout .chart-container,
.theme-fallout .practice-feedback,
.theme-fallout .practice-results,
.theme-fallout .vocab-add,
.theme-fallout .practice-settings {
  background-color: rgba(0, 20, 0, 0.7);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.theme-fallout .btn {
  border: 1px solid var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.theme-fallout .btn-primary {
  background-color: rgba(99, 255, 0, 0.2);
  color: var(--color-primary);
}

.theme-fallout .btn-primary:hover {
  background-color: rgba(99, 255, 0, 0.4);
}

.theme-fallout .btn-secondary {
  background-color: rgba(49, 152, 0, 0.3);
  color: var(--color-primary);
}

.theme-fallout .btn-secondary:hover {
  background-color: rgba(49, 152, 0, 0.5);
}

.theme-fallout .btn-danger {
  background-color: rgba(255, 42, 42, 0.3);
  color: #ff5a5a;
  border-color: #ff5a5a;
}

.theme-fallout .btn-danger:hover {
  background-color: rgba(255, 42, 42, 0.5);
}

.theme-fallout .vocab-list,
.theme-fallout .problem-words-list li,
.theme-fallout .history-table td,
.theme-fallout .history-table th {
  border-color: var(--color-border);
}

.theme-fallout .nav-btn {
  color: var(--color-primary);
  text-shadow: 0 0 8px rgba(99, 255, 0, 0.5);
}

.theme-fallout .nav-btn.active {
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
  text-shadow: 0 0 12px var(--color-primary);
}

.theme-fallout .vocab-list {
  background-color: rgba(0, 20, 0, 0.5);
}

.theme-fallout .vocab-item {
  border-bottom-color: var(--color-border);
}

.theme-fallout .progress-bar {
  background-color: rgba(49, 152, 0, 0.3);
}

.theme-fallout .progress {
  background-color: var(--color-primary);
  box-shadow: 0 0 10px var(--color-primary);
}

.theme-fallout .nav-btn:hover,
.theme-fallout a:hover {
  text-shadow: 0 0 15px var(--color-primary);
}

.theme-fallout .modal-content {
  background-color: rgba(0, 20, 0, 0.9);
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 20px rgba(99, 255, 0, 0.4);
}

.theme-fallout .theme-preview {
  transition: all 0.3s;
}

.theme-fallout .fallout-preview {
  box-shadow: 0 0 20px rgba(99, 255, 0, 0.4);
}

.fallout-preview {
  background-color: #0a0a0a;
  background-image: linear-gradient(
    to bottom,
    rgba(99, 255, 0, 0.1) 50%,
    rgba(0, 0, 0, 0) 51%
  );
  background-size: 100% 2px;
  position: relative;
}

.fallout-preview::before {
  content: "PIPBOY 3000";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #63ff00;
  font-family: "Roboto Mono", monospace;
  font-size: 1.5rem;
  text-shadow: 0 0 10px #63ff00;
  letter-spacing: 2px;
}

/* 
* Theme 2: Hello Kitty Style 
* Pastel colors, rounded elements, cute design
*/
.theme-kitty {
  --color-primary: #ff6b9e;
  --color-secondary: #72d4fd;
  --color-accent: #ffdf6b;
  --color-background: #fff2f9;
  --color-text: #5a5a5a;
  --color-text-light: #8a8a8a;
  --color-border: #ffd0e7;

  --color-button-primary: #ff6b9e;
  --color-button-secondary: #72d4fd;
  --color-button-danger: #ff6666;

  --border-radius-sm: 0.75rem;
  --border-radius-md: 1rem;
  --border-radius-lg: 1.5rem;

  --shadow-sm: 0 3px 10px rgba(255, 107, 158, 0.15);
  --shadow-md: 0 5px 15px rgba(255, 107, 158, 0.2);
  --shadow-lg: 0 10px 25px rgba(255, 107, 158, 0.25);

  font-family: "Roboto", sans-serif;
  background-color: var(--color-background);
}

.theme-kitty .logo,
.theme-kitty h1,
.theme-kitty h2,
.theme-kitty h3 {
  color: var(--color-primary);
}

.theme-kitty .btn {
  border-radius: 100px;
  font-weight: 600;
}

.theme-kitty .btn-primary {
  background-color: var(--color-button-primary);
  box-shadow: 0 4px 0 darken(#ff6b9e, 10%);
}

.theme-kitty .btn-secondary {
  background-color: var(--color-button-secondary);
  box-shadow: 0 4px 0 darken(#72d4fd, 10%);
}

.theme-kitty .btn-danger {
  background-color: var(--color-button-danger);
  box-shadow: 0 4px 0 darken(#ff6666, 10%);
}

.theme-kitty .btn:hover {
  transform: translateY(-2px);
}

.theme-kitty .btn:active {
  transform: translateY(2px);
}

.theme-kitty input,
.theme-kitty textarea,
.theme-kitty select {
  border: 2px solid var(--color-border);
  background-color: white;
  border-radius: var(--border-radius-md);
}

.theme-kitty .vocab-add,
.theme-kitty .practice-settings,
.theme-kitty .practice-card,
.theme-kitty .stat-card,
.theme-kitty .chart-container,
.theme-kitty .practice-feedback,
.theme-kitty .practice-results {
  background-color: white;
  box-shadow: var(--shadow-md);
  border-radius: var(--border-radius-lg);
  border: none;
}

.theme-kitty .vocab-list {
  background-color: white;
  box-shadow: var(--shadow-sm);
  border: none;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.theme-kitty .vocab-item {
  border-bottom: 2px dotted var(--color-border);
}

.theme-kitty .main-nav ul {
  border-bottom: 3px dotted var(--color-border);
}

.theme-kitty .nav-btn.active {
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
  font-weight: 700;
}

.theme-kitty .progress-bar {
  height: 12px;
  border-radius: 100px;
  background-color: #e0f7ff;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

.theme-kitty .progress {
  border-radius: 100px;
  background-color: var(--color-secondary);
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.25) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0.25) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: progress-stripe 1s linear infinite;
}

@keyframes progress-stripe {
  0% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 0 0;
  }
}

.theme-kitty .theme-preview {
  transition: all 0.3s;
}

.theme-kitty .kitty-preview {
  box-shadow: 0 5px 15px rgba(255, 107, 158, 0.3);
}

.kitty-preview {
  background-color: #fff2f9;
  background-image: radial-gradient(#ffd0e7 10%, transparent 11%),
    radial-gradient(#ffd0e7 10%, transparent 11%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
  position: relative;
}

.kitty-preview::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 50px;
  background-color: #fff;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.kitty-preview::after {
  content: "";
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 30px;
  background-color: transparent;
  border-radius: 50%;
  box-shadow: -20px -10px 0 #fff, 20px -10px 0 #fff;
}

/* 
* Theme 3: Minimalist Premium Style 
* Clean, elegant, spacious design
*/
.theme-minimal {
  --color-primary: #007aff;
  --color-secondary: #5ac8fa;
  --color-accent: #ff9500;
  --color-background: #f5f5f7;
  --color-text: #1d1d1f;
  --color-text-light: #86868b;
  --color-border: #d2d2d7;

  --color-button-primary: var(--color-primary);
  --color-button-secondary: #8e8e93;
  --color-button-danger: #ff3b30;

  --border-radius-sm: 0.5rem;
  --border-radius-md: 0.75rem;
  --border-radius-lg: 1rem;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.12);

  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--color-background);
}

.theme-minimal .logo {
  font-weight: 600;
  letter-spacing: -0.5px;
}

.theme-minimal h1,
.theme-minimal h2,
.theme-minimal h3 {
  font-weight: 600;
  letter-spacing: -0.5px;
}

.theme-minimal .btn {
  font-weight: 500;
  letter-spacing: -0.2px;
}

.theme-minimal .btn-primary {
  background-color: var(--color-button-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.theme-minimal .btn-primary:hover {
  background-color: color-mix(in srgb, var(--color-button-primary), #000 10%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.theme-minimal .btn-secondary {
  background-color: var(--color-button-secondary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.theme-minimal .btn-danger {
  background-color: var(--color-button-danger);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.theme-minimal input,
.theme-minimal textarea,
.theme-minimal select {
  border: 1px solid var(--color-border);
  background-color: white;
  transition: all 0.2s;
}

.theme-minimal input:focus,
.theme-minimal textarea:focus,
.theme-minimal select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

.theme-minimal .vocab-add,
.theme-minimal .practice-settings,
.theme-minimal .practice-feedback,
.theme-minimal .practice-results {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  box-shadow: var(--shadow-sm);
}

.theme-minimal .practice-card,
.theme-minimal .stat-card,
.theme-minimal .chart-container {
  background-color: white;
  box-shadow: var(--shadow-md);
  border: none;
}

.theme-minimal .vocab-list {
  background-color: white;
  box-shadow: var(--shadow-sm);
  border: none;
}

.theme-minimal .main-nav ul {
  border-bottom: 1px solid var(--color-border);
}

.theme-minimal .nav-btn {
  font-weight: 500;
  letter-spacing: -0.2px;
}

.theme-minimal .nav-btn.active {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  font-weight: 600;
}

.theme-minimal .modal-content {
  background-color: white;
  box-shadow: var(--shadow-lg);
  border: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.theme-minimal .theme-preview {
  transition: all 0.3s;
}

.theme-minimal .minimal-preview {
  box-shadow: var(--shadow-md);
}

.minimal-preview {
  background-color: #f5f5f7;
  position: relative;
}

.minimal-preview::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  height: 40px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.minimal-preview::after {
  content: "";
  position: absolute;
  top: 80px;
  left: 20px;
  right: 20px;
  height: 20px;
  background-color: #007aff;
  border-radius: 4px;
}

/* 
* Forest Retreat Theme 
* Naturinspirerat tema med jordnära färger och organiska former
*/

.theme-forest {
  --color-primary: #3a7d44;
  --color-secondary: #6b8f71;
  --color-accent: #d4a59a;
  --color-background: #f8f4e9;
  --color-text: #2d3a3a;
  --color-text-light: #6b8f71;
  --color-border: #c8c8b5;

  --color-button-primary: #3a7d44;
  --color-button-secondary: #6b8f71;
  --color-button-danger: #c1666b;

  --border-radius-sm: 0.5rem;
  --border-radius-md: 1rem;
  --border-radius-lg: 1.5rem;

  --shadow-sm: 0 2px 8px rgba(58, 125, 68, 0.1);
  --shadow-md: 0 4px 12px rgba(58, 125, 68, 0.15);
  --shadow-lg: 0 8px 24px rgba(58, 125, 68, 0.2);

  font-family: "Lora", Georgia, serif;
  background-color: var(--color-background);
  color: var(--color-text);
  line-height: 1.6;
}

.theme-forest .logo,
.theme-forest h1,
.theme-forest h2,
.theme-forest h3 {
  color: var(--color-primary);
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

.theme-forest .btn {
  border-radius: 100px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  transition: all 0.3s ease;
}

.theme-forest .btn-primary {
  background-color: var(--color-button-primary);
  color: white;
  box-shadow: 0 2px 0 darken(#3a7d44, 10%);
}

.theme-forest .btn-primary:hover {
  background-color: color-mix(in srgb, var(--color-button-primary), #000 10%);
  transform: translateY(-2px);
}

.theme-forest .btn-secondary {
  background-color: var(--color-button-secondary);
  color: white;
  box-shadow: 0 2px 0 darken(#6b8f71, 10%);
}

.theme-forest .btn-danger {
  background-color: var(--color-button-danger);
  color: white;
  box-shadow: 0 2px 0 darken(#c1666b, 10%);
}

.theme-forest input,
.theme-forest textarea,
.theme-forest select {
  background-color: white;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.theme-forest input:focus,
.theme-forest textarea:focus,
.theme-forest select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(58, 125, 68, 0.2);
}

.theme-forest .vocab-add,
.theme-forest .practice-settings,
.theme-forest .practice-card,
.theme-forest .stat-card,
.theme-forest .chart-container,
.theme-forest .practice-feedback,
.theme-forest .practice-results {
  background-color: white;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--border-radius-md);
}

.theme-forest .vocab-list {
  background-color: white;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
}

.theme-forest .vocab-item {
  border-bottom: 1px dashed var(--color-border);
}

.theme-forest .main-nav ul {
  border-bottom: 2px solid var(--color-border);
}

.theme-forest .nav-btn {
  color: var(--color-text-light);
  font-family: "Montserrat", sans-serif;
}

.theme-forest .nav-btn.active {
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
  font-weight: 600;
}

.theme-forest .nav-btn:hover {
  color: var(--color-primary);
}

.theme-forest .progress-bar {
  background-color: #e0e8df;
  border-radius: 100px;
  height: 10px;
}

.theme-forest .progress {
  background-color: var(--color-primary);
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.3) 100%
  );
  background-size: 200% 100%;
  animation: progress-shimmer 2s linear infinite;
}

@keyframes progress-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.theme-forest .modal-content {
  background-color: white;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.theme-forest .close-modal {
  color: var(--color-text-light);
}

.theme-forest .close-modal:hover {
  color: var(--color-primary);
}

/* Förhandsvisning för tema-väljaren */
.forest-preview {
  background-color: var(--color-background);
  background-image: linear-gradient(
      45deg,
      var(--color-border) 25%,
      transparent 25%
    ),
    linear-gradient(-45deg, var(--color-border) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-border) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-border) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  position: relative;
}

.forest-preview::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: var(--color-primary);
  border-radius: 50%;
  opacity: 0.3;
}

.forest-preview::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 30%;
  width: 20px;
  height: 20px;
  background-color: var(--color-secondary);
  border-radius: 50%;
  opacity: 0.3;
}

/* Texturer och detaljer */
.theme-forest .vocab-add,
.theme-forest .practice-settings {
  background-image: radial-gradient(
      circle at 10% 20%,
      rgba(214, 228, 212, 0.8) 0%,
      transparent 20%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(214, 228, 212, 0.8) 0%,
      transparent 20%
    );
}

.theme-forest .practice-card {
  position: relative;
  overflow: hidden;
}

.theme-forest .practice-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: radial-gradient(
    circle,
    rgba(107, 143, 113, 0.05) 0%,
    transparent 70%
  );
  z-index: 0;
}

.theme-forest .practice-card > * {
  position: relative;
  z-index: 1;
}

/* 
* Midnight Galaxy Theme
* Mörkt tema med space-inspirerade element och djupa gradienter
*/

.theme-galaxy {
  --color-primary: #8a2be2;
  --color-secondary: #00bfff;
  --color-accent: #ff69b4;
  --color-background: #0f0524;
  --color-text: #e6e6fa;
  --color-text-light: #b19cd9;
  --color-border: #2a1050;

  --color-button-primary: #8a2be2;
  --color-button-secondary: #00bfff;
  --color-button-danger: #ff1493;

  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  --shadow-sm: 0 0 8px rgba(138, 43, 226, 0.3);
  --shadow-md: 0 0 16px rgba(138, 43, 226, 0.4);
  --shadow-lg: 0 0 24px rgba(138, 43, 226, 0.5);

  font-family: "Montserrat", sans-serif;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  color: var(--color-text);
  line-height: 1.6;
}

.theme-galaxy::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
      white,
      rgba(255, 255, 255, 0.2) 1px,
      transparent 1px
    ),
    radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 30px 30px, 60px 60px;
  background-position: 0 0, 30px 30px;
  pointer-events: none;
  z-index: -1;
}

.theme-galaxy .logo,
.theme-galaxy h1,
.theme-galaxy h2,
.theme-galaxy h3 {
  color: var(--color-primary);
  text-shadow: 0 0 8px rgba(138, 43, 226, 0.7);
  font-weight: 700;
  letter-spacing: 1px;
}

.theme-galaxy .btn {
  border: none;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.theme-galaxy .btn-primary {
  background-color: var(--color-button-primary);
  color: white;
}

.theme-galaxy .btn-primary:hover {
  background-color: color-mix(in srgb, var(--color-button-primary), white 15%);
  box-shadow: 0 0 20px var(--color-primary);
  transform: translateY(-2px);
}

.theme-galaxy .btn-secondary {
  background-color: var(--color-button-secondary);
  color: #0f0524;
}

.theme-galaxy .btn-secondary:hover {
  background-color: color-mix(
    in srgb,
    var(--color-button-secondary),
    white 15%
  );
  box-shadow: 0 0 20px var(--color-secondary);
}

.theme-galaxy .btn-danger {
  background-color: var(--color-button-danger);
  color: white;
}

.theme-galaxy .btn-danger:hover {
  background-color: color-mix(in srgb, var(--color-button-danger), white 15%);
  box-shadow: 0 0 20px var(--color-button-danger);
}

.theme-galaxy input,
.theme-galaxy textarea,
.theme-galaxy select {
  background-color: rgba(42, 16, 80, 0.5);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: all 0.3s ease;
}

.theme-galaxy input:focus,
.theme-galaxy textarea:focus,
.theme-galaxy select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(138, 43, 226, 0.3);
  outline: none;
}

.theme-galaxy .vocab-add,
.theme-galaxy .practice-settings,
.theme-galaxy .practice-card,
.theme-galaxy .stat-card,
.theme-galaxy .chart-container,
.theme-galaxy .practice-feedback,
.theme-galaxy .practice-results {
  background-color: rgba(42, 16, 80, 0.3);
  border: 1px solid var(--color-primary);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(5px);
}

.theme-galaxy .vocab-list {
  background-color: rgba(42, 16, 80, 0.3);
  border: 1px solid var(--color-primary);
}

.theme-galaxy .vocab-item {
  border-bottom: 1px solid var(--color-border);
}

.theme-galaxy .main-nav ul {
  border-bottom: 1px solid var(--color-border);
}

.theme-galaxy .nav-btn {
  color: var(--color-text-light);
  text-shadow: 0 0 4px rgba(138, 43, 226, 0.5);
}

.theme-galaxy .nav-btn.active {
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
  text-shadow: 0 0 8px var(--color-primary);
}

.theme-galaxy .nav-btn:hover {
  color: var(--color-secondary);
  text-shadow: 0 0 8px var(--color-secondary);
}

.theme-galaxy .progress-bar {
  background-color: rgba(42, 16, 80, 0.5);
  border-radius: var(--border-radius-lg);
}

.theme-galaxy .progress {
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-secondary) 50%,
    var(--color-accent) 100%
  );
  background-size: 200% 100%;
  animation: progress-gradient 3s ease infinite;
}

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

.theme-galaxy .modal-content {
  background-color: rgba(15, 5, 36, 0.95);
  border: 1px solid var(--color-primary);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}

.theme-galaxy .close-modal {
  color: var(--color-text-light);
}

.theme-galaxy .close-modal:hover {
  color: var(--color-primary);
  text-shadow: 0 0 8px var(--color-primary);
}

/* Förhandsvisning för tema-väljaren */
.galaxy-preview {
  background: radial-gradient(ellipse at center, #2a1050 0%, #0f0524 100%);
  position: relative;
  overflow: hidden;
}

.galaxy-preview::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
      circle at 20% 30%,
      rgba(138, 43, 226, 0.4) 0%,
      transparent 20%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(0, 191, 255, 0.4) 0%,
      transparent 20%
    );
}

.galaxy-preview::after {
  content: "✦";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: var(--color-primary);
  text-shadow: 0 0 10px var(--color-primary);
}

/* 
* Cyber Neon Theme
* Högteknologiskt tema med mörk bakgrund och neonfärger
*/

.theme-cyber {
  --color-primary: #00f0ff;
  --color-secondary: #ff00aa;
  --color-accent: #ffcc00;
  --color-background: #0a0a12;
  --color-text: #ffffff;
  --color-text-light: #b0b0ff;
  --color-border: #303048;

  --color-button-primary: #00f0ff;
  --color-button-secondary: #ff00aa;
  --color-button-danger: #ff3333;

  --border-radius-sm: 0;
  --border-radius-md: 2px;
  --border-radius-lg: 4px;

  --shadow-sm: 0 0 8px rgba(0, 240, 255, 0.3);
  --shadow-md: 0 0 16px rgba(0, 240, 255, 0.4);
  --shadow-lg: 0 0 24px rgba(0, 240, 255, 0.5);

  font-family: "Rajdhani", "Courier New", monospace;
  background-color: var(--color-background);
  background-image: linear-gradient(
      rgba(0, 240, 255, 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--color-text);
  line-height: 1.5;
}

.theme-cyber .logo,
.theme-cyber h1,
.theme-cyber h2,
.theme-cyber h3 {
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.theme-cyber .btn {
  border: 2px solid currentColor;
  background-color: transparent;
  color: currentColor;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
  border-radius: var(--border-radius-sm);
}

.theme-cyber .btn-primary {
  color: var(--color-button-primary);
}

.theme-cyber .btn-primary:hover {
  background-color: rgba(0, 240, 255, 0.1);
  box-shadow: 0 0 20px var(--color-primary);
  text-shadow: 0 0 10px var(--color-primary);
}

.theme-cyber .btn-secondary {
  color: var(--color-button-secondary);
}

.theme-cyber .btn-secondary:hover {
  background-color: rgba(255, 0, 170, 0.1);
  box-shadow: 0 0 20px var(--color-secondary);
  text-shadow: 0 0 10px var(--color-secondary);
}

.theme-cyber .btn-danger {
  color: var(--color-button-danger);
}

.theme-cyber .btn-danger:hover {
  background-color: rgba(255, 51, 51, 0.1);
  box-shadow: 0 0 20px var(--color-button-danger);
  text-shadow: 0 0 10px var(--color-button-danger);
}

.theme-cyber input,
.theme-cyber textarea,
.theme-cyber select {
  background-color: rgba(48, 48, 72, 0.5);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
}

.theme-cyber input:focus,
.theme-cyber textarea:focus,
.theme-cyber select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.3);
  outline: none;
}

.theme-cyber .vocab-add,
.theme-cyber .practice-settings,
.theme-cyber .practice-card,
.theme-cyber .stat-card,
.theme-cyber .chart-container,
.theme-cyber .practice-feedback,
.theme-cyber .practice-results {
  background-color: rgba(48, 48, 72, 0.5);
  border: 1px solid var(--color-primary);
  box-shadow: var(--shadow-md);
}

.theme-cyber .vocab-list {
  background-color: rgba(48, 48, 72, 0.5);
  border: 1px solid var(--color-primary);
}

.theme-cyber .vocab-item {
  border-bottom: 1px solid var(--color-border);
}

.theme-cyber .main-nav ul {
  border-bottom: 1px solid var(--color-primary);
}

.theme-cyber .nav-btn {
  color: var(--color-text-light);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.theme-cyber .nav-btn.active {
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
  text-shadow: 0 0 8px var(--color-primary);
}

.theme-cyber .nav-btn:hover {
  color: var(--color-secondary);
}

.theme-cyber .progress-bar {
  background-color: rgba(48, 48, 72, 0.8);
  height: 6px;
}

.theme-cyber .progress {
  background-color: var(--color-primary);
  box-shadow: 0 0 10px var(--color-primary);
}

.theme-cyber .modal-content {
  background-color: rgba(10, 10, 18, 0.95);
  border: 1px solid var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.theme-cyber .close-modal {
  color: var(--color-text-light);
  font-weight: 700;
}

.theme-cyber .close-modal:hover {
  color: var(--color-primary);
  text-shadow: 0 0 8px var(--color-primary);
}

/* Förhandsvisning för tema-väljaren */
.cyber-preview {
  background-color: var(--color-background);
  background-image: linear-gradient(rgba(0, 240, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.1) 1px, transparent 1px);
  background-size: 10px 10px;
  position: relative;
}

.cyber-preview::before {
  content: "010101";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Courier New", monospace;
  font-size: 1.2rem;
  color: var(--color-primary);
  letter-spacing: 2px;
  opacity: 0.7;
}

.cyber-preview::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 30%;
  width: 10px;
  height: 10px;
  background-color: var(--color-secondary);
  box-shadow: 0 0 5px var(--color-secondary), 0 0 10px var(--color-secondary);
}