@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');
/* Nano Font */

:root {
  --bg-color: #191e36;
  --board-bg: #fff5f5;
  --accent-color: #ff8fab;
  --text-color: #5c4033;
  --font-main: 'Fredoka One', cursive;
  --radius-card: 25px;
  --radius-btn: 30px;
  --kawaii-border: 3px solid #5c4033;
  --kawaii-pink: #ffc2d1;
  --kawaii-blue: #bde0fe;
  --kawaii-green: #cdedcf;
  --kawaii-yellow: #fdf0d5;
  --solid-bg: #ffecf2;
}




/* Base Layout & Background */
/* Base Layout & Background */
html {
  height: 100%;
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
  background-color: var(--solid-bg);
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-main);
  background-color: var(--solid-bg);
  background-image: url('../assets/kawaii_bg_pattern.png') !important;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow: hidden;
  overscroll-behavior: none;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* App container matches Board dimensions for alignment */
.main-container {
  position: relative;
  width: 800px;
  /* Narrower board */
  height: 55vh;
  /* Fixed height for the board area */
  display: flex;
  margin: auto;
  transform: none;
  /* Perfectly centered now */
}

.header {
  position: absolute;
  top: -120px;
  /* Move above the board */
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 10;
  padding-bottom: 0;
}

.logo-container {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  transform: translate(-20px, calc(-70% - 10px));
  pointer-events: auto;
}

.logo {
  height: 120px;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s;
}

.logo:hover {
  transform: scale(1.05);
}

.nav-links {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(calc(-130% + 13px));
  display: flex;
  gap: 30px;
  margin-bottom: 0;
}

.nav-item {
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 800;
  border-radius: 20px;
  padding: 8px 25px;
  margin: 0 5px;
  border: 3px solid #5c4033;
  box-shadow: 0 4px 0 #5c4033;
  transition: transform 0.1s, box-shadow 0.1s;
  display: inline-block;
  color: #5c4033;
  background-color: white;
  letter-spacing: 0.5px;
  position: relative;
  /* Reset stroke from previous design */
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.nav-item:active,
.nav-item.active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #5c4033;
}

/* Specific Colors matching the image */
.nav-item:nth-child(1) {
  /* MACLAR */
  background-color: var(--kawaii-yellow);
}

.nav-item:nth-child(2) {
  /* KUPONLAR */
  background-color: var(--kawaii-blue);
}

.nav-item:nth-child(3) {
  /* MALIKANE */
  background-color: var(--kawaii-green);
}

.nav-item:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #5c4033;
}

/* Content Area */
.content-area {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  margin-top: 0;
}

.mascot-container {
  position: absolute;
  right: calc(105% - 15px);
  /* Moved additional 10px Right */
  /* Moved 5px Right */
  width: 300px;
  /* Enlarged */
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-right: -100px;
  /* Adjusted overlap */
  bottom: -25px;
  /* Moved additional 20px Down */
  /* Moved 10px Down */
  z-index: 20;
  pointer-events: none;
}

.mascot {
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mascot:hover {
  transform: scale(1.05);
}

.board {
  flex-grow: 1;
  background-color: var(--board-bg);
  border: var(--kawaii-border);
  width: 100%;
  height: 100%;
  margin-left: 0;
  padding: 0;
  position: relative;
  z-index: 5;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-card);
  overflow: visible;
}

.theme-kawaii .board {
  border: var(--kawaii-border);
  overflow: visible;
  /* Keep visible for logo and nav */
}

/* Footer */
.footer {
  position: absolute;
  bottom: -73px;
  right: 0;
  width: auto;
  display: block;
  z-index: 50;
}

.kasa-display {
  font-size: 1.8rem;
  color: #f5e6d3;
  background-color: var(--kawaii-pink);
  padding: 10px 40px;
  border-radius: 100px;
  border: var(--kawaii-border);
  -webkit-text-stroke: 4px #5c4033;
  paint-order: stroke fill;
  opacity: 1;
  transition: transform 0.2s ease, opacity 0.3s ease;
  cursor: default;
  display: inline-block;
}

.kasa-display:hover {
  transform: scale(1.05);
}

/* Trial Matches Styling */
.matches-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 20px;
  box-sizing: border-box;
  font-family: var(--font-main);
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  /* No padding, view-section margin handles spacing */
}



.match-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  /* Take remaining height */
  padding: 15px 0px 0px 0px;
  /* Removed bottom padding to eliminate cream band */
  scroll-behavior: smooth;
  margin: 0;
  /* No margin to fill container */
}

/* Custom Scrollbar */
.match-list::-webkit-scrollbar {
  width: 8px;
}

.match-list::-webkit-scrollbar-track {
  background: rgba(255, 184, 46, 0.2);
  border-radius: 10px;
}

.match-list::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 10px;
}

.match-list::-webkit-scrollbar-thumb:hover {
  background: #e5a01a;
}

.match-item {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--kawaii-yellow);
  /* Cream/Yellow tint */
  padding: 15px 25px;
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  /* Softer shadow */
  border: none;
  /* Removed border */
  transition: transform 0.2s;
  font-size: 1.1rem;
  color: #5c4033;
  font-weight: 700;
  margin-bottom: 12px;
}

.match-item.win {
  background-color: #f6ffed;
  border: 2px solid #b7eb8f;
  box-shadow: 0 4px 0 #b7eb8f;
  transform: translateY(-2px);
  margin-bottom: 4px;
  /* Space for shadow */
}

.match-item.loss {
  background-color: #fff1f0;
  border: 2px solid #ffa39e;
  box-shadow: 0 4px 0 #ffa39e;
  transform: translateY(-2px);
  margin-bottom: 4px;
  /* Space for shadow */
}

/* Coupon match status colors */
.coupon-match.match-win {
  color: #2ecc71;
  font-weight: 500;
}

.coupon-match.match-win span {
  color: #2ecc71;
}

.coupon-match.match-loss {
  color: #e74c3c;
  font-weight: 500;
}

.coupon-match.match-loss span {
  color: #e74c3c;
}

.match-item:hover {
  transform: translateY(-2px);
  border-color: var(--accent-color);
}

.home-team,
.away-team {
  flex: 1;
  text-align: center;
  font-weight: bold;
}

.home-team {
  text-align: left;
}

.away-team {
  text-align: right;
}

.score {
  background: var(--accent-color);
  /* Pink */
  color: #5c4033;
  /* Dark Brown */
  padding: 8px 20px;
  border-radius: 25px;
  font-weight: 800;
  min-width: 80px;
  text-align: center;
  margin: 0 15px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
  font-size: 1.1rem;
}

/* MBS Badge */
.mbs-badge {
  background: var(--accent-color);
  color: var(--bg-color);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: bold;
  margin-left: 8px;
  display: inline-block;
  vertical-align: middle;
}


/* View Section (for matches and coupons tabs) */
.view-section {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  margin-top: 0;
  min-height: 0;
  box-sizing: border-box;
}

.back-btn-custom {
  background: #3498db !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 15px !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  box-shadow: 0 4px 0 #2980b9 !important;
  transition: transform 0.1s, box-shadow 0.1s !important;
  font-family: var(--font-main) !important;
}

.back-btn-custom:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #2980b9 !important;
}

/* Coupons Styling */
.coupons-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 15px 20px 0 20px;
  /* Added 15px top padding for initial gap */
  box-sizing: border-box;
  font-family: var(--font-main);
  gap: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* Custom scrollbar for coupons container */
.coupons-container::-webkit-scrollbar {
  width: 8px;
}

.coupons-container::-webkit-scrollbar-track {
  background: rgba(255, 184, 46, 0.2);
  border-radius: 10px;
}

.coupons-container::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 10px;
}

.coupon-card {
  width: 100%;
  box-sizing: border-box;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 2px solid #eee;
  overflow: visible;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.coupon-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-color);
}

/* Coupon & History Outcome Colors */
.coupon-card.coupon-win,
.history-item.win {
  background-color: rgba(46, 204, 113, 0.15);
  border-color: #2ecc71;
}

.coupon-card.coupon-loss,
.history-item.loss {
  background-color: rgba(231, 76, 60, 0.15);
  border-color: #e74c3c;
}

