/* ============================================================
   🎛️ KUSTOMOINTI-MODALIN PUUPUBITYYLI & TIIVIS NÄKYMÄ
   ============================================================ */

/* ============================================================
   🎛️ KUSTOMOINTISIVUN & KORTIN TAKAPUOLEN DYNAMISESTI SOVITETUT TYYLIT
   ============================================================ */

/* Otsikoplakaati */
.custom-header-card {
  padding: 8px 12px !important;
  margin-bottom: 8px !important;
  background-color: #2b1408 !important;
  background-image: 
    radial-gradient(ellipse at 50% 15%, rgba(180, 83, 9, 0.45) 0%, rgba(15, 7, 3, 0.98) 100%),
    linear-gradient(180deg, #4a2313 0%, #2e1208 50%, #170803 100%) !important;
  border: 2px solid #6e3719 !important;
  border-radius: 10px !important;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px #d97706,
    inset 0 0 0 2px #1f0b04 !important;
  position: relative !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
}

.custom-header-card h3 {
  font-family: 'Oswald', sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #fef08a !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 4px rgba(245, 158, 11, 0.25) !important;
  margin: 0 !important;
}

/* Sisältöalue kortin kääntöpuolella */
.custom-parchment-body {
  background: rgba(255, 255, 255, 0.88) linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 241, 232, 0.85) 100%) !important;
  border: 1.5px solid #2B2B2B !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  margin-bottom: 8px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(4px) !important;
}