.coupon-header {
  background-color: var(--bg-color);
  color: white;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.coupon-title {
  color: var(--accent-color);
  font-weight: bold;
  letter-spacing: 1px;
}

.coupon-rate {
  background: white;
  color: var(--bg-color);
  padding: 4px 12px;
  border-radius: 15px;
  font-weight: bold;
  font-size: 1.2rem !important;
  /* Increased from default */
}

/* Colored rate badge for coupon status */
.coupon-rate.rate-win {
  background: #2ecc71;
  color: white;
}

.coupon-rate.rate-loss {
  background: #e74c3c;
  color: white;
}

.coupon-matches {
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.coupon-match {
  display: flex;
  justify-content: space-between;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 6px;
  font-size: 1.5rem !important;
  /* Further increased for better readability */
  font-weight: 500;
}

.coupon-match:last-child {
  border-bottom: none;
}

.prediction {
  font-weight: bold;
  color: var(--bg-color);
  font-size: 1.6rem !important;
  /* Further increased for better visibility */
}

/* More specific selectors to ensure font sizes apply */
.coupon-matches .coupon-match {
  font-size: 1.5rem !important;
}

.coupon-matches .coupon-match span {
  font-size: 1.5rem !important;
}

.coupon-matches .coupon-match .prediction {
  font-size: 1.6rem !important;
}

.coupon-card .coupon-matches .coupon-match {
  font-size: 1.5rem !important;
}

.coupon-card .coupon-match span {
  font-size: 1.5rem !important;
}

/* Colored predictions based on match result */
.prediction.prediction-win {
  color: #2ecc71;
}

.prediction.prediction-loss {
  color: #e74c3c;
}

/* Coupon Detail Modal Styles - Enhanced Font sizes */
.modal-match-item {
  background: #fdfdfd;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px 15px;
  margin-bottom: 10px;
  transition: all 0.2s ease;
}

.modal-match-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.modal-match-name {
  font-size: 1.1rem !important;
  font-weight: 700;
  color: #333;
}

.modal-match-odd {
  font-size: 1.1rem !important;
  font-weight: 800;
  color: var(--bg-color);
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 6px;
}

.modal-match-details {
  display: flex;
  gap: 10px;
  align-items: center;
}

.modal-pick {
  font-size: 0.95rem;
  font-weight: 600;
  color: #666;
}

.modal-result {
  font-size: 0.9rem;
  font-weight: bold;
}

.modal-amount {
  font-size: 1.4rem !important;
  font-weight: 900;
}

/* Active Nav Item Styling */
.nav-item.active {
  color: var(--accent-color);
  text-shadow: 0 0 5px rgba(255, 184, 46, 0.5);
}

/* Mansion (Malikane) Styling */
.mansion-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px 20px 20px 20px;
  /* Added bottom padding to prevent sticking */
  box-sizing: border-box;
  font-family: var(--font-main);
  gap: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.mansion-container::-webkit-scrollbar {
  width: 8px;
}

.mansion-container::-webkit-scrollbar-track {
  background: rgba(255, 184, 46, 0.2);
  border-radius: 10px;
}

.mansion-container::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 10px;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.stat-card {
  background: white;
  padding: 25px 15px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 2px solid #eee;
}

.stat-card.won .stat-value {
  color: #2ecc71;
}

.stat-card.lost .stat-value {
  color: #e74c3c;
}

.stat-card.rate .stat-value {
  color: var(--accent-color);
}

.stat-card.avg-odd .stat-value {
  color: #3498db;
}

.stat-title {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--bg-color);
}

/* Chart Styling */
.chart-container {
  background: white;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 2px solid #eee;
}

.chart-container h4,
.recent-list h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--bg-color);
  font-size: 1.1rem;
}

.bar-chart {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 150px;
  padding-bottom: 5px;
}

.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 15%;
  height: 100%;
  justify-content: flex-end;
}

.bar {
  width: 100%;
  background: #eee;
  border-radius: 5px 5px 0 0;
  transition: height 0.5s ease;
}

.bar.filled {
  background: var(--accent-color);
}

.bar-label {
  margin-top: 5px;
  font-size: 0.8rem;
  color: #666;
}

/* Recent List Styling */
.recent-list {
  background: white;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 2px solid #eee;
}

.recent-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  font-weight: bold;
}

.recent-item:last-child {
  border-bottom: none;
}

.recent-item.win .amount {
  color: #2ecc71;
}

.recent-item.loss .amount {
  color: #e74c3c;
}

/* Kasa Overview Styling */
/* Kasa Overview Styling */
.kasa-overview-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  color: #5c4033;
  padding: 25px 30px;
  border-radius: 20px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.05);
  border: 3px solid #5c4033;
  margin-top: 10px;
  /* Reduce top margin */
  margin-bottom: 10px;
  /* Reduce bottom margin */
  cursor: pointer;
  transition: transform 0.2s ease;
}

.kasa-overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.05);
}

.kasa-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kasa-label {
  display: block;
  /* Restored */
  font-size: 0.8rem;
  color: #5c4033;
  letter-spacing: 1.5px;
  font-weight: 800;
  opacity: 0.9;
  text-transform: uppercase;
}

.kasa-amount {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  color: #f5e6d3;
  -webkit-text-stroke: 4px var(--text-color);
  paint-order: stroke fill;
  letter-spacing: -1px;
  font-family: 'Fredoka One', cursive;
  margin-top: 15px;
  /* Moved down */
  display: block;
}

.kasa-stats-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.kasa-change {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 6px 14px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 85px;
  text-align: center;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.kasa-change.positive {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
  border-color: rgba(46, 204, 113, 0.3);
}

.kasa-change.negative {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  border-color: rgba(231, 76, 60, 0.3);
}

.theme-kawaii .kasa-overview-card {
  background: linear-gradient(135deg, #ffc2d1 0%, #ff8fab 100%);
  border: var(--kawaii-border);
  box-shadow: 0 8px 20px rgba(255, 143, 171, 0.3);
}

.theme-kawaii .kasa-label {
  color: #5c4033;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.theme-kawaii .kasa-amount {
  color: #f5e6d3 !important;
}

.theme-kawaii .kasa-change {
  background: white;
  color: #5c4033;
  border: 3px solid #5c4033;
  border-radius: 50px;
  padding: 8px 20px;
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 3px 0 rgba(92, 64, 51, 0.2);
}

.theme-kawaii .kasa-change.positive {
  background-color: #cdedcf;
  /* Kawaii Green */
  color: #5c4033;
}

.theme-kawaii .kasa-change.negative {
  background-color: #ffc2d1;
  /* Kawaii Pink */
  color: #5c4033;
}

/* Stats Group Styling */
.stats-group {
  margin-bottom: 20px;
}

.stats-group-title {
  color: #2c3e50;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1rem;
  padding-left: 5px;
  border-left: 3px solid var(--accent-color);
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.stats-count {
  font-size: 1.5rem;
  font-weight: bold;
  color: #2c3e50;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.stat-card {
  flex: 1;
}

/* Wave Chart Styling */
.wave-chart {
  width: 100%;
  height: 150px;
  position: relative;
  overflow: hidden;
}

.wave-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

/* History Split Layout - Merged Card Style */
.history-split-container {
  display: flex;
  margin-top: 10px;
  align-items: flex-start;
  /* Removed Frame Styling */
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 20px;
  box-shadow: none;
}

.history-column {
  flex: 1;
  background: transparent;
  /* Remove white background */
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

.history-column h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #5c4033;
  font-size: 1.2rem;
  font-weight: 800;
  padding-bottom: 5px;
  text-transform: uppercase;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 350px;
  overflow-y: auto;
  padding-right: 5px;
  padding-bottom: 10px;
}

/* Custom Scrollbar for History List */
.history-list::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.history-list::-webkit-scrollbar-track {
  background: transparent;
}

.history-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.history-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.date-header {
  font-size: 0.9rem;
  color: #ff8fab;
  /* Pink */
  font-weight: 800;
  margin-top: 10px;
  margin-bottom: 5px;
  padding-left: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: transparent;
  padding-top: 5px;
  padding-bottom: 5px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-radius: 15px;
  background: var(--kawaii-yellow);
  border: 2px solid #5c4033;
  /* Brown border */
  box-shadow: 0 3px 0 rgba(92, 64, 51, 0.1);
  margin-bottom: 10px;
  transition: transform 0.2s;
}

.history-item:hover {
  transform: translateY(-2px);
}

.history-item.win,
.history-item.loss {
  border-left: 2px solid #5c4033;
  /* Reset override */
}

.match-info,
.coupon-info {
  display: flex;
  flex-direction: column;
}

.match-info span,
.coupon-info span {
  font-weight: bold;
  font-size: 0.9rem;
  color: #333;
}

.match-info small,
.coupon-info small {
  font-size: 0.75rem;
  color: #666;
}

.status-badge {
  padding: 6px 15px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #5c4033;
  background: var(--kawaii-yellow);
  border: 2px solid #5c4033;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}

.history-item.win .status-badge {
  background-color: #cdedcf;
  /* Pale Green for WIN */
}

.history-item.loss .status-badge {
  background-color: #ffc2d1;
  /* Pink for LOSS */
}

/* Colored odds for coupon status */
.status-badge.odd-win {
  background-color: #2ecc71;
}

.status-badge.odd-loss {
  background-color: #e74c3c;
}

.history-item.win .amount {
  color: #2ecc71;
  font-weight: bold;
}

.history-item.loss .amount {
  color: #e74c3c;
  font-weight: bold;
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  animation: slideIn 0.3s;
}

@keyframes slideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.close-modal {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  line-height: 20px;
}

.close-modal:hover,
.close-modal:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Modal Custom Content */
.modal-header-custom {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid #f0f0f0;
  padding: 15px;
  /* Centering Fix */
  width: 100%;
  box-sizing: border-box;
}

.modal-header-custom.compact {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.modal-header-custom h3 {
  margin: 0 auto;
  /* Extra centering insurance */
  color: #2c3e50;
  font-size: 1.1rem;
  text-align: center;
  width: 100%;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.modal-total-odd {
  font-size: 0.9rem;
  color: #666;
}

.modal-total-odd {
  font-size: 0.9rem;
  color: #666;
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
}

.modal-stake {
  font-size: 0.9rem;
  color: #666;
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
}

.footer-left {
  display: flex;
  gap: 10px;
  align-items: center;
}

.footer-right {
  display: flex;
  align-items: center;
}

.modal-amount {
  font-weight: bold;
  font-size: 1.1rem;
}

.modal-amount.win {
  color: #2ecc71;
}

.modal-amount.loss {
  color: #e74c3c;
}

.modal-matches-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-matches-list.compact {
  gap: 6px;
}

.modal-match-item {
  background: #f9f9f9;
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 4px solid #ddd;
}

.modal-match-item.win {
  border-left-color: #2ecc71 !important;
}

.modal-match-item.loss {
  border-left-color: #e74c3c !important;
}

.modal-match-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.modal-match-name {
  font-weight: bold;
  color: #333;
  font-size: 0.85rem;
}

.modal-match-odd {
  font-weight: bold;
  color: #a67c52;
  /* Soft brown for odds */
  font-size: 0.85rem;
}

.modal-match-details {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #666;
}

.modal-pick {
  font-weight: 600;
  color: #2980b9;
}

.text-success {
  color: #2ecc71;
  font-weight: bold;
}

.text-danger {
  color: #e74c3c;
  font-weight: bold;
}

.modal-header-custom h3 {
  margin: 0;
  color: #2c3e50;
}

.modal-amount {
  font-weight: bold;
  font-size: 1.2rem;
}

.modal-amount.win {
  color: #2ecc71;
}

.modal-amount.loss {
  color: #e74c3c;
}

.modal-matches-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-match-item {
  background: #f9f9f9;
  padding: 10px;
  border-radius: 8px;
  border-left: 3px solid #ddd;
}

.modal-match-name {
  font-weight: bold;
  color: #333;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.modal-match-details {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #666;
}

.modal-pick {
  font-weight: 600;
  color: #2980b9;
}

.text-success {
  color: #2ecc71;
  font-weight: bold;
}

.text-danger {
  color: #e74c3c;
  font-weight: bold;
}

.modal-footer-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  font-size: 0.9rem;
  color: #555;
  border-top: 1px solid #f0f0f0;
  padding-top: 10px;
}

/* Coupon match status colors - Consistent with badges */
.coupon-match.match-win {
  color: #2ecc71;
  font-weight: 600;
}

.coupon-match.match-loss {
  color: #e74c3c;
  font-weight: 600;
}

.history-item.coupon {
  cursor: pointer;
}

/* Weekly/Monthly change colors - Energetic & Bright */
.kasa-change.positive {
  color: #00C853;
  /* Matching energetic green */
  font-weight: bold;
}

.kasa-change.negative {
  color: #FF1744;
  /* Matching energetic red */
  font-weight: bold;
}

/* Pending coupon & match style matches finished cards */
.history-item.coupon.pending,
.history-item.match.pending,
.match.pending {
  background: #ffffff;
  border: 1px solid #eee;
  /* Light border for all sides */
}

.history-item.coupon.pending .status-badge,
.history-item.match.pending .status-badge,
.match.pending .status-badge {
  background-color: #fff59d;
  color: #5c4033 !important;
  /* Brown text for contrast */
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(255, 245, 157, 0.3);
}

/* ===== SETTINGS MODAL STYLES ===== */
.settings-modal-content {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 20px;
  max-width: 500px;
  width: 95%;
  max-height: 85vh;
  overflow: hidden;
  border: 2px solid var(--accent-color);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.settings-header {
  background: linear-gradient(135deg, var(--accent-color) 0%, #e6a715 100%);
  padding: 20px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-header h2 {
  margin: 0;
  color: #1a1a2e;
  font-size: 1.5rem;
  font-weight: bold;
}

.settings-header .close-modal {
  color: #1a1a2e;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.settings-header .close-modal:hover {
  opacity: 1;
}

.settings-body {
  padding: 20px;
  max-height: 55vh;
  overflow-y: auto;
}

.settings-body::-webkit-scrollbar {
  width: 6px;
}

.settings-body::-webkit-scrollbar-track {
  background: transparent;
}

.settings-body::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 3px;
}

.settings-section {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 15px 20px;
  margin-bottom: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-section h3 {
  margin: 0 0 15px 0;
  color: var(--accent-color);
  font-size: 1.1rem;
  font-weight: 600;
}

/* Settings Subtitle Spacing */
.settings-subtitle {
  margin-top: 35px !important;
  margin-bottom: 15px;
  font-size: 1.1rem;
  color: var(--accent-color);
  border-top: none !important;
  /* Removed dashed line */
  padding-top: 0 !important;
}

.settings-subtitle:first-of-type {
  margin-top: 0 !important;
  border-top: none;
  padding-top: 0;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.setting-row .switch,
.setting-row .segmented-control {
  margin-left: 15px;
  margin-right: 10px;
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-row span {
  color: #e0e0e0;
  font-size: 0.95rem;
}

.setting-input-row {
  margin-bottom: 12px;
}

.setting-input-row label {
  display: block;
  color: #a0a0a0;
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.setting-input-row input {
  width: 100%;
  padding: 12px 15px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.setting-input-row input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2);
}

.setting-input-row input::placeholder {
  color: #666;
}

/* Toggle Button Style - like textbox */
.toggle-btn {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #e74c3c;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s ease;
  background: linear-gradient(145deg, #e74c3c, #c0392b);
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.toggle-btn.active {
  background: linear-gradient(145deg, #2ecc71, #27ae60);
  border-color: #2ecc71;
}

.toggle-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Default Social and DB Buttons Styles */
.social-btns-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.social-btn {
  flex: 1;
  min-width: 90px;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  color: white;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.social-btn:hover {
  transform: scale(1.02);
}

.social-btn.coupon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.social-btn.morning {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.social-btn.night {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.db-actions-container {
  display: flex;
  gap: 10px;
  width: 100%;
}

.db-btn {
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.db-btn.refresh {
  flex: 1;
  background: var(--accent-color);
  color: var(--bg-color);
}

.db-btn.reset {
  flex: 1;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
}

/* Theme Kawaii Button Overrides */
.theme-kawaii .social-btn,
.theme-kawaii .db-btn {
  background: white !important;
  color: #5c4033 !important;
  border: 3px solid #5c4033 !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 0 rgba(92, 64, 51, 0.2) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-family: var(--font-main) !important;
}

.theme-kawaii .social-btn:hover,
.theme-kawaii .db-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 rgba(92, 64, 51, 0.2) !important;
}

/* Theme Circle Buttons */
.theme-options-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 10px;
}

.theme-circle-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 4px solid #ddd;
  background-color: #f0f0f0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: grayscale(100%);
  opacity: 0.7;
}

.theme-circle-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.theme-circle-btn.active {
  border-color: #ff8fab;
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(255, 143, 171, 0.4);
}

.theme-circle-btn:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.theme-circle-btn.active:hover {
  transform: scale(1.15);
}

.theme-label {
  display: block;
  text-align: center;
  margin-top: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #888;
}

.theme-btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.theme-kawaii .social-btn.coupon {
  background-color: #bfecff !important;
  /* Kawaii Blue */
}

.theme-kawaii .social-btn.morning {
  background-color: var(--kawaii-yellow) !important;
}

.theme-kawaii .social-btn.night {
  background-color: #dcd6f7 !important;
  /* Kawaii Purple-ish */
}

.theme-kawaii .db-btn.refresh {
  background-color: var(--kawaii-green) !important;
}

.theme-kawaii .db-btn.update-results {
  background-color: var(--kawaii-blue) !important;
}

.theme-kawaii .db-btn.reset {
  background-color: var(--kawaii-pink) !important;
}


/* Segmented Control Styles */
.segmented-control {
  background: #f5f5f5;
  /* Kırık beyaz arka plan */
  border-radius: 30px;
  padding: 4px;
  display: flex;
  position: relative;
  cursor: pointer;
  user-select: none;
  width: 150px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-top: 5px;
}

.segmented-control .segment {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 0.8rem;
  font-weight: 800;
  color: #888;
  /* Seçili olmayan font - koyu gri */
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  letter-spacing: 1px;
}

.segmented-control.on .segment[data-value="on"],
.segmented-control:not(.on) .segment[data-value="off"] {
  color: #ffffff !important;
  /* Seçili font - beyaz */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.segmented-control .segment-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: linear-gradient(135deg, var(--accent-color) 0%, #e6a715 100%);
  border-radius: 25px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.segmented-control.on .segment-slider {
  transform: translateX(100%);
}

.segmented-control[data-value="on"] .segment[data-value="on"] {
  color: #1a1a2e;
}

.segmented-control[data-value="off"] .segment[data-value="off"] {
  color: #1a1a2e;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e4e4e4;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input:checked+.slider {
  background: linear-gradient(145deg, var(--accent-color), #e6a715);
}

input:checked+.slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--accent-color) 0%, #e6a715 100%);
  color: #1a1a2e;
  border: none;
  padding: 14px 40px;
  border-radius: var(--radius-btn);
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-secondary {
  background: transparent;
  color: #FFA000;
  border: 1px solid #FFA000;
  padding: 8px 24px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-secondary:hover {
  background: rgba(255, 160, 0, 0.1);
  box-shadow: 0 4px 12px rgba(255, 160, 0, 0.15);
  transform: translateY(-1px);
}

.social-btn {
  font-family: "Fredoka One", cursive;
  background: white;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid #eee;
  color: #666;
  min-width: 100px;
}

/* Site Badges */
.supported-sites {
  margin-top: 10px;
}

.supported-sites label {
  color: #a0a0a0;
  font-size: 0.85rem;
  display: block;
  margin-bottom: 8px;
}

.site-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.site-badge {
  background: rgba(255, 193, 7, 0.15);
  color: var(--accent-color);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.settings-footer {
  padding: 20px;
  display: flex;
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== SETTINGS PAGE STYLES (Inside Content Area) ===== */
/* ===== SETTINGS PAGE STYLES (Inside Content Area) ===== */
.settings-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

/* Header removed in HTML */
.settings-header-bar {
  display: none;
}

.settings-toggle-container {
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
  /* Let clicks through container */
}

.settings-toggle-wrapper {
  pointer-events: auto;
  /* Re-enable clicks for the switch itself */
  background: #f5f5f5;
  /* Light gray/off-white instead of cream */
  border-radius: 50px;
  padding: 4px;
  display: flex;
  position: relative;
  width: 200px;
  /* Slightly narrower */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* Floating look */
  border: 2px solid #5c4033;
  /* Adding a brown border like other elements */
}

.settings-content-scroll {
  flex: 1;
  padding: 25px 20px 40px 20px;
  /* Consistent with other containers */
  overflow-y: auto;
  overflow-x: hidden;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.settings-content-scroll::-webkit-scrollbar {
  width: 8px;
}

.settings-content-scroll::-webkit-scrollbar-track {
  background: rgba(255, 184, 46, 0.2);
  border-radius: 10px;
}

.settings-content-scroll::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 10px;
}

/* Settings Card Design (Like Mansion Cards) */
.settings-card {
  width: 100%;
  box-sizing: border-box;
  background: white;
  /* White background as requested */
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  /* Soft shadow */
  border: 2px solid #eee;
  /* Light border */
}

.settings-card:last-child {
  margin-bottom: 80px;
  /* Space for FAB */
}

.settings-card h3 {
  margin: 0 0 15px 0;
  color: #1a213e;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px dashed #eee;
  padding-bottom: 10px;
}

/* FAB Save Button */
.settings-save-fab {
  position: absolute;
  bottom: 20px;
  left: 30px;
  transform: none;
  width: 48px;
  /* Smaller size */
  height: 48px;
  /* Smaller size */
  border-radius: 12px;
  /* Rounded square */
  background: linear-gradient(135deg, var(--accent-color) 0%, #e6a715 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(255, 184, 46, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 100;
}

.settings-save-fab:hover {
  transform: scale(1.1);
  /* Removed translateX */
  box-shadow: 0 6px 20px rgba(255, 184, 46, 0.6);
}

.settings-save-fab:active {
  transform: scale(0.95);
}

.setting-row {
  display: flex;
  flex-direction: row-reverse;
  /* Switch left, Text right */
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-row span {
  color: #2c3e50;
  /* Darker for better visibility */
  font-size: 1.1rem;
  /* Bigger */
  font-weight: 700;
  /* Bolder */
  text-align: right;
}

.setting-input-row {
  margin-bottom: 12px;
  display: flex;
  flex-direction: row-reverse;
  /* Align right: [Input] [Label] | */
  align-items: center;
  justify-content: space-between;
  /* Spread them out or keep packed? User said "side by side", visually appealing */
}

.setting-input-row label {
  display: block;
  color: #2c3e50;
  /* Darker */
  font-size: 1.1rem;
  /* Bigger (v56) */
  margin: 0;
  font-weight: 700;
  /* Bolder */
  text-align: right;
  flex: 1;
}

.setting-input-row input {
  width: 200px;
  /* Wider input as requested */
  padding: 10px 14px;
  /* More comfortable padding */
  background: #fff;
  /* Solid white back */
  border: 2px solid #e0e0e0;
  /* Distinct border */
  border-radius: 10px;
  color: #1a213e;
  font-size: 1.1rem;
  /* Slightly clearer text */
  font-weight: 700;
  font-family: inherit;
  transition: all 0.2s;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
  text-align: center;
  /* Center text inside input for better look */
}

.setting-input-row input:focus {
  outline: none;
  background: white;
  border-color: var(--accent-color);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Hide Spinners for Number Inputs */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.settings-action-bar {
  padding: 20px;
  display: flex;
  justify-content: center;
  border-top: none;
  background: transparent;
}



/* Buttons - Light Theme */
.btn-primary {
  background: linear-gradient(135deg, var(--accent-color) 0%, #e6a715 100%);
  color: #1a1a2e;
  border: none;
  padding: 12px 35px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 3px 10px rgba(255, 193, 7, 0.3);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
}

.btn-secondary {
  background: transparent;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  margin-top: 8px;
}

.btn-secondary:hover {
  background: var(--accent-color);
  color: #1a1a2e;
}

/* Site Badges */
.supported-sites {
  margin-top: 8px;
}

.supported-sites label {
  color: #666;
  font-size: 0.8rem;
  display: block;
  margin-bottom: 6px;
}

.site-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.site-badge {
  background: rgba(255, 193, 7, 0.15);
  color: #b8860b;
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Hide Scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html,
body {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* =========================================
   MOBILE RESPONSIVE DESIGN
   ========================================= */
@media screen and (max-width: 768px) {

  /* Fix horizontal overflow on mobile */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Reset Main Container */
  * {
    box-sizing: border-box !important;
  }

  .main-container {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Content Area - Full Width */
  /* Force body to respect viewport on real mobile devices */
  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    position: relative !important;
  }

  .content-area {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    box-sizing: border-box !important;
  }

  /* Board - Mobile layout */
  .board {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
    border: none;
    box-shadow: none;
    padding: 0;
    padding-top: 160px !important;
    padding-bottom: 70px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* Fixed Header Container with Mascot + Logo */
  .logo-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 110px !important;
    box-sizing: border-box !important;
    /* Fix height calculation overlap */
    background: var(--bg-color) !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1000 !important;
    padding: 10px 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
  }

  .logo {
    height: 95px !important;
    transform: none !important;
    margin-top: 15px !important;
    /* Move logo down on mobile */
  }

  /* Mascot in Header - Left Side relative to center */
  .mascot-container {
    display: block !important;
    position: fixed !important;
    top: 30px !important;
    /* Reverted to 35px (Up) */
    /* Moved down 50px (35 -> 85) */
    left: 50% !important;
    transform: translateX(-177px) !important;
    /* Moved left 50px (-127 -> -177) */
    /* To the left of logo */
    width: 80px !important;
    height: 80px !important;
    z-index: 1001 !important;
    pointer-events: none !important;
    margin: 0 !important;
  }

  .mascot {
    display: block !important;
    max-height: 80px !important;
    transform: none !important;
  }

  /* Fixed Navigation Below Header */
  .nav-links {
    position: fixed !important;
    top: 110px !important;
    /* Directly below header */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 45px !important;
    background: var(--board-bg) !important;
    transform: none !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    border-bottom: 3px solid var(--accent-color) !important;
    z-index: 999 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .nav-item {
    font-size: 0.85rem !important;
    padding: 10px 5px !important;
    flex: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
    font-weight: 700 !important;
  }

  /* View Sections */
  .view-section {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Match List Fixes */
  .matches-container {
    width: 100%;
    max-width: 100%;
    padding: 10px 4px !important;
    /* Reduced side padding (was 15px) */
    box-sizing: border-box;
    margin: 0 auto;
  }

  .match-list {
    width: 100%;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .match-item {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px 12px;
    font-size: 0.95rem;
    box-sizing: border-box !important;
    overflow: hidden;
    min-height: 60px;
    margin: 4px 0;
  }

  .match-name,
  .team-name,
  .home-team,
  .away-team {
    font-size: 1.0rem !important;
    /* Increased font size */
    font-weight: 600;
    /* Added weight */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40% !important;
    /* Slightly increased width */
  }

  .score {
    min-width: 50px;
    /* Increased min-width */
    padding: 4px 8px;
    font-size: 1.1rem !important;
    /* Increased font size */
    font-weight: 800;
    /* Bolder score */
    flex-shrink: 0;
  }

  /* Coupons Container */
  .coupons-container {
    width: 100%;
    max-height: calc(100vh - 230px) !important;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .coupon-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
  }

  /* Mansion Container */
  .mansion-container {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  .history-split-container {
    flex-direction: column;
    gap: 15px;
  }

  .history-column {
    width: 100%;
    max-height: 300px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .history-list {
    width: 100% !important;
    padding: 0 !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .stats-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
  }

  .stat-card {
    flex: none !important;
    width: 100% !important;
    min-width: unset !important;
    min-height: 80px !important;
    height: auto !important;
    padding: 15px 10px !important;
    box-sizing: border-box !important;
  }

  /* Fixed Footer (Kasa) */
  .footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: var(--bg-color) !important;
    padding: 12px 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3) !important;
    z-index: 1001 !important;
  }

  .kasa-display {
    font-size: 1.3rem !important;
    margin: 0 !important;
  }

  /* Modal Fixes */
  .modal-content {
    width: 95% !important;
    max-width: 350px !important;
    margin: 15% auto !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

  /* Settings Page */
  .settings-content-scroll {
    padding: 15px 10px;
  }

  .settings-card {
    padding: 12px;
  }

  .setting-input-row {
    flex-direction: column;
    align-items: stretch;
  }

  .setting-input-row input {
    width: 100%;
  }
}

/* =========================================
   NANO THEME (Pastel & Playful)
   ========================================= */
body.theme-nano {
  font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif !important;
  --radius-card: 20px;
}

/* Stats Cards in Nano Theme */
body.theme-nano .stat-card {
  border: 3px solid #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}

body.theme-nano .stat-card .stat-title {
  color: #555 !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8rem;
}

body.theme-nano .stat-card .stat-value {
  color: #333 !important;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
}

/* Specific Card Colors */
body.theme-nano .stat-card.won {
  background-color: #bfffc6 !important;
  /* Pastel Green */
}

body.theme-nano .stat-card.lost {
  background-color: #ffbfbf !important;
  /* Pastel Red */
}

body.theme-kawaii .stat-card.rate {
  background-color: #ffffc2 !important;
  /* Pastel Yellow */
}

/* Kawaii Navigation Colors */
.theme-kawaii .nav-links {
  background: transparent;
  padding: 10px;
  gap: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.theme-kawaii .nav-item {
  color: #f5e6d3 !important;
  border-radius: 100px;
  padding: 8px 20px !important;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.9rem;
  /* Slightly smaller for better fit */
  text-shadow: none !important;
  -webkit-text-stroke: 4px #5c4033 !important;
  paint-order: stroke fill !important;
  transition: all 0.2s;
  flex-shrink: 0;
  display: inline-block;
}

.theme-kawaii .nav-item[onclick*="matches"] {
  background-color: var(--kawaii-yellow);
  border: var(--kawaii-border);
  box-shadow: 0 4px 0 #5c4033;
}

.theme-kawaii .nav-item[onclick*="coupons"] {
  background-color: var(--kawaii-blue);
  border: var(--kawaii-border);
  box-shadow: 0 4px 0 #5c4033;
}

.theme-kawaii .nav-item[onclick*="mansion"] {
  background-color: var(--kawaii-green);
  border: var(--kawaii-border);
  box-shadow: 0 4px 0 #5c4033;
}

.theme-kawaii .nav-item.active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #5c4033;
}

.theme-kawaii .kasa-overview-card {
  background: white !important;
  border: var(--kawaii-border) !important;
  border-radius: 20px !important;
  position: relative;
  margin-top: 15px !important;
  padding-top: 25px !important;
  padding-bottom: 25px !important;
  min-height: 100px !important;
  height: auto !important;
  overflow: hidden;
  box-shadow: 0 6px 0 rgba(92, 64, 51, 0.1);
}

/* Removed DETAYLAR header */

.theme-kawaii .kasa-amount {
  color: #f5e6d3 !important;
  font-size: 3.5rem !important;
  font-weight: 900;
  -webkit-text-stroke: 4px #5c4033 !important;
  paint-order: stroke fill !important;
}

.theme-kawaii .stat-card {
  border: var(--kawaii-border) !important;
  border-radius: 15px !important;
  background: white !important;
  box-shadow: 0 4px 0 rgba(92, 64, 51, 0.2) !important;
}

.theme-kawaii .stat-card.won {
  background-color: var(--kawaii-yellow) !important;
}

.theme-kawaii .stat-card.lost {
  background-color: var(--kawaii-blue) !important;
}

.theme-kawaii .stat-card.rate {
  background-color: var(--kawaii-green) !important;
}

.theme-kawaii .stat-card.avg-odd {
  background-color: white !important;
}

.theme-kawaii .stat-title {
  color: #5c4033 !important;
  font-weight: 800;
}

.theme-kawaii .stat-value {
  color: #5c4033 !important;
  font-weight: 900;
}

.theme-kawaii .settings-card {
  border: var(--kawaii-border) !important;
  border-radius: 20px !important;
  background: white !important;
  box-shadow: 0 5px 0 rgba(92, 64, 51, 0.1) !important;
}

/* Kawaii History Styling */
.theme-kawaii .history-column {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.theme-kawaii .history-column h4 {
  color: #5c4033 !important;
  font-family: var(--font-main) !important;
  font-size: 1.1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-bottom: 3px dashed var(--kawaii-pink) !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}

.theme-kawaii .history-list {
  background: transparent !important;
  /* Removed white bg */
  border: none !important;
  /* Removed border */
  box-shadow: none !important;
  /* Removed shadow */
  padding: 0 !important;
  /* Removed padding */
}

.theme-kawaii .history-item {
  background: white !important;
  border: 2px solid #5c4033 !important;
  /* Restored Border */
  border-radius: 12px !important;
  box-shadow: 0 3px 0 rgba(92, 64, 51, 0.1) !important;
  margin-bottom: 8px !important;
  padding: 10px !important;
  transition: transform 0.2s ease !important;
}

.theme-kawaii .history-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 0 rgba(92, 64, 51, 0.15) !important;
}

.theme-kawaii .history-item.win {
  background-color: #cdedcf !important;
  /* Kawaii Green */
  border-left-width: 2px !important;
}

.theme-kawaii .history-item.loss {
  background-color: #ffc2d1 !important;
  /* Kawaii Pink */
  border-left-width: 2px !important;
}

.theme-kawaii .history-item.pending {
  background-color: var(--kawaii-yellow) !important;
  border-left-width: 2px !important;
}


.theme-kawaii .status-badge {
  border: 2px solid #5c4033 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 0 rgba(92, 64, 51, 0.2) !important;
  text-shadow: none !important;
}

.theme-kawaii .date-header {
  color: #ff8fab !important;
  background: transparent !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  border: none !important;
}


.theme-kawaii h3 {
  color: #5c4033 !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Kawaii Coupon Card Styling */
.theme-kawaii .coupon-card {
  background: white !important;
  border: 3px solid #5c4033 !important;
  border-radius: 25px !important;
  box-shadow: 0 6px 0 #5c4033 !important;
  overflow: hidden !important;
  margin-bottom: 25px !important;
  width: 100% !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.theme-kawaii .coupon-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 0 #5c4033 !important;
}

.theme-kawaii .coupon-header {
  background: white !important;
  padding: 12px 15px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 3px dashed rgba(92, 64, 51, 0.2) !important;
}

.theme-kawaii .coupon-title {
  color: #5c4033 !important;
  font-family: var(--font-main) !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  font-size: 1.1rem !important;
}

.theme-kawaii .coupon-rate {
  background: #fff !important;
  color: #5c4033 !important;
  border: 2px solid #5c4033 !important;
  border-radius: 20px !important;
  padding: 2px 12px !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 0 #5c4033 !important;
}

.theme-kawaii .coupon-matches {
  padding: 15px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.theme-kawaii .coupon-match {
  border-bottom: 1px dashed rgba(92, 64, 51, 0.1) !important;
  padding-bottom: 8px !important;
  color: #5c4033 !important;
  font-weight: 600 !important;
  font-family: var(--font-main) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.theme-kawaii .coupon-match span:first-child {
  font-size: 0.85rem !important;
  flex: 1;
}

.theme-kawaii .coupon-match .prediction {
  color: #ff8fab !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  background: white;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(92, 64, 51, 0.1);
}

/* Coupon Outcome Overrides for Kawaii */
.theme-kawaii .coupon-card.coupon-win {
  background-color: var(--kawaii-green) !important;
  border-color: #5c4033 !important;
  box-shadow: 0 6px 0 #5c4033 !important;
}

.theme-kawaii .coupon-card.coupon-win .coupon-header {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.theme-kawaii .coupon-card.coupon-loss {
  background-color: var(--kawaii-pink) !important;
  border-color: #5c4033 !important;
  box-shadow: 0 6px 0 #5c4033 !important;
  /* Base 3D shadow */
}

/* Tactile Feel for Kawaii Theme */
.theme-kawaii .coupon-card {
  border-width: 3px !important;
  box-shadow: 0 6px 0 rgba(92, 64, 51, 0.15) !important;
  /* Default shadow */
  transition: all 0.15s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

.theme-kawaii .coupon-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 0 rgba(92, 64, 51, 0.15) !important;
}

.theme-kawaii .coupon-card:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 rgba(92, 64, 51, 0.15) !important;
}

/* Override for specific statuses to keep color consistency */
.theme-kawaii .coupon-card.coupon-win:hover {
  box-shadow: 0 10px 0 #2e7d32 !important;
}

.theme-kawaii .coupon-card.coupon-win:active {
  box-shadow: 0 2px 0 #2e7d32 !important;
}

.theme-kawaii .coupon-card.coupon-loss:hover {
  box-shadow: 0 10px 0 #5c4033 !important;
}

.theme-kawaii .coupon-card.coupon-loss:active {
  box-shadow: 0 2px 0 #5c4033 !important;
}

.theme-kawaii .coupon-card.coupon-loss .coupon-header {
  background-color: rgba(255, 255, 255, 0.3) !important;
}


.theme-kawaii .segmented-control {
  border: var(--kawaii-border);
}

.theme-kawaii input[type="text"],
.theme-kawaii input[type="number"] {
  border: var(--kawaii-border);
  border-radius: 10px;
}

.theme-kawaii .kasa-display {
  background: var(--kawaii-pink);
  border: var(--kawaii-border);
  color: #f5e6d3;
  font-weight: 900;
  padding: 10px 30px;
  border-radius: 100px;
  box-shadow: 0 4px 0 #5c4033;
  -webkit-text-stroke: 4px #5c4033;
  paint-order: stroke fill;
}

/* --- Kawaii Modal Styles --- */
/* Keyframes for Bounce Animation */
@keyframes kawaiiBounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }

  50% {
    transform: scale(1.05);
    opacity: 1;
  }

  70% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.theme-kawaii .modal {
  background-color: rgba(255, 194, 209, 0.45) !important;
  /* Soft Pink Tint */
  backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}

.theme-kawaii .modal-content {
  background-color: #ffffff !important;
  border: 3px solid #5c4033 !important;
  border-radius: 30px !important;
  box-shadow: 0 10px 0 #5c4033, 0 15px 30px rgba(0, 0, 0, 0.1) !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-family: var(--font-main) !important;
  animation: kawaiiBounceIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.theme-kawaii .modal-header-custom {
  background: linear-gradient(135deg, #ffc2d1 0%, #ff8fab 100%) !important;
  /* Gradient Header */
  border-bottom: var(--kawaii-border) !important;
  padding: 20px 25px !important;
  position: relative;
  overflow: hidden;
}

/* Shine effect on header */
.theme-kawaii .modal-header-custom::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.4), transparent);
  pointer-events: none;
}

.theme-kawaii .modal-header-custom h3 {
  color: #5c4033 !important;
  margin: 0 !important;
  font-size: 1.5rem !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.4);
  position: relative;
  z-index: 1;
}

.theme-kawaii .close-modal {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 35px;
  height: 35px;
  background: #5c4033;
  color: white !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 100;
  transition: all 0.2s;
  border: 2px solid white;
}

.theme-kawaii .close-modal:hover {
  transform: scale(1.1) rotate(90deg);
  background: #ff8fab;
}

.theme-kawaii .modal-matches-list {
  padding: 0 !important;
  gap: 12px !important;
}

.theme-kawaii .modal-match-item {
  background: white !important;
  border: 3px solid #5c4033 !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 0 rgba(92, 64, 51, 0.15) !important;
  padding: 15px !important;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease !important;
}

.theme-kawaii .modal-match-item:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 8px 0 rgba(92, 64, 51, 0.15) !important;
}

.theme-kawaii .modal-match-name {
  color: #5c4033 !important;
  font-size: 1.15rem !important;
}

.theme-kawaii .modal-match-odd {
  background: var(--kawaii-yellow) !important;
  border: 2px solid #5c4033 !important;
  color: #5c4033 !important;
  font-weight: 900 !important;
}

.theme-kawaii .modal-footer-custom {
  background: linear-gradient(135deg, #fdf0d5 0%, #fff9e6 100%) !important;
  border-top: var(--kawaii-border) !important;
  padding: 20px 25px !important;
  box-shadow: inset 0 4px 10px rgba(92, 64, 51, 0.05);
}

.theme-kawaii .modal-amount {
  color: #5c4033 !important;
  -webkit-text-stroke: 1px #5c4033;
}

.theme-kawaii .modal-amount.win {
  color: #2ecc71 !important;
}

.theme-kawaii .modal-amount.loss {
  color: #e74c3c !important;
}

.theme-kawaii .modal-amount.pending {
  color: var(--accent-color) !important;
}

/* Match Detail (Individual) for Kawaii */
.theme-kawaii .match-teams {
  background: white;
  border: 3px solid #5c4033;
  border-radius: 20px;
  padding: 20px;
  margin: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.theme-kawaii .vs-text {
  background: var(--kawaii-pink);
  color: #5c4033;
  padding: 5px 12px;
  border-radius: 50%;
  border: 2px solid #5c4033;
  font-weight: 900;
}

.theme-kawaii .info-item {
  background: white !important;
  border: 2px solid #5c4033 !important;
  border-radius: 15px !important;
  padding: 10px !important;
}


body.theme-nano .stat-card.avg-odd {
  background-color: #bfecff !important;
  /* Pastel Blue */
}

/* Modal Styling for Nano */
body.theme-nano .modal-content {
  border-radius: 25px;
  border: 5px solid #ff9a9e;
  background: #fff5f8;
}

/* Base Coupon Card Style - Enhanced Tactile Feel */
.coupon-card {
  position: relative;
  transition: all 0.15s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
  cursor: pointer;
  /* Hardware acceleration for smooth movement */
  transform: translate3d(0, 0, 0);
  /* Prevent text blurring during transform */
  backface-visibility: hidden;
}

/* Hover State - Lift up */
.coupon-card:hover {
  transform: translateY(-4px) !important;
}

/* Active State - Press down (Tactile feedback) */
.coupon-card:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 rgba(92, 64, 51, 0.1) !important;
}

body.theme-nano .coupon-card {
  border-radius: 20px;
  border: 4px solid #ff9a9e !important;
  /* Thicker border */
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 0 #ffb7b2 !important;
  /* 3D Shadow Pink */
}

body.theme-nano .coupon-card:hover {
  box-shadow: 0 10px 0 #ffb7b2 !important;
}

body.theme-nano .coupon-card:active {
  box-shadow: 0 2px 0 #ffb7b2 !important;
  border-color: #ff9a9e !important;
}

/* Utility - MUST BE AT THE END FOR MAX SPECIFICITY */
.d-none {
  display: none !important;
}

/* Match Detail Modal Styles */
.match-detail-content {
  padding: 15px;
}

.match-teams {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.match-teams .team-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
}

.match-teams .vs-text {
  font-size: 1rem;
  color: #999;
  font-weight: 400;
}

.match-result-display {
  text-align: center;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
}

.match-result-display.win {
  background-color: #d4edda;
  border: 2px solid #28a745;
}

.match-result-display.loss {
  background-color: #f8d7da;
  border: 2px solid #dc3545;
}

.match-result-display.pending {
  background-color: #fff3cd;
  border: 2px solid #ffc107;
}

.match-result-display .result-score {
  font-size: 1.5rem;
  font-weight: 700;
}

.match-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.match-info-grid .info-item {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
}

.match-info-grid .info-label {
  display: block;
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 5px;
}

.match-info-grid .info-value {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.match-info-grid .info-value.win {
  color: #28a745;
}

.match-info-grid .info-value.loss {
  color: #dc3545;
}

.match-info-grid .info-value.pending {
  color: #ffc107;
}

/* Settings Floating Button */
.settings-icon-btn {
  position: fixed;
  top: 25px;
  /* Restored position */
  left: 25px;
  /* Restored position */
  width: 45px;
  /* Enlarged */
  height: 45px;
  /* Enlarged */
  background: transparent;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 9999;
  transition: transform 0.3s ease;
}

.settings-star {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.settings-icon-btn:hover {
  transform: rotate(90deg) scale(1.2);
}

/* Utility class */
.d-none {
  display: none !important;
}

/* Fix cream bands at top and bottom of tabs */
.view-section,
#matches-view,
#coupons-view,
#mansion-view,
#settings-view,
#analysis-view {
  margin-top: 0 !important;
  height: 100% !important;
}

#analysis-view {
  display: none;
  animation: fadeIn 0.3s ease-out;
  padding-bottom: 20px;
  /* Reduce bottom padding */
  margin-top: 10px;
  /* Reduce top margin to pull closer */
}

/* Analysis Card Sizing/Spacing Adjustment */
.analysis-grid {
  margin-bottom: 15px;
  /* Compact grid spacing */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  width: 100%;
  padding: 10px;
}

.stat-card-analysis {
  background: white !important;
  border: 2px solid #f0f0f0 !important;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.stat-card-analysis:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  border-color: var(--accent-color) !important;
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px dashed #f5f5f5;
  padding-bottom: 10px;
  margin-bottom: 5px;
}

.stat-pick {
  font-weight: 800;
  color: #2c3e50;
  font-size: 1.2rem;
  letter-spacing: -0.5px;
}

.stat-rate {
  font-weight: 900;
  font-size: 1.3rem;
  padding: 4px 10px;
  background: #f8f9fa;
  border-radius: 10px;
}

.high-success .stat-rate {
  color: #2ecc71;
  background: rgba(46, 204, 113, 0.1);
}

.mid-success .stat-rate {
  color: #f39c12;
  background: rgba(243, 156, 18, 0.1);
}

.low-success .stat-rate {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
}

.stat-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  font-weight: 600;
  color: #666;
}

.success-text {
  color: #2ecc71;
  font-weight: 700;
}

.fail-text {
  color: #e74c3c;
  font-weight: 700;
}

.odd-text {
  color: var(--accent-color);
  font-weight: 700;
}

/* Fix for white bands in match list */
#matches-view,
.matches-container,
.match-list,
.view-section,
.daily-picks-view {
  background-color: transparent !important;
  background: transparent !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  box-shadow: none !important;
}

/* COUPON CARD STYLE for Match Items (Daily Picks) */
.match-item {
  margin: 0 auto 8px auto !important;
  width: 100% !important;
  border-radius: 12px;
  overflow: visible;
  padding: 12px 16px !important;
  min-height: unset !important;
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  flex-direction: row !important;
  /* Horizontal layout */
  align-items: center !important;
  justify-content: space-between !important;
  /* Teams left/right, score center */
  border: 2px solid #eee !important;
  height: auto !important;
  transition: transform 0.2s, border-color 0.2s;
  position: relative;
}

.match-item:hover {
  transform: translateY(-2px);
  border-color: var(--accent-color) !important;
}

/* Team Names - Left and Right */
.match-item .home-team {
  flex: 1;
  text-align: left !important;
  font-weight: 700 !important;
  color: #333;
  font-size: 1.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
}

.match-item .away-team {
  flex: 1;
  text-align: right !important;
  font-weight: 700 !important;
  color: #333;
  font-size: 1.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 10px;
}

/* Prediction Badge - Center */
/* Prediction Badge - Dark Pill Style (User Requested) */
.match-item .score,
.match-item .prediction-badge {
  flex-shrink: 0;
  background: #ffc2d1 !important;
  /* Kawaii Pink Background */
  color: #5c4033 !important;
  /* Theme Brown Text */
  padding: 10px 20px !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  /* Extra Bold */
  font-size: 1.2rem !important;
  /* Same as team names */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 4px 10px rgba(255, 194, 209, 0.4) !important;
  min-width: 100px;
  font-family: inherit !important;
  /* Use theme font */
  border: 1px solid rgba(92, 64, 51, 0.1) !important;
  /* Subtle border */
}

.theme-kawaii .match-item .score small,
.theme-kawaii .match-item .prediction-badge small,
.theme-kawaii .match-item .odd-val {
  color: #5c4033 !important;
  /* Theme Brown */
  font-weight: 800 !important;
  /* Keep bold */
  opacity: 0.9;
}

/* Specific status colors overlay */
.match-item.win {
  background: #c8f7d5 !important;
  /* Darker green */
  border-color: #2ecc71 !important;
}

.match-item.loss {
  background: #fde7e4 !important;
  /* Light pink/peach */
  border-color: #e74c3c !important;
}

.match-item.pending {
  background: #fff9e6 !important;
  /* Light yellow/cream for pending */
  border-color: #fce4ec !important;
  /* Pastel Pink border instead of orange */
}



/* Mobile responsive for Daily Picks cards */
@media (max-width: 768px) {

  .match-item .home-team,
  .match-item .away-team {
    font-size: 0.85rem !important;
  }

  .match-item .score,
  .match-item .prediction-badge {
    font-size: 0.7rem !important;
    padding: 5px 8px !important;
    min-width: 60px !important;
  }
}

/* Navigation Indicator (Triangle) */
/* Navigation Indicator (Triangle) */
/* Navigation Indicator (Soft Rounded Tab) */
#nav-indicator {
  position: absolute;
  top: -10px;
  /* Moved up 2px */
  width: 14px;
  height: 14px;
  /* Square for rotation */
  background-color: transparent;
  /* Hollow inside */
  border-top: 2px solid #59432d;
  border-left: 2px solid #59432d;
  border-right: none;
  border-bottom: none;
  transform: translateX(-50%) rotate(45deg);
  border-top-left-radius: 6px;
  /* Soft tip */
  z-index: 102;
  transition: left 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  display: none;
  /* Hidden by default, shown by JS */
  box-shadow: none;
}

/* Show indicator for specific themes */
.theme-kawaii #nav-indicator,
.theme-terminal #nav-indicator,
.theme-cute #nav-indicator,
.theme-nano #nav-indicator {
  visibility: visible;
  opacity: 1;
}

/* Pseudo elements removal */
#nav-indicator::before,
#nav-indicator::after {
  content: none !important;
  display: none !important;
}

/* Kawaii Theme Indicator Override */
.theme-kawaii #nav-indicator {
  border-top: 2px solid #5c4033;
  border-left: 2px solid #5c4033;
  border-top-left-radius: 4px;
  /* Extra soft */
  background-color: transparent;
  /* Hollow for Kawaii too */
}

/* Terminal Theme Indicator Override */
.theme-terminal #nav-indicator {
  border-top: 2px solid #00ff00;
  border-left: 2px solid #00ff00;
  border-radius: 0;
  background-color: #111111;
  top: -12px;
}

/* Specific Logo Adjustment for Kawaii Theme */
.theme-kawaii .logo {
  position: relative;
  top: -20px;
  /* 10px more up */
  left: -10px;
}

/* Kawaii Theme Settings Overrides */
.theme-kawaii #settings-toggle-bg {
  background: #ff8fab !important;
  /* Pink toggle */
}

.theme-kawaii .settings-page input[type="checkbox"] {
  accent-color: #ff8fab !important;
}



/* Specific overrides for buttons if needed, e.g. "Mesaj Gönder" buttons usually have their own gradients, maybe keep them?
   But "Sıfırla" and "Yenile" should match theme if possible, or keep semantic colors (Red/Green).
   Let's make sure the Bet Type toggles match.
*/
.theme-kawaii .checkbox-item input:checked {
  accent-color: #ff8fab !important;
}

.theme-kawaii .bet-types-grid .checkbox-item:has(input:checked) {
  border-color: #ff8fab !important;
  /* This might need JS updates to handle properly if checks are simple */
}

/* Bet Type Buttons (if they use the active class logic we saw in JS) */
.theme-kawaii .settings-card button.active {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%) !important;
  border-color: #ff9a9e !important;
}

/* Legacy pseudo-elements removed */

/* Ensure indicator is visible when positioned */
.board[data-indicator-ready="true"] #nav-indicator {
  display: block;
}

/* Modern Custom Checkbox */
.checkbox-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: white !important;
  border: 2px solid #eee !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  user-select: none !important;
}

.checkbox-item:hover {
  border-color: var(--accent-color) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.checkbox-item input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  border: 2px solid #ddd !important;
  border-radius: 6px !important;
  background: white !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.3s ease !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.checkbox-item input[type="checkbox"]:checked {
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  transform: scale(1.1) !important;
}

.checkbox-item input[type="checkbox"]:checked::after {
  content: "✓" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: bold !important;
}

.checkbox-item span {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #444 !important;
}

.theme-kawaii .checkbox-item {
  border-radius: 20px !important;
  border: var(--kawaii-border) !important;
}

.theme-kawaii .checkbox-item input[type="checkbox"] {
  border-radius: 8px !important;
  border-width: 3px !important;
}

.settings-rates-row {
  display: flex !important;
  gap: 15px !important;
  margin: 10px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Range Slider Styling */
.range-slider-section {
  flex: 1 !important;
  margin: 0 !important;
  padding: 12px !important;
  background: rgba(0, 0, 0, 0.02) !important;
  border-radius: 12px !important;
  min-width: 0 !important;
  /* Allow shrinking */
}

.range-slider-section h4 {
  margin: 0 0 10px 0 !important;
  font-size: 0.85rem !important;
  color: #666 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.range-slider-section h4 span {
  font-weight: 800 !important;
  color: var(--accent-color) !important;
  font-size: 0.8rem !important;
}

.range-slider-container {
  position: relative !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
}

.slider-track {
  position: absolute !important;
  width: 100% !important;
  height: 6px !important;
  background: #eee !important;
  border-radius: 3px !important;
  z-index: 1 !important;
}

.slider-range {
  position: absolute !important;
  height: 6px !important;
  background: var(--accent-color) !important;
  border-radius: 3px !important;
  z-index: 2 !important;
}

.range-input {
  position: absolute !important;
  width: 100% !important;
  background: none !important;
  pointer-events: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  z-index: 3 !important;
  margin: 0 !important;
  height: 0 !important;
  /* Ensure inputs don't take height */
}

.range-input.active-input {
  z-index: 4 !important;
}

.range-input::-webkit-slider-thumb {
  height: 20px !important;
  width: 20px !important;
  border-radius: 50% !important;
  background: white !important;
  border: 3px solid var(--accent-color) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease !important;
}

.range-input::-webkit-slider-thumb:hover {
  transform: scale(1.3) !important;
  background: var(--accent-color) !important;
  border-color: white !important;
  box-shadow: 0 0 10px var(--accent-color) !important;
}

/* Bet Type Grid Buttons */
.bet-types-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin-top: 5px !important;
}

/* Single Slider Adjustment */
.range-slider-container.single-slider {
  height: 40px;
}

.range-slider-container.single-slider .slider-range {
  height: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-radius: 4px;
  z-index: 2 !important;
  pointer-events: none;
  left: 0;
  background: var(--accent-color) !important;
}

.range-slider-container.single-slider .range-input {
  width: 100%;
}

.theme-kawaii .range-slider-container.single-slider .slider-track {
  background: #ffe5ec !important;
  height: 8px !important;
  border: 2px solid #ffc2d1 !important;
}

.bet-type-btn {
  background: white !important;
  border: 3px solid #5c4033 !important;
  border-radius: 20px !important;
  padding: 10px 5px !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  color: #5c4033 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
  box-shadow: 0 4px 0 #5c4033 !important;
  font-family: var(--font-main) !important;
  text-transform: uppercase !important;
}

.bet-type-btn.active {
  color: #5c4033 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 0 #5c4033 !important;
}

.bet-type-btn#bet-type-taraf.active {
  background-color: var(--kawaii-green) !important;
}

.bet-type-btn#bet-type-altust.active {
  background-color: var(--kawaii-blue) !important;
}

.bet-type-btn#bet-type-varyok.active {
  background-color: var(--kawaii-pink) !important;
}

.bet-type-btn:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 6px 0 rgba(92, 64, 51, 0.1) !important;
}

.bet-type-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 0 #5c4033 !important;
}

.theme-kawaii .bet-type-btn {
  border: 3px solid #5c4033 !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 0 #5c4033 !important;
  transform: translateY(-2px) !important;
}

.theme-kawaii .bet-type-btn:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.theme-kawaii .bet-type-btn.active {
  background-color: #cdedcf !important;
  /* Yeşil arka plan */
  border-color: #5c4033 !important;
  color: #5c4033 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 0 #5c4033 !important;
}

.theme-kawaii .range-slider-section {
  background: #fffaf0 !important;
  /* Creamy White */
  border: 3px solid #5c4033 !important;
  /* Solid Brown */
  border-radius: 20px !important;
  box-shadow: 0 6px 0 rgba(92, 64, 51, 0.15) !important;
  padding: 15px !important;
}

.theme-kawaii .range-slider-section h4 {
  color: #5c4033 !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
}

.theme-kawaii .slider-track {
  background: #efe6dd !important;
  /* Beige Track */
  height: 12px !important;
  /* Slightly thicker */
  border: 2px solid #5c4033 !important;
  border-radius: 10px !important;
}

.theme-kawaii .slider-range {
  background: #5c4033 !important;
  /* Brown Fill */
  height: 12px !important;
  border-radius: 10px !important;
}

.theme-kawaii .range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 24px !important;
  width: 24px !important;
  border: 3px solid #fff !important;
  border-radius: 50%;
  background: #5c4033 !important;
  /* Brown Handle */
  box-shadow: 0 2px 5px rgba(92, 64, 51, 0.4) !important;
  margin-top: -6px !important;
  /* Center on thick track (originally -8px) */
  /* Center on thick track */
  cursor: pointer;
}

/* Fix Single Slider Colors */
.theme-kawaii .range-slider-container.single-slider .slider-track {
  background: #efe6dd !important;
  height: 12px !important;
  border: 2px solid #5c4033 !important;
}

.theme-kawaii .range-slider-container.single-slider .slider-range {
  background: #5c4033 !important;
  height: 8px !important;
  /* Keep generic height or match ? Let's match track height minus borders if inside, but usually range sits on top. */
  /* Actually, general rule sets height 12px for range. Single slider override sets it to 8px. */
  height: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Force Text Colors and Sizes in Sliders */
.theme-kawaii .range-slider-section h4 span,
.theme-kawaii .range-slider-section .slider-value-label {
  color: #5c4033 !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
}

/* Modern Switch Toggle */
.bet-switch-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 15px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.bet-switch-container:hover {
  background: rgba(255, 255, 255, 0.08);
}

.theme-kawaii .bet-switch-container {
  background: white;
  border: var(--kawaii-border);
  border-radius: 20px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-toggle {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc !important;
  transition: .4s;
  border-radius: 24px;
}

.slider-toggle:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white !important;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.slider-toggle {
  background-color: var(--accent-color) !important;
}

input:focus+.slider-toggle {
  box-shadow: 0 0 1px var(--accent-color);
}

input:checked+.slider-toggle:before {
  transform: translateX(22px);
}

.theme-kawaii .slider-toggle {
  background-color: #ddd !important;
}

.theme-kawaii input:checked+.slider-toggle {
  background-color: var(--accent-color) !important;
}

/* Chest Positioning - On Kasa Button */
.chest-container {
  position: absolute;
  right: -205px;
  /* Moved to -205px (was -210px) - Iteration 3 */
  bottom: -40px;
  /* Positioned on footer button */
  left: auto;
  top: auto;
  transform: none;
  width: 280px;
  height: auto;
  display: flex;
  justify-content: center;
  /* Centered for glow */
  align-items: center;
  /* Centered for glow */
  pointer-events: none;
  z-index: 60;
  /* Above footer */
}

.chest {
  width: 100%;
  max-width: 250px;
  /* Enlarged chest from 220px */
  height: auto;
  object-fit: contain;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.15));
}

.chest:hover {
  transform: scale(1.1) rotate(-5deg);
}

/* Bankroll Grid and Cards */
.bankroll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  /* Responsive grid */
  gap: 15px;
  /* Increased gap for better spacing */
  margin-top: 10px;
  margin-bottom: 25px;
}

.bankroll-card {
  background: white;
  border: 3px solid #ffc2d1;
  /* Soft Pink Border */
  border-radius: 20px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 0 #ffc2d1;
  /* Soft Shadow */
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-align: center;
  margin: 0;
}

.bankroll-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 0 #ffc2d1;
}

.bankroll-card.misli {
  border-color: #ffccbc;
  /* Soft Orange */
  box-shadow: 0 4px 0 #ffccbc;
}

.bankroll-card.misli:hover {
  box-shadow: 0 8px 0 #ffccbc;
}

.bankroll-card.nesine {
  border-color: #ffe082;
  /* Soft Yellow */
  box-shadow: 0 4px 0 #ffe082;
}

.bankroll-card.nesine:hover {
  box-shadow: 0 8px 0 #ffe082;
}

.bankroll-card.rotabet {
  border-color: #c5cae9;
  /* Soft Blue */
  box-shadow: 0 4px 0 #c5cae9;
}

.bankroll-card.rotabet:hover {
  box-shadow: 0 8px 0 #c5cae9;
}

.bankroll-logo {
  width: 90px;
  /* Balanced size */
  height: 90px;
  object-fit: contain;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
  /* Softer drop shadow */
}

.bankroll-info {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Label class removed, but keeping empty style just in case of cache issues temporarily */
.bankroll-label {
  display: none;
}

.bankroll-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: #5c4033;
  background: transparent;
  /* Clean look */
  padding: 2px 0;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
}

/* Treasure Glow Animation */
@keyframes rotate-shimmer {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 0.7;
  }

  50% {
    transform: translate(-50%, -50%) rotate(180deg) scale(1.1);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
    opacity: 0.7;
  }
}

@keyframes pulse-gold {

  0%,
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.9);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Sharp Gold Rays (Treasure Beam) - Toggleable */
body:not(.no-glow) .chest-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  /* More complex & dynamic beams */
  background: repeating-conic-gradient(from 0deg,
      rgba(255, 235, 120, 0) 0deg,
      rgba(255, 215, 0, 0.7) 12deg,
      rgba(255, 255, 255, 0.4) 15deg,
      rgba(255, 215, 0, 0.7) 18deg,
      rgba(255, 235, 120, 0) 30deg);
  border-radius: 50%;
  z-index: -1;
  animation: rotate-shimmer 8s linear infinite;
  filter: blur(2px);
  pointer-events: none;
}

/* Holy Glow Core - Toggleable */
body:not(.no-glow) .chest-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255, 255, 200, 0.8) 0%, rgba(255, 215, 0, 0.4) 40%, transparent 70%);
  z-index: -1;
  pointer-events: none;
  animation: pulse-gold 3s ease-in-out infinite;
}

/* Notification Body & Controls Centering */
.notification-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.notification-controls {
  display: flex !important;
  justify-content: center !important;
  gap: 15px !important;
  width: 100% !important;
  margin-top: 20px !important;
}

#notification-message {
  font-size: 1rem;
  color: #5c4033;
  line-height: 1.5;
  white-space: pre-line;
}

/* Glow Effect Restoration & Pink Color */
body:not(.no-glow) .board {
  box-shadow: 0 0 40px rgba(255, 143, 171, 1) !important;
  /* Increased Board Glow */
}

body:not(.no-glow) .mascot {
  filter: drop-shadow(0 0 15px rgba(255, 143, 171, 0.4));
  /* Reduced mascot glow */
  transition: filter 0.3s ease;
}

body:not(.no-glow) .logo {
  filter: drop-shadow(0 0 15px rgba(255, 143, 171, 0.8));
  transition: filter 0.3s ease;
}

body:not(.no-glow) .logo {
  filter: drop-shadow(0 0 15px rgba(255, 143, 171, 0.6)) !important;
  /* Pink Glow, Lower Intensity */
}

body:not(.no-glow) .nav-item.active {
  box-shadow: 0 0 20px rgba(255, 143, 171, 0.8), 0 4px 0 #5c4033;
  /* Pink Glow */
}

/* Reduced Logo Size */
.logo-container .logo {
  max-width: 330px;
  /* Enlarged Logo */
}

/* Final UI Refinements */
.settings-icon-btn {
  z-index: 10 !important;
}

.settings-subtitle {
  text-align: left !important;
  width: 100%;
}

.pale-loading-text {
  color: #666 !important;
  font-size: 1.6rem !important;
  text-align: center !important;
  width: 100% !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  min-height: 200px !important;
}

/* Richie AI Chat Modal Styling */
.ai-chat-modal {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 350px;
  height: 500px;
  background: #fff;
  border: 3px solid #5c4033;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  z-index: 10000;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  font-family: 'Fredoka', 'Quicksand', sans-serif;
  overflow: hidden;
}

.chat-header {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid #5c4033;
  cursor: move;
  user-select: none;
}

.chat-header-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-mascot-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #5c4033;
  background: #fff;
  object-fit: contain;
}

.chat-header-text h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #5c4033;
}

.chat-header-text span {
  font-size: 0.8rem;
  color: #7d5a50;
  font-weight: 600;
}

.chat-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #5c4033;
  cursor: pointer;
  font-weight: bold;
}

.chat-body {
  flex: 1;
  padding: 15px;
  background: #fffaf0;
  /* Creamy white */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-message {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 15px;
  font-size: 0.95rem;
  line-height: 1.4;
  position: relative;
  border: 2px solid #5c4033;
}

.ai-message {
  align-self: flex-start;
  background: #fff;
  border-bottom-left-radius: 2px;
  max-width: 80%;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
}

.user-message {
  align-self: flex-end;
  background: #cdedcf;
  /* Pastel Green */
  border-bottom-right-radius: 2px;
  max-width: 80%;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
}

.message-time {
  font-size: 0.7rem;
  color: #888;
  margin-top: 4px;
  text-align: right;
  display: none !important;
}

.chat-footer {
  padding: 10px;
  background: #fff;
  border-top: 3px solid #5c4033;
  display: flex;
  gap: 10px;
}

#chat-input {
  flex: 1;
  padding: 10px;
  border: 2px solid #ddd;
  border-radius: 20px;
  font-family: inherit;
  outline: none;
}

#chat-input:focus {
  border-color: #5c4033;
}

.chat-send-btn {
  background: #5c4033;
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s;
}

.chat-send-btn:active {
  transform: scale(0.95);
}

.typing-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5c4033;
  margin: 0 2px;
  animation: typing 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typing {

  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .ai-chat-modal {
    width: 100%;
    height: 100%;
    bottom: 0;
    right: 0;
    border-radius: 0;
    border: none;
    z-index: 99999;
    /* Top level */
  }

  .chat-header {
    border-radius: 0;
  }
}