.custom-parchment-body label {
  margin-top: 4px !important;
  margin-bottom: 2px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  color: #2B2B2B !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

.card-back select {
  padding: 5px 8px !important;
  margin-bottom: 4px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  border: 1px solid #2B2B2B !important;
  background: linear-gradient(180deg, #ffffff 0%, #F5F1E8 100%) !important;
  color: #2B2B2B !important;
  font-weight: 600 !important;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.12) !important;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease !important;
}

/* TEEMAKOHTAISET DYNAMIIKAT PUDOTUSVALIKOILLE (Sijainti & Titteli) */
.theme-green .card-back select {
  border-color: #2E5E4E !important;
  background: linear-gradient(180deg, #ffffff 0%, #e1ebe7 100%) !important;
  color: #122820 !important;
}
.theme-red .card-back select {
  border-color: #7A2E3A !important;
  background: linear-gradient(180deg, #ffffff 0%, #ebd6d9 100%) !important;
  color: #300c14 !important;
}
.theme-gold .card-back select {
  border-color: #b45309 !important;
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 100%) !important;
  color: #451a03 !important;
}
.theme-black .card-back select {
  border-color: #404040 !important;
  background: linear-gradient(180deg, #ffffff 0%, #e5e5e5 100%) !important;
  color: #171717 !important;
}
.theme-blue .card-back select {
  border-color: #2563eb !important;
  background: linear-gradient(180deg, #ffffff 0%, #dbeafe 100%) !important;
  color: #172554 !important;
}
.theme-silver .card-back select {
  border-color: #475569 !important;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%) !important;
  color: #0f172a !important;
}
.theme-diamond .card-back select {
  border-color: #0284c7 !important;
  background: linear-gradient(180deg, #ffffff 0%, #e0f2fe 100%) !important;
  color: #082f49 !important;
}
.theme-bronze .card-back select {
  border-color: #8a4316 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6ece2 100%) !important;
  color: #361202 !important;
}
.theme-yellow .card-back select {
  border-color: #ca8a04 !important;
  background: linear-gradient(180deg, #ffffff 0%, #fef9c3 100%) !important;
  color: #422006 !important;
}

/* Avatar-esikatselun hienosäätö linjaan tekstin ja napin kanssa */
#custAvatarPreview {
  margin-top: 5px !important;
}

/* Haitariohjaimet (Kortin tyyli & Väriteema - Pienennetty & Siistitty) */
.custom-accordion-header {
  font-family: 'Oswald', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  color: #F5F1E8 !important;
  text-align: center !important;
  margin: 4px 0 2px 0 !important;
  padding: 3px 6px !important;
  background: linear-gradient(180deg, #2B2B2B 0%, #171717 100%) !important;
  border: 1px solid #46A28B !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  user-select: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  box-shadow: 0 1.5px 3px rgba(0,0,0,0.3) !important;
  transition: all 0.2s ease !important;
}

.custom-accordion-header:hover {
  background: linear-gradient(180deg, #46A28B 0%, #2c705f 100%) !important;
  border-color: #25595C !important;
  color: #ffffff !important;
}

.accordion-arrow {
  font-size: 9px !important;
  color: #f59e0b !important;
  line-height: 1 !important;
}

/* Teema- ja tyyliruudukko (Sallii piilottamisen / JS-toggletoiminnon & Animaatiot) */
.theme-grid {
  display: flex;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, margin-bottom 0.3s ease, padding 0.3s ease;
}

.theme-grid.open {
  max-height: 250px; /* Riittävä maksimikorkeus jotta animaatio pelaa nätisti */
  opacity: 1;
  margin-bottom: 8px !important;
  padding: 4px 0 !important;
  overflow: visible; /* Sallii aktiivisten laatikoiden teemahehku-varjojen näkymisen */
  pointer-events: auto;
}

.theme-box {
  background: transparent !important;
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  padding: 4px 4px 3px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  position: relative !important;
}

.theme-box-label {
  font-size: 8px !important;
  font-weight: 600 !important;
  color: #6b6b6b !important;
  text-align: center !important;
  line-height: 1.15 !important;
  width: 48px !important;
  max-width: 48px !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

.theme-box.locked .theme-box-label {
  opacity: 0.65 !important;
}

.theme-circle {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  margin: 0 auto !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-sizing: border-box !important;
}

.theme-box:hover .theme-circle {
  transform: scale(1.1) !important;
}

.theme-box.active {
  border-color: #d97706 !important;
  background: rgba(217, 119, 6, 0.18) !important;
  box-shadow: 0 0 8px rgba(217, 119, 6, 0.4) !important;
}

.theme-box.active .theme-circle {
  transform: scale(1.04) !important;
}

.theme-box.locked {
  opacity: 0.5 !important;
}

.theme-box.locked .theme-circle {
  filter: grayscale(40%) !important;
}

.lock-icon {
  display: none !important;
  font-size: 10px !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)) !important;
  line-height: 1 !important;
}

.theme-box.locked .lock-icon {
  display: inline-block !important;
}

.theme-box.locked .koriste-preview-icon {
  display: none !important;
}

.lock-req-info {
  font-size: 10px !important;
  color: #7f1d1d !important;
  background: #fee2e2 !important;
  border: 1px solid #f87171 !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  margin-top: 3px !important;
  margin-bottom: 6px !important;
  text-align: center !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

/* Otsikkorivi & pudotusvalikko näytettäville tilastoille (Keskitetty) */
.stats-header-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-top: 6px !important;
  margin-bottom: 4px !important;
  width: 100% !important;
}

.stats-header-row label {
  margin: 0 0 4px 0 !important;
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}

/* Pelivalintanapit ("NÄYTETTÄVÄT TILASTOT") */
.cust-game-btn-group {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 2px !important;
}

.cust-game-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F1E8 100%) !important;
  border: 1.5px solid #2B2B2B !important;
  color: #2B2B2B !important;
  cursor: pointer !important;
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.cust-game-btn:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #E8E2D5 100%) !important;
  transform: translateY(-1px) !important;
}

.cust-game-btn.active {
  background: linear-gradient(180deg, #2B2B2B 0%, #171717 100%) !important;
  border-color: #46A28B !important;
  color: #F5F1E8 !important;
  box-shadow: 0 0 8px rgba(70, 162, 139, 0.5), inset 0 1px 0 rgba(245, 241, 232, 0.3) !important;
  transform: scale(1.05) !important;
}

.cust-game-icon {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  opacity: 0.65 !important;
  transition: opacity 0.2s ease, stroke 0.2s ease, filter 0.2s ease !important;
}

.cust-game-btn:hover .cust-game-icon {
  opacity: 0.9 !important;
}

.cust-game-btn.active .cust-game-icon {
  opacity: 1 !important;
  filter: drop-shadow(0 0 4px rgba(254, 240, 138, 0.8)) !important;
  stroke: #fef08a !important;
}

/* Aktiivinen pelinvalintanappi syttyy pelin OMASSA brändivärissä tumman vihreän sijaan */
.cust-game-btn[data-game="kimble"].active {
  background: linear-gradient(180deg, #37467b 0%, #253359 100%) !important;
  border-color: #6478b0 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(55, 70, 123, 0.6), inset 0 1px 0 rgba(245, 241, 232, 0.3) !important;
}
.cust-game-btn[data-game="kimble"].active .cust-game-icon {
  stroke: #ffffff !important;
  filter: drop-shadow(0 0 4px rgba(100, 120, 176, 0.8)) !important;
}

.cust-game-btn[data-game="yatzy"].active {
  background: linear-gradient(180deg, #8f498a 0%, #673363 100%) !important;
  border-color: #c17db8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(143, 73, 138, 0.6), inset 0 1px 0 rgba(245, 241, 232, 0.3) !important;
}
.cust-game-btn[data-game="yatzy"].active .cust-game-icon {
  stroke: #ffffff !important;
  filter: drop-shadow(0 0 4px rgba(193, 125, 184, 0.8)) !important;
}

.cust-game-btn[data-game="alias"].active {
  background: linear-gradient(180deg, #8f4954 0%, #68323c 100%) !important;
  border-color: #c17d87 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(143, 73, 84, 0.6), inset 0 1px 0 rgba(245, 241, 232, 0.3) !important;
}
.cust-game-btn[data-game="alias"].active .cust-game-icon {
  stroke: #ffffff !important;
  filter: drop-shadow(0 0 4px rgba(193, 125, 135, 0.8)) !important;
}

.cust-game-btn[data-game="afrikan_tahti"].active {
  background: linear-gradient(180deg, #f1cb64 0%, #c89b3c 100%) !important;
  border-color: #553a13 !important;
  color: #553a13 !important;
  box-shadow: 0 0 8px rgba(241, 203, 100, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.cust-game-btn[data-game="afrikan_tahti"].active .cust-game-icon {
  stroke: #553a13 !important;
  filter: drop-shadow(0 0 2px rgba(85, 58, 19, 0.5)) !important;
}

/* Off-On Tilastoplakaati ja Kytkimet (Custom Stats Plaque & Switches) */
.custom-stats-plaque {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px 3px !important;
  padding: 8px 4px !important;
  margin-bottom: 8px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F1E8 100%) !important;
  border: 1.5px solid #2B2B2B !important;
  border-radius: 8px !important;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  transition: all 0.3s ease !important;
}

.custom-stats-plaque .switch-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: center !important;
  padding: 1px 0 !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  color: #2B2B2B !important;
  gap: 3px !important;
  border-bottom: none !important;
  cursor: pointer !important;
  user-select: none !important;
}

.custom-stats-plaque .switch-row span {
  font-family: 'Inter', sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  color: #2B2B2B !important;
  line-height: 1.1 !important;
  min-height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  pointer-events: none !important;
}

.switch {
  position: relative !important;
  display: inline-block !important;
  width: 28px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

.switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

.slider {
  position: absolute !important;
  cursor: pointer !important;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #2B2B2B !important;
  transition: background-color 0.2s ease !important;
  border-radius: 15px !important;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.slider:before {
  position: absolute !important;
  content: "" !important;
  height: 11px !important;
  width: 11px !important;
  left: 2px !important;
  bottom: 2px !important;
  background-color: #ffffff !important;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  border-radius: 50% !important;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.switch input:checked + .slider {
  background-color: #b45309 !important;
}

.switch input:checked + .slider:before {
  transform: translateX(13px) !important;
}

/* Modal-painikkeet kortin takapuolella */
#btn-avatar-upload {
  padding: 4px 10px !important;
  font-size: 10px !important;
  border-radius: 6px !important;
  margin: 0 !important;
  width: auto !important;
  font-weight: 700 !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
  background: linear-gradient(180deg, #8a4316 0%, #6e2c08 100%) !important;
  border: 1px solid #d97706 !important;
  color: #fef08a !important;
}

#btn-avatar-upload:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.1) !important;
}

.card-back #btnSaveCustom {
  padding: 8px 12px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
  margin-top: 4px !important;
  background: linear-gradient(180deg, #2c705f 0%, #25595C 100%) !important;
  border: 1px solid #25595C !important;
  color: #F5F1E8 !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35) !important;
}

.card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #46A28B 0%, #2c705f 100%) !important;
  color: #ffffff !important;
}

.card-back .btn-secondary {
  margin-top: 4px !important;
  padding: 7px 12px !important;
  font-size: 10.5px !important;
  border-radius: 8px !important;
  background: #F5F1E8 !important;
  border: 1px solid #2B2B2B !important;
  color: #2B2B2B !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
}

.card-back .btn-secondary:hover {
  background: #2B2B2B !important;
  color: #F5F1E8 !important;
  border-color: #2B2B2B !important;
}

/* ============================================================
   🎨 TEEMAKOHTAISET DYNAMIIKAT KORTIN TAKAPUOLELLE (.card-back)
   ============================================================ */

/* 1. GREEN / VIHREÄ TEEMA (#2c705f) */
.theme-green .card-back {
 background: linear-gradient(180deg, #ffffff 0%, #F8FBF9 35%, #E1EBE7 70%, #A8C7BB 100%) !important;
 border-color: #2c705f !important;
 box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 0 1px #2c705f !important;
}
.theme-green .custom-header-card {
 background: linear-gradient(180deg, #2c705f 0%, #1d4e42 60%, #13352b 100%) !important;
 border-color: #2c705f !important;
 box-shadow: inset 0 0 0 1px #47a292, 0 4px 10px rgba(0,0,0,0.4) !important;
}
.theme-green .custom-header-card h3 { color: #dcfce7 !important; text-shadow: 0 0 4px rgba(71, 162, 146, 0.4) !important; }
.theme-green .custom-accordion-header {
 background: linear-gradient(180deg, #2c705f 0%, #1d4e42 100%) !important;
 border-color: #13352b !important;
 color: #dcfce7 !important;
}
.theme-green .custom-accordion-header:hover {
 background: linear-gradient(180deg, #388979 0%, #225c50 100%) !important;
 border-color: #47a292 !important;
 color: #ffffff !important;
}
.theme-green .custom-accordion-header .accordion-arrow { color: #47a292 !important; }
.theme-green .custom-stats-plaque {
 background: linear-gradient(180deg, #47a292 0%, #2c705f 100%) !important;
 border-color: #1d4e42 !important;
}
.theme-green .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-green .custom-stats-plaque .switch input:checked + .slider { background-color: #2c705f !important; }
.theme-green .card-back #btnSaveCustom,
.theme-green #btn-avatar-upload {
 background: linear-gradient(180deg, #2c705f 0%, #1d4e42 100%) !important;
 border: 1px solid #47a292 !important;
 color: #ffffff !important;
}
.theme-green .card-back #btnSaveCustom:hover:not(:disabled) {
 background: linear-gradient(180deg, #388979 0%, #225c50 100%) !important;
 color: #ffffff !important;
}
.theme-green .card-back .btn-secondary {
 background: linear-gradient(180deg, #1d4e42 0%, #13352b 100%) !important;
 border: 1px solid #2c705f !important;
 color: #47a292 !important;
}
.theme-green .card-back .btn-secondary:hover {
 background: linear-gradient(180deg, #2c705f 0%, #184237 100%) !important;
 color: #dcfce7 !important;
 border-color: #47a292 !important;
}

/* 2. RED / PUNAINEN TEEMA (#8f4954) */
.theme-red .card-back {
 background: linear-gradient(180deg, #ffffff 0%, #FBF4F5 35%, #EBD6D9 70%, #CFA4AB 100%) !important;
 border-color: #8f4954 !important;
 box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 0 1px #8f4954 !important;
}
.theme-red .custom-header-card {
 background: linear-gradient(180deg, #8f4954 0%, #68323c 60%, #4a1f26 100%) !important;
 border-color: #8f4954 !important;
 box-shadow: inset 0 0 0 1px #bc6c78, 0 4px 10px rgba(0,0,0,0.4) !important;
}
.theme-red .custom-header-card h3 { color: #fee2e2 !important; text-shadow: 0 0 4px rgba(188, 108, 120, 0.4) !important; }
.theme-red .custom-accordion-header {
 background: linear-gradient(180deg, #8f4954 0%, #68323c 100%) !important;
 border-color: #4a1f26 !important;
 color: #fee2e2 !important;
}
.theme-red .custom-accordion-header:hover {
 background: linear-gradient(180deg, #a95a66 0%, #7d3b47 100%) !important;
 border-color: #bc6c78 !important;
 color: #ffffff !important;
}
.theme-red .custom-accordion-header .accordion-arrow { color: #bc6c78 !important; }
.theme-red .custom-stats-plaque {
 background: linear-gradient(180deg, #bc6c78 0%, #8f4954 100%) !important;
 border-color: #68323c !important;
}
.theme-red .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-red .custom-stats-plaque .switch input:checked + .slider { background-color: #8f4954 !important; }
.theme-red .card-back #btnSaveCustom,
.theme-red #btn-avatar-upload {
 background: linear-gradient(180deg, #8f4954 0%, #68323c 100%) !important;
 border: 1px solid #bc6c78 !important;
 color: #ffffff !important;
}
.theme-red .card-back #btnSaveCustom:hover:not(:disabled) {
 background: linear-gradient(180deg, #a95a66 0%, #7d3b47 100%) !important;
 color: #ffffff !important;
}
.theme-red .card-back .btn-secondary {
 background: linear-gradient(180deg, #68323c 0%, #4a1f26 100%) !important;
 border: 1px solid #8f4954 !important;
 color: #bc6c78 !important;
}
.theme-red .card-back .btn-secondary:hover {
 background: linear-gradient(180deg, #8f4954 0%, #52242c 100%) !important;
 color: #fee2e2 !important;
 border-color: #bc6c78 !important;
}

/* 3. GOLD / KULTA TEEMA (#D4A017) */
.theme-gold .card-back {
  background: linear-gradient(180deg, #ffffff 0%, #fffbeb 35%, #fef08a 70%, #fde047 100%) !important;
  border-color: #78350f !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.7), inset 0 0 0 1px #D4A017 !important;
}
.theme-gold .custom-header-card {
  background: linear-gradient(180deg, #b45309 0%, #f59e0b 30%, #d97706 60%, #582404 100%) !important;
  border-color: #fef08a !important;
  box-shadow: inset 0 0 0 1px #fef08a, 0 4px 10px rgba(0,0,0,0.4) !important;
}
.theme-gold .custom-header-card h3 { color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important; }
.theme-gold .custom-accordion-header {
  background: linear-gradient(180deg, #b45309 0%, #78350f 100%) !important;
  border-color: #451a03 !important;
  color: #fef08a !important;
}
.theme-gold .custom-accordion-header:hover {
  background: linear-gradient(180deg, #d97706 0%, #92400e 100%) !important;
  border-color: #fde047 !important;
  color: #ffffff !important;
}
.theme-gold .custom-accordion-header .accordion-arrow { color: #fef08a !important; }
.theme-gold .custom-stats-plaque {
  background: linear-gradient(180deg, #fde047 0%, #b45309 100%) !important;
  border-color: #78350f !important;
}
.theme-gold .custom-stats-plaque .switch-row span { color: #2e1102 !important; }
.theme-gold .custom-stats-plaque .switch input:checked + .slider { background-color: #b45309 !important; }
.theme-gold .card-back #btnSaveCustom,
.theme-gold #btn-avatar-upload {
  background: linear-gradient(180deg, #d97706 0%, #92400e 100%) !important;
  border: 1px solid #fef08a !important;
  color: #ffffff !important;
}
.theme-gold .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%) !important;
  color: #ffffff !important;
}
.theme-gold .card-back .btn-secondary {
  background: linear-gradient(180deg, #78350f 0%, #451a03 100%) !important;
  border: 1px solid #d97706 !important;
  color: #fef08a !important;
}
.theme-gold .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #b45309 0%, #582404 100%) !important;
  color: #ffffff !important;
  border-color: #fef08a !important;
}

/* 4. BLACK / MUSTA TEEMA (#2B2B2B) */
.theme-black .card-back {
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 35%, #e5e5e5 70%, #d4d4d4 100%) !important;
  border-color: #171717 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.85), inset 0 0 0 1px #525252 !important;
}
.theme-black .custom-header-card {
  background: linear-gradient(180deg, #404040 0%, #262626 60%, #0a0a0a 100%) !important;
  border-color: #525252 !important;
  box-shadow: inset 0 0 0 1px #a3a3a3, 0 4px 10px rgba(0,0,0,0.5) !important;
}
.theme-black .custom-header-card h3 { color: #ffffff !important; text-shadow: 0 0 4px rgba(255, 255, 255, 0.4) !important; }
.theme-black .custom-accordion-header {
  background: linear-gradient(180deg, #404040 0%, #262626 100%) !important;
  border-color: #171717 !important;
  color: #ffffff !important;
}
.theme-black .custom-accordion-header:hover {
  background: linear-gradient(180deg, #525252 0%, #333333 100%) !important;
  border-color: #a3a3a3 !important;
  color: #ffffff !important;
}
.theme-black .custom-accordion-header .accordion-arrow { color: #a3a3a3 !important; }
.theme-black .custom-stats-plaque {
  background: linear-gradient(180deg, #a3a3a3 0%, #404040 100%) !important;
  border-color: #262626 !important;
}
.theme-black .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-black .custom-stats-plaque .switch input:checked + .slider { background-color: #171717 !important; }
.theme-black .card-back #btnSaveCustom,
.theme-black #btn-avatar-upload {
  background: linear-gradient(180deg, #404040 0%, #171717 100%) !important;
  border: 1px solid #a3a3a3 !important;
  color: #ffffff !important;
}
.theme-black .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #525252 0%, #262626 100%) !important;
  color: #ffffff !important;
}
.theme-black .card-back .btn-secondary {
  background: linear-gradient(180deg, #262626 0%, #0a0a0a 100%) !important;
  border: 1px solid #525252 !important;
  color: #e5e5e5 !important;
}
.theme-black .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #404040 0%, #171717 100%) !important;
  color: #ffffff !important;
  border-color: #a3a3a3 !important;
}

/* 5. BLUE / SININEN TEEMA */
.theme-blue .card-back {
  background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 35%, #dbeafe 70%, #bfdbfe 100%) !important;
  border-color: #1e40af !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 0 1px #1e40af !important;
}
.theme-blue .custom-header-card {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 60%, #172554 100%) !important;
  border-color: #60a5fa !important;
}
.theme-blue .custom-header-card h3 { color: #dbeafe !important; }
.theme-blue .custom-accordion-header {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  border-color: #172554 !important;
  color: #dbeafe !important;
}
.theme-blue .custom-accordion-header:hover {
  background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%) !important;
  border-color: #60a5fa !important;
  color: #ffffff !important;
}
.theme-blue .custom-accordion-header .accordion-arrow { color: #60a5fa !important; }
.theme-blue .custom-stats-plaque {
  background: linear-gradient(180deg, #93c5fd 0%, #1d4ed8 100%) !important;
  border-color: #172554 !important;
}
.theme-blue .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-blue .card-back #btnSaveCustom,
.theme-blue #btn-avatar-upload {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  border: 1px solid #60a5fa !important;
  color: #ffffff !important;
}
.theme-blue .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%) !important;
  color: #ffffff !important;
}
.theme-blue .card-back .btn-secondary {
  background: linear-gradient(180deg, #1d4ed8 0%, #172554 100%) !important;
  border: 1px solid #2563eb !important;
  color: #dbeafe !important;
}
.theme-blue .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #2563eb 0%, #1e3a8a 100%) !important;
  color: #ffffff !important;
  border-color: #60a5fa !important;
}

/* 6. SILVER / HOPEA TEEMA */
.theme-silver .card-back {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 35%, #f1f5f9 70%, #e2e8f0 100%) !important;
  border-color: #334155 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 0 1px #334155 !important;
}
.theme-silver .custom-header-card {
  background: linear-gradient(180deg, #64748b 0%, #475569 60%, #1e293b 100%) !important;
  border-color: #cbd5e1 !important;
}
.theme-silver .custom-header-card h3 { color: #ffffff !important; }
.theme-silver .custom-accordion-header {
  background: linear-gradient(180deg, #64748b 0%, #475569 100%) !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
}
.theme-silver .custom-accordion-header:hover {
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%) !important;
  border-color: #cbd5e1 !important;
  color: #ffffff !important;
}
.theme-silver .custom-accordion-header .accordion-arrow { color: #cbd5e1 !important; }
.theme-silver .custom-stats-plaque {
  background: linear-gradient(180deg, #cbd5e1 0%, #475569 100%) !important;
  border-color: #1e293b !important;
}
.theme-silver .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-silver .card-back #btnSaveCustom,
.theme-silver #btn-avatar-upload {
  background: linear-gradient(180deg, #64748b 0%, #334155 100%) !important;
  border: 1px solid #cbd5e1 !important;
  color: #ffffff !important;
}
.theme-silver .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #94a3b8 0%, #475569 100%) !important;
  color: #ffffff !important;
}
.theme-silver .card-back .btn-secondary {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
  border: 1px solid #64748b !important;
  color: #f1f5f9 !important;
}
.theme-silver .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #475569 0%, #0f172a 100%) !important;
  color: #ffffff !important;
  border-color: #cbd5e1 !important;
}

/* 7. DIAMOND / TIMANTTI TEEMA */
.theme-diamond .card-back {
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 35%, #e0f2fe 70%, #bae6fd 100%) !important;
  border-color: #0369a1 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.7), inset 0 0 0 1px #0369a1 !important;
}
.theme-diamond .custom-header-card {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 60%, #082f49 100%) !important;
  border-color: #38bdf8 !important;
}
.theme-diamond .custom-header-card h3 { color: #e0f2fe !important; }
.theme-diamond .custom-accordion-header {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: #082f49 !important;
  color: #e0f2fe !important;
}
.theme-diamond .custom-accordion-header:hover {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important;
  border-color: #bae6fd !important;
  color: #ffffff !important;
}
.theme-diamond .custom-accordion-header .accordion-arrow { color: #38bdf8 !important; }
.theme-diamond .custom-stats-plaque {
  background: linear-gradient(180deg, #bae6fd 0%, #0369a1 100%) !important;
  border-color: #082f49 !important;
}
.theme-diamond .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-diamond .card-back #btnSaveCustom,
.theme-diamond #btn-avatar-upload {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid #38bdf8 !important;
  color: #ffffff !important;
}
.theme-diamond .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important;
  color: #ffffff !important;
}
.theme-diamond .card-back .btn-secondary {
  background: linear-gradient(180deg, #0369a1 0%, #082f49 100%) !important;
  border: 1px solid #0284c7 !important;
  color: #e0f2fe !important;
}
.theme-diamond .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #0284c7 0%, #0c4a6e 100%) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}

/* 8. BRONZE / PRONSSI TEEMA */
.theme-bronze .card-back {
  background: linear-gradient(180deg, #ffffff 0%, #f6ece2 35%, #e5c5b1 70%, #c99c82 100%) !important;
  border-color: #6e3719 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.7), inset 0 0 0 1px #6e3719 !important;
}
.theme-bronze .custom-header-card {
  background: linear-gradient(180deg, #8a4316 0%, #6e2c08 60%, #361202 100%) !important;
  border-color: #d97706 !important;
}
.theme-bronze .custom-header-card h3 { color: #fef08a !important; }
.theme-bronze .custom-accordion-header {
  background: linear-gradient(180deg, #8a4316 0%, #6e2c08 100%) !important;
  border-color: #361202 !important;
  color: #fef08a !important;
}
.theme-bronze .custom-accordion-header:hover {
  background: linear-gradient(180deg, #a14c12 0%, #85300d 100%) !important;
  border-color: #fde0c2 !important;
  color: #ffffff !important;
}
.theme-bronze .custom-accordion-header .accordion-arrow { color: #d97706 !important; }
.theme-bronze .custom-stats-plaque {
  background: linear-gradient(180deg, #d8c8b2 0%, #85300d 100%) !important;
  border-color: #4c1a06 !important;
}
.theme-bronze .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-bronze .card-back #btnSaveCustom,
.theme-bronze #btn-avatar-upload {
  background: linear-gradient(180deg, #b45309 0%, #6e2c08 100%) !important;
  border: 1px solid #fef08a !important;
  color: #ffffff !important;
}
.theme-bronze .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #d97706 0%, #8a4316 100%) !important;
  color: #ffffff !important;
}
.theme-bronze .card-back .btn-secondary {
  background: linear-gradient(180deg, #6e2c08 0%, #361202 100%) !important;
  border: 1px solid #8a4316 !important;
  color: #fde0c2 !important;
}
.theme-bronze .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #8a4316 0%, #4c1a06 100%) !important;
  color: #fef08a !important;
  border-color: #d97706 !important;
}

/* 9. YELLOW / KELTAINEN TEEMA */
.theme-yellow .card-back {
  background: linear-gradient(180deg, #ffffff 0%, #fefce8 35%, #fef08a 70%, #fde047 100%) !important;
  border-color: #854d0e !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 0 1px #854d0e !important;
}
.theme-yellow .custom-header-card {
  background: linear-gradient(180deg, #ca8a04 0%, #a16207 60%, #422006 100%) !important;
  border-color: #fde047 !important;
}
.theme-yellow .custom-header-card h3 { color: #ffffff !important; }
.theme-yellow .custom-accordion-header {
  background: linear-gradient(180deg, #ca8a04 0%, #a16207 100%) !important;
  border-color: #422006 !important;
  color: #ffffff !important;
}
.theme-yellow .custom-accordion-header:hover {
  background: linear-gradient(180deg, #eab308 0%, #ca8a04 100%) !important;
  border-color: #fde047 !important;
  color: #ffffff !important;
}
.theme-yellow .custom-accordion-header .accordion-arrow { color: #fde047 !important; }
.theme-yellow .custom-stats-plaque {
  background: linear-gradient(180deg, #fde047 0%, #a16207 100%) !important;
  border-color: #422006 !important;
}
.theme-yellow .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-yellow .card-back #btnSaveCustom,
.theme-yellow #btn-avatar-upload {
  background: linear-gradient(180deg, #ca8a04 0%, #a16207 100%) !important;
  border: 1px solid #fde047 !important;
  color: #ffffff !important;
}
.theme-yellow .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #eab308 0%, #ca8a04 100%) !important;
  color: #ffffff !important;
}
.theme-yellow .card-back .btn-secondary {
  background: linear-gradient(180deg, #a16207 0%, #422006 100%) !important;
  border: 1px solid #ca8a04 !important;
  color: #fef9c3 !important;
}
.theme-yellow .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #ca8a04 0%, #713f12 100%) !important;
  color: #ffffff !important;
  border-color: #fde047 !important;
}

/* 10. WINE / VIININPUNAINEN TEEMA (#701C28) */
.theme-wine .card-back {
  background: linear-gradient(180deg, #ffffff 0%, #fdf2f4 35%, #f4d3d8 70%, #d89ba4 100%) !important;
  border-color: #701C28 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 0 1px #701C28 !important;
}
.theme-wine .custom-header-card {
  background: linear-gradient(180deg, #801b2a 0%, #58121d 60%, #28050c 100%) !important;
  border-color: #701C28 !important;
  box-shadow: inset 0 0 0 1px #f472b6, 0 4px 10px rgba(0,0,0,0.4) !important;
}
.theme-wine .custom-header-card h3 { color: #fce7f3 !important; text-shadow: 0 0 4px rgba(244, 114, 182, 0.4) !important; }
.theme-wine .custom-accordion-header {
  background: linear-gradient(180deg, #701C28 0%, #420B15 100%) !important;
  border-color: #28050c !important;
  color: #fce7f3 !important;
}
.theme-wine .custom-accordion-header:hover {
  background: linear-gradient(180deg, #8c2333 0%, #540e1b 100%) !important;
  border-color: #f472b6 !important;
  color: #ffffff !important;
}
.theme-wine .custom-accordion-header .accordion-arrow { color: #f472b6 !important; }
.theme-wine .custom-stats-plaque {
  background: linear-gradient(180deg, #d89ba4 0%, #701C28 100%) !important;
  border-color: #420B15 !important;
}
.theme-wine .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-wine .custom-stats-plaque .switch input:checked + .slider { background-color: #801b2a !important; }
.theme-wine .card-back #btnSaveCustom,
.theme-wine #btn-avatar-upload {
  background: linear-gradient(180deg, #701C28 0%, #420B15 100%) !important;
  border: 1px solid #f472b6 !important;
  color: #ffffff !important;
}
.theme-wine .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #8c2333 0%, #58121d 100%) !important;
  color: #ffffff !important;
}
.theme-wine .card-back .btn-secondary {
  background: linear-gradient(180deg, #420B15 0%, #28050c 100%) !important;
  border: 1px solid #701C28 !important;
  color: #f4d3d8 !important;
}
.theme-wine .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #701C28 0%, #36070f 100%) !important;
  color: #fce7f3 !important;
  border-color: #f472b6 !important;
}
.theme-wine .card-back select {
  border-color: #701C28 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4d3d8 100%) !important;
  color: #28050c !important;
}

/* SIIDERI-TEEMA (#717821) */
.theme-omppupomppu .card-back {
  background: linear-gradient(180deg, #ffffff 0%, #f6f6f3 35%, #e7e9d3 70%, #c9cf8c 100%) !important;
  border-color: #717821 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 0 1px #717821 !important;
}
.theme-omppupomppu .custom-header-card {
  background: linear-gradient(180deg, #686e21 0%, #2b2d10 60%, #151609 100%) !important;
  border-color: #717821 !important;
  box-shadow: inset 0 0 0 1px #dde675, 0 4px 10px rgba(0,0,0,0.4) !important;
}
.theme-omppupomppu .custom-header-card h3 { color: #f2f3ec !important; text-shadow: 0 0 4px #dde67566 !important; }
.theme-omppupomppu .custom-accordion-header {
  background: linear-gradient(180deg, #717821 0%, #20210d 100%) !important;
  border-color: #151609 !important;
  color: #f2f3ec !important;
}
.theme-omppupomppu .custom-accordion-header:hover {
  background: linear-gradient(180deg, #686e21 0%, #414516 100%) !important;
  border-color: #dde675 !important;
  color: #ffffff !important;
}
.theme-omppupomppu .custom-accordion-header .accordion-arrow { color: #dde675 !important; }
.theme-omppupomppu .custom-stats-plaque {
  background: linear-gradient(180deg, #c9cf8c 0%, #717821 100%) !important;
  border-color: #20210d !important;
}
.theme-omppupomppu .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-omppupomppu .custom-stats-plaque .switch input:checked + .slider { background-color: #686e21 !important; }
.theme-omppupomppu .card-back #btnSaveCustom,
.theme-omppupomppu #btn-avatar-upload {
  background: linear-gradient(180deg, #717821 0%, #20210d 100%) !important;
  border: 1px solid #dde675 !important;
  color: #ffffff !important;
}
.theme-omppupomppu .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #686e21 0%, #2b2d10 100%) !important;
  color: #ffffff !important;
}
.theme-omppupomppu .card-back .btn-secondary {
  background: linear-gradient(180deg, #20210d 0%, #151609 100%) !important;
  border: 1px solid #717821 !important;
  color: #e7e9d3 !important;
}
.theme-omppupomppu .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #717821 0%, #2b2d10 100%) !important;
  color: #f2f3ec !important;
  border-color: #dde675 !important;
}
.theme-omppupomppu .card-back select {
  border-color: #717821 !important;
  background: linear-gradient(180deg, #ffffff 0%, #e7e9d3 100%) !important;
  color: #151609 !important;
}

/* OLUT-TEEMA (#865813) */
.theme-mallasmestari .card-back {
  background: linear-gradient(180deg, #ffffff 0%, #f7f5f3 35%, #ece1cf 70%, #d9b682 100%) !important;
  border-color: #865813 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 0 1px #865813 !important;
}
.theme-mallasmestari .custom-header-card {
  background: linear-gradient(180deg, #7a5115 0%, #32220b 60%, #181107 100%) !important;
  border-color: #865813 !important;
  box-shadow: inset 0 0 0 1px #f7bc63, 0 4px 10px rgba(0,0,0,0.4) !important;
}
.theme-mallasmestari .custom-header-card h3 { color: #f4f1eb !important; text-shadow: 0 0 4px #f7bc6366 !important; }
.theme-mallasmestari .custom-accordion-header {
  background: linear-gradient(180deg, #865813 0%, #251a09 100%) !important;
  border-color: #181107 !important;
  color: #f4f1eb !important;
}
.theme-mallasmestari .custom-accordion-header:hover {
  background: linear-gradient(180deg, #7a5115 0%, #4d340f 100%) !important;
  border-color: #f7bc63 !important;
  color: #ffffff !important;
}
.theme-mallasmestari .custom-accordion-header .accordion-arrow { color: #f7bc63 !important; }
.theme-mallasmestari .custom-stats-plaque {
  background: linear-gradient(180deg, #d9b682 0%, #865813 100%) !important;
  border-color: #251a09 !important;
}
.theme-mallasmestari .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-mallasmestari .custom-stats-plaque .switch input:checked + .slider { background-color: #7a5115 !important; }
.theme-mallasmestari .card-back #btnSaveCustom,
.theme-mallasmestari #btn-avatar-upload {
  background: linear-gradient(180deg, #865813 0%, #251a09 100%) !important;
  border: 1px solid #f7bc63 !important;
  color: #ffffff !important;
}
.theme-mallasmestari .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #7a5115 0%, #32220b 100%) !important;
  color: #ffffff !important;
}
.theme-mallasmestari .card-back .btn-secondary {
  background: linear-gradient(180deg, #251a09 0%, #181107 100%) !important;
  border: 1px solid #865813 !important;
  color: #ece1cf !important;
}
.theme-mallasmestari .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #865813 0%, #32220b 100%) !important;
  color: #f4f1eb !important;
  border-color: #f7bc63 !important;
}
.theme-mallasmestari .card-back select {
  border-color: #865813 !important;
  background: linear-gradient(180deg, #ffffff 0%, #ece1cf 100%) !important;
  color: #181107 !important;
}

/* VALKOVIINI-TEEMA (#896810) */
.theme-riesling .card-back {
  background: linear-gradient(180deg, #ffffff 0%, #f7f6f3 35%, #ede5cf 70%, #dcc37f 100%) !important;
  border-color: #896810 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 0 1px #896810 !important;
}
.theme-riesling .custom-header-card {
  background: linear-gradient(180deg, #7d6012 0%, #33280a 60%, #181306 100%) !important;
  border-color: #896810 !important;
  box-shadow: inset 0 0 0 1px #fcd15f, 0 4px 10px rgba(0,0,0,0.4) !important;
}
.theme-riesling .custom-header-card h3 { color: #f4f2eb !important; text-shadow: 0 0 4px #fcd15f66 !important; }
.theme-riesling .custom-accordion-header {
  background: linear-gradient(180deg, #896810 0%, #251e09 100%) !important;
  border-color: #181306 !important;
  color: #f4f2eb !important;
}
.theme-riesling .custom-accordion-header:hover {
  background: linear-gradient(180deg, #7d6012 0%, #4e3d0d 100%) !important;
  border-color: #fcd15f !important;
  color: #ffffff !important;
}
.theme-riesling .custom-accordion-header .accordion-arrow { color: #fcd15f !important; }
.theme-riesling .custom-stats-plaque {
  background: linear-gradient(180deg, #dcc37f 0%, #896810 100%) !important;
  border-color: #251e09 !important;
}
.theme-riesling .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-riesling .custom-stats-plaque .switch input:checked + .slider { background-color: #7d6012 !important; }
.theme-riesling .card-back #btnSaveCustom,
.theme-riesling #btn-avatar-upload {
  background: linear-gradient(180deg, #896810 0%, #251e09 100%) !important;
  border: 1px solid #fcd15f !important;
  color: #ffffff !important;
}
.theme-riesling .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #7d6012 0%, #33280a 100%) !important;
  color: #ffffff !important;
}
.theme-riesling .card-back .btn-secondary {
  background: linear-gradient(180deg, #251e09 0%, #181306 100%) !important;
  border: 1px solid #896810 !important;
  color: #ede5cf !important;
}
.theme-riesling .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #896810 0%, #33280a 100%) !important;
  color: #f4f2eb !important;
  border-color: #fcd15f !important;
}
.theme-riesling .card-back select {
  border-color: #896810 !important;
  background: linear-gradient(180deg, #ffffff 0%, #ede5cf 100%) !important;
  color: #181306 !important;
}

/* LONKERO-TEEMA (#1d597c) */
.theme-muistatko52 .card-back {
  background: linear-gradient(180deg, #ffffff 0%, #f3f5f6 35%, #d2e1ea 70%, #89b7d2 100%) !important;
  border-color: #1d597c !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 0 1px #1d597c !important;
}
.theme-muistatko52 .custom-header-card {
  background: linear-gradient(180deg, #1d5371 0%, #0f232f 60%, #081116 100%) !important;
  border-color: #1d597c !important;
  box-shadow: inset 0 0 0 1px #70beeb, 0 4px 10px rgba(0,0,0,0.4) !important;
}
.theme-muistatko52 .custom-header-card h3 { color: #ecf1f3 !important; text-shadow: 0 0 4px #70beeb66 !important; }
.theme-muistatko52 .custom-accordion-header {
  background: linear-gradient(180deg, #1d597c 0%, #0c1a22 100%) !important;
  border-color: #081116 !important;
  color: #ecf1f3 !important;
}
.theme-muistatko52 .custom-accordion-header:hover {
  background: linear-gradient(180deg, #1d5371 0%, #143547 100%) !important;
  border-color: #70beeb !important;
  color: #ffffff !important;
}
.theme-muistatko52 .custom-accordion-header .accordion-arrow { color: #70beeb !important; }
.theme-muistatko52 .custom-stats-plaque {
  background: linear-gradient(180deg, #89b7d2 0%, #1d597c 100%) !important;
  border-color: #0c1a22 !important;
}
.theme-muistatko52 .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-muistatko52 .custom-stats-plaque .switch input:checked + .slider { background-color: #1d5371 !important; }
.theme-muistatko52 .card-back #btnSaveCustom,
.theme-muistatko52 #btn-avatar-upload {
  background: linear-gradient(180deg, #1d597c 0%, #0c1a22 100%) !important;
  border: 1px solid #70beeb !important;
  color: #ffffff !important;
}
.theme-muistatko52 .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #1d5371 0%, #0f232f 100%) !important;
  color: #ffffff !important;
}
.theme-muistatko52 .card-back .btn-secondary {
  background: linear-gradient(180deg, #0c1a22 0%, #081116 100%) !important;
  border: 1px solid #1d597c !important;
  color: #d2e1ea !important;
}
.theme-muistatko52 .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #1d597c 0%, #0f232f 100%) !important;
  color: #ecf1f3 !important;
  border-color: #70beeb !important;
}
.theme-muistatko52 .card-back select {
  border-color: #1d597c !important;
  background: linear-gradient(180deg, #ffffff 0%, #d2e1ea 100%) !important;
  color: #081116 !important;
}

/* COCKTAIL-TEEMA (#813118) */
.theme-miksologi .card-back {
  background: linear-gradient(180deg, #ffffff 0%, #f6f4f3 35%, #ebd7d1 70%, #d69985 100%) !important;
  border-color: #813118 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 0 1px #813118 !important;
}
.theme-miksologi .custom-header-card {
  background: linear-gradient(180deg, #762f19 0%, #30150d 60%, #170b08 100%) !important;
  border-color: #813118 !important;
  box-shadow: inset 0 0 0 1px #f18a6a, 0 4px 10px rgba(0,0,0,0.4) !important;
}
.theme-miksologi .custom-header-card h3 { color: #f4eeec !important; text-shadow: 0 0 4px #f18a6a66 !important; }
.theme-miksologi .custom-accordion-header {
  background: linear-gradient(180deg, #813118 0%, #23100b 100%) !important;
  border-color: #170b08 !important;
  color: #f4eeec !important;
}
.theme-miksologi .custom-accordion-header:hover {
  background: linear-gradient(180deg, #762f19 0%, #4a1f12 100%) !important;
  border-color: #f18a6a !important;
  color: #ffffff !important;
}
.theme-miksologi .custom-accordion-header .accordion-arrow { color: #f18a6a !important; }
.theme-miksologi .custom-stats-plaque {
  background: linear-gradient(180deg, #d69985 0%, #813118 100%) !important;
  border-color: #23100b !important;
}
.theme-miksologi .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-miksologi .custom-stats-plaque .switch input:checked + .slider { background-color: #762f19 !important; }
.theme-miksologi .card-back #btnSaveCustom,
.theme-miksologi #btn-avatar-upload {
  background: linear-gradient(180deg, #813118 0%, #23100b 100%) !important;
  border: 1px solid #f18a6a !important;
  color: #ffffff !important;
}
.theme-miksologi .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #762f19 0%, #30150d 100%) !important;
  color: #ffffff !important;
}
.theme-miksologi .card-back .btn-secondary {
  background: linear-gradient(180deg, #23100b 0%, #170b08 100%) !important;
  border: 1px solid #813118 !important;
  color: #ebd7d1 !important;
}
.theme-miksologi .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #813118 0%, #30150d 100%) !important;
  color: #f4eeec !important;
  border-color: #f18a6a !important;
}
.theme-miksologi .card-back select {
  border-color: #813118 !important;
  background: linear-gradient(180deg, #ffffff 0%, #ebd7d1 100%) !important;
  color: #170b08 !important;
}

/* KUOHUVIINI-TEEMA (#8f6c0a) */
.theme-alkumaljalla .card-back {
  background: linear-gradient(180deg, #ffffff 0%, #f7f6f3 35%, #eee6cd 70%, #e0c57b 100%) !important;
  border-color: #8f6c0a !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 0 1px #8f6c0a !important;
}
.theme-alkumaljalla .custom-header-card {
  background: linear-gradient(180deg, #82630d 0%, #352908 60%, #191406 100%) !important;
  border-color: #8f6c0a !important;
  box-shadow: inset 0 0 0 1px #ffd45c, 0 4px 10px rgba(0,0,0,0.4) !important;
}
.theme-alkumaljalla .custom-header-card h3 { color: #f5f2eb !important; text-shadow: 0 0 4px #ffd45c66 !important; }
.theme-alkumaljalla .custom-accordion-header {
  background: linear-gradient(180deg, #8f6c0a 0%, #271e07 100%) !important;
  border-color: #191406 !important;
  color: #f5f2eb !important;
}
.theme-alkumaljalla .custom-accordion-header:hover {
  background: linear-gradient(180deg, #82630d 0%, #513f0a 100%) !important;
  border-color: #ffd45c !important;
  color: #ffffff !important;
}
.theme-alkumaljalla .custom-accordion-header .accordion-arrow { color: #ffd45c !important; }
.theme-alkumaljalla .custom-stats-plaque {
  background: linear-gradient(180deg, #e0c57b 0%, #8f6c0a 100%) !important;
  border-color: #271e07 !important;
}
.theme-alkumaljalla .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-alkumaljalla .custom-stats-plaque .switch input:checked + .slider { background-color: #82630d !important; }
.theme-alkumaljalla .card-back #btnSaveCustom,
.theme-alkumaljalla #btn-avatar-upload {
  background: linear-gradient(180deg, #8f6c0a 0%, #271e07 100%) !important;
  border: 1px solid #ffd45c !important;
  color: #ffffff !important;
}
.theme-alkumaljalla .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #82630d 0%, #352908 100%) !important;
  color: #ffffff !important;
}
.theme-alkumaljalla .card-back .btn-secondary {
  background: linear-gradient(180deg, #271e07 0%, #191406 100%) !important;
  border: 1px solid #8f6c0a !important;
  color: #eee6cd !important;
}
.theme-alkumaljalla .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #8f6c0a 0%, #352908 100%) !important;
  color: #f5f2eb !important;
  border-color: #ffd45c !important;
}
.theme-alkumaljalla .card-back select {
  border-color: #8f6c0a !important;
  background: linear-gradient(180deg, #ffffff 0%, #eee6cd 100%) !important;
  color: #191406 !important;
}

/* MEHU-TEEMA (#8c590d) */
.theme-mehukestit .card-back {
  background: linear-gradient(180deg, #ffffff 0%, #f7f5f3 35%, #eee1ce 70%, #deb77d 100%) !important;
  border-color: #8c590d !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 0 1px #8c590d !important;
}
.theme-mehukestit .custom-header-card {
  background: linear-gradient(180deg, #80530f 0%, #342309 60%, #191106 100%) !important;
  border-color: #8c590d !important;
  box-shadow: inset 0 0 0 1px #ffbe5c, 0 4px 10px rgba(0,0,0,0.4) !important;
}
.theme-mehukestit .custom-header-card h3 { color: #f4f1eb !important; text-shadow: 0 0 4px #ffbe5c66 !important; }
.theme-mehukestit .custom-accordion-header {
  background: linear-gradient(180deg, #8c590d 0%, #261a08 100%) !important;
  border-color: #191106 !important;
  color: #f4f1eb !important;
}
.theme-mehukestit .custom-accordion-header:hover {
  background: linear-gradient(180deg, #80530f 0%, #50350c 100%) !important;
  border-color: #ffbe5c !important;
  color: #ffffff !important;
}
.theme-mehukestit .custom-accordion-header .accordion-arrow { color: #ffbe5c !important; }
.theme-mehukestit .custom-stats-plaque {
  background: linear-gradient(180deg, #deb77d 0%, #8c590d 100%) !important;
  border-color: #261a08 !important;
}
.theme-mehukestit .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-mehukestit .custom-stats-plaque .switch input:checked + .slider { background-color: #80530f !important; }
.theme-mehukestit .card-back #btnSaveCustom,
.theme-mehukestit #btn-avatar-upload {
  background: linear-gradient(180deg, #8c590d 0%, #261a08 100%) !important;
  border: 1px solid #ffbe5c !important;
  color: #ffffff !important;
}
.theme-mehukestit .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #80530f 0%, #342309 100%) !important;
  color: #ffffff !important;
}
.theme-mehukestit .card-back .btn-secondary {
  background: linear-gradient(180deg, #261a08 0%, #191106 100%) !important;
  border: 1px solid #8c590d !important;
  color: #eee1ce !important;
}
.theme-mehukestit .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #8c590d 0%, #342309 100%) !important;
  color: #f4f1eb !important;
  border-color: #ffbe5c !important;
}
.theme-mehukestit .card-back select {
  border-color: #8c590d !important;
  background: linear-gradient(180deg, #ffffff 0%, #eee1ce 100%) !important;
  color: #191106 !important;
}

/* VESI-TEEMA (#226277) */
.theme-vesipoika .card-back {
  background: linear-gradient(180deg, #ffffff 0%, #f3f5f6 35%, #d3e3e8 70%, #8dbece 100%) !important;
  border-color: #226277 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 0 1px #226277 !important;
}
.theme-vesipoika .custom-header-card {
  background: linear-gradient(180deg, #225a6d 0%, #10262d 60%, #091216 100%) !important;
  border-color: #226277 !important;
  box-shadow: inset 0 0 0 1px #77c9e4, 0 4px 10px rgba(0,0,0,0.4) !important;
}
.theme-vesipoika .custom-header-card h3 { color: #edf1f3 !important; text-shadow: 0 0 4px #77c9e466 !important; }
.theme-vesipoika .custom-accordion-header {
  background: linear-gradient(180deg, #226277 0%, #0d1c21 100%) !important;
  border-color: #091216 !important;
  color: #edf1f3 !important;
}
.theme-vesipoika .custom-accordion-header:hover {
  background: linear-gradient(180deg, #225a6d 0%, #173945 100%) !important;
  border-color: #77c9e4 !important;
  color: #ffffff !important;
}
.theme-vesipoika .custom-accordion-header .accordion-arrow { color: #77c9e4 !important; }
.theme-vesipoika .custom-stats-plaque {
  background: linear-gradient(180deg, #8dbece 0%, #226277 100%) !important;
  border-color: #0d1c21 !important;
}
.theme-vesipoika .custom-stats-plaque .switch-row span { color: #ffffff !important; }
.theme-vesipoika .custom-stats-plaque .switch input:checked + .slider { background-color: #225a6d !important; }
.theme-vesipoika .card-back #btnSaveCustom,
.theme-vesipoika #btn-avatar-upload {
  background: linear-gradient(180deg, #226277 0%, #0d1c21 100%) !important;
  border: 1px solid #77c9e4 !important;
  color: #ffffff !important;
}
.theme-vesipoika .card-back #btnSaveCustom:hover:not(:disabled) {
  background: linear-gradient(180deg, #225a6d 0%, #10262d 100%) !important;
  color: #ffffff !important;
}
.theme-vesipoika .card-back .btn-secondary {
  background: linear-gradient(180deg, #0d1c21 0%, #091216 100%) !important;
  border: 1px solid #226277 !important;
  color: #d3e3e8 !important;
}
.theme-vesipoika .card-back .btn-secondary:hover {
  background: linear-gradient(180deg, #226277 0%, #10262d 100%) !important;
  color: #edf1f3 !important;
  border-color: #77c9e4 !important;
}
.theme-vesipoika .card-back select {
  border-color: #226277 !important;
  background: linear-gradient(180deg, #ffffff 0%, #d3e3e8 100%) !important;
  color: #091216 !important;
}