:root {
  --bg-color: #0f172a;
  --text-color: #f8fafc;
  --primary-color: #3b82f6;
  --secondary-color: #64748b;
  --glass-bg: rgba(30, 41, 59, 0.7);
  --glass-border: rgba(255, 255, 255, 0.1);
  --card-bg: rgba(30, 41, 59, 0.4);
  --glow-color: rgba(59, 130, 246, 0.5);
  --font-main: "Outfit", sans-serif;
  --success-color: #60a5fa; /* Bright Blue for Dark Mode */
  --warning-color: #ef4444;
  --input-bg: rgba(15, 23, 42, 0.5);
  --table-bg: rgba(15, 23, 42, 0.3);
  --table-header-bg: rgb(30, 41, 59);
  --result-bg: rgba(15, 23, 42, 0.3);
}

body.light-mode {
  --bg-color: #f8f9fa;
  --text-color: #1e293b;
  --primary-color: #2563eb;
  --secondary-color: #475569;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.1);
  --card-bg: rgba(255, 255, 255, 0.4);
  --glow-color: rgba(37, 99, 235, 0.3);
  --warning-color: #dc2626;
  --input-bg: rgba(255, 255, 255, 0.9);
  --table-bg: rgba(255, 255, 255, 0.8);
  --table-header-bg: #e2e8f0;
  --result-bg: rgba(255, 255, 255, 0.8);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* ... existing code ... */

.salary-table .value.warning {
  color: var(--warning-color);
}

.salary-table .value.success {
  color: var(--success-color);
  font-size: 1.3rem;
  font-weight: 700;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-color);
  color: var(--text-color);
  min-height: 100vh;
  min-width: 320px; /* Prevent shrinking below usable width */
  background-image: radial-gradient(
      circle at 10% 20%,
      rgba(59, 130, 246, 0.15) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(139, 92, 246, 0.15) 0%,
      transparent 40%
    );
  background-attachment: fixed;
  background-repeat: no-repeat; /* Ensure no repeat */
  /* display: flex; REMOVED for AdSense compatibility */
  /* justify-content: center; REMOVED for AdSense compatibility */
  display: block;
}

.app-container {
  width: 100%;
  max-width: 1200px;
  padding: 2rem;
  margin: 0 auto; /* ADDED for centering */
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Ensure minimum separation (8px > 5px) between header and content */
  min-height: 100vh;
}

/* Header & Navigation */
header {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform 0.3s ease-in-out;
}

header.header-hidden {
  transform: translateY(-100%);
}

nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.theme-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.auto-theme-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-color);
  font-weight: 500;
}

/* Custom Toggle Switch */
.auto-theme-wrapper input {
  appearance: none;
  -webkit-appearance: none;
  width: 2.8rem;
  height: 1.5rem;
  background: rgba(100, 116, 139, 0.3);
  border-radius: 1.5rem;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
  border: 1px solid var(--glass-border);
}

.auto-theme-wrapper input::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  background: #fff;
  border-radius: 50%;
  transition: left 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.auto-theme-wrapper input:checked {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.auto-theme-wrapper input:checked::after {
  left: 1.5rem;
}

/* Scroll to Top Button */
.scroll-top-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--primary-color);
  color: #ffffff;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 99;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s;
  font-size: 1.5rem;
}

.scroll-top-btn:hover {
  background: var(--text-color);
  color: var(--bg-color);
  transform: translateY(-4px);
}

.scroll-top-btn.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background 0.3s;
  color: var(--text-color); /* Ensure it uses text color */
}

/* Brighten menu button specifically in Dark Mode as requested */
#menu-btn {
  color: #ffffff;
}
body.light-mode #menu-btn {
  color: var(--text-color);
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.icon-btn.active {
  background: rgba(74, 222, 128, 0.2); /* Green tint */
  border-color: var(--accent-color);
}

.logo {
  font-size: 1.5rem;
  font-weight: 600;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Sidebar */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 99;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background: var(--bg-color);
  border-right: 1px solid var(--glass-border);
  z-index: 100;
  transform: translateX(0);
  transition: transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
}

.sidebar.closed {
  transform: translateX(-100%);
}

.sidebar-header {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--glass-border);
}

.sidebar-title {
  font-size: 1.25rem;
  font-weight: 600;
}

.sidebar-nav {
  padding: 1rem 0; /* Remove horizontal padding so scrollbar is at the edge */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Ensure items don't spread out */
  gap: 0.5rem;
  overflow-y: auto;
  flex: 1; /* Take remaining space */
  /* Custom Scrollbar for Sidebar */
  scrollbar-width: thin;
  scrollbar-color: var(--secondary-color) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background-color: rgba(100, 116, 139, 0.5);
  border-radius: 3px;
}

.nav-item {
  background: transparent;
  border: none;
  text-align: left;
  padding: 1rem;
  color: var(--secondary-color);
  font-size: 1rem;
  font-family: var(--font-main);
  cursor: pointer;
  border-radius: 0.75rem;
  transition: all 0.2s;
  width: calc(100% - 2rem); /* Indent items */
  margin: 0 1rem; /* Center items with margin */
}

.nav-item:hover,
.nav-item.active {
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary-color);
  font-weight: 600;
}

/* Common Nav Button (Theme Toggle uses this) */
.nav-btn {
  background: transparent;
  border: none;
  color: var(--secondary-color);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
  border-radius: 0.5rem;
  font-family: var(--font-main);
}

.nav-btn:hover {
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.05);
}

/* Holiday Table Styles */
.year-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color);
}

.holiday-count {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--secondary-color);
  font-size: 1.1rem;
  font-weight: 500;
}

.holiday-red {
  color: #ef4444;
  font-weight: 500;
}

.remark-cell {
  color: var(--secondary-color);
  font-size: 0.95rem;
}

/* Light Mode Specifics for Red */
body.light-mode .holiday-red {
  color: #dc2626;
}

/* Holiday Table Specific Column Widths */
#holiday-list-table {
  min-width: 100%; /* Resize to fit card */
}

#holiday-list-table th,
#holiday-list-table td {
  text-align: center; /* Center align for holiday table */
}

#holiday-list-table th:nth-child(1),
#holiday-list-table td:nth-child(1) {
  flex: 0 0 100px;
} /* Date: Fixed width */

#holiday-list-table th:nth-child(2),
#holiday-list-table td:nth-child(2) {
  flex: 0 0 60px;
} /* Day: Fixed width */

#holiday-list-table th:nth-child(3),
#holiday-list-table td:nth-child(3) {
  flex: 1;
  text-align: left;
  padding-left: 1rem;
} /* Name */

#holiday-list-table th:nth-child(4),
#holiday-list-table td:nth-child(4) {
  flex: 1.5;
  text-align: left;
  padding-left: 1rem;
}

/* Allow text wrap for holiday table */
#holiday-list-table td {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: keep-all; /* Prevent breaking Korean words mid-word if possible */
}

/* Monthly Divider */
.month-divider {
  border-top: 3px solid rgba(255, 255, 255, 0.5) !important;
  margin-top: 0px;
}
/* Dark theme divider override if needed, but glass border works */
body.light-mode .month-divider {
  border-top: 3px solid rgba(0, 0, 0, 0.2) !important;
}

/* Share Buttons */
.share-buttons {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.share-btn {
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.share-btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.color-chip {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.sipseong-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 0.5rem;
}

.sipseong-item {
  text-align: center;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.25rem;
}

.sip-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 0.3rem;
}

.sip-count {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 0.3rem;
}

.sip-desc {
  font-size: 0.75rem;
  color: var(--secondary-color);
}

@media (max-width: 480px) {
  .sipseong-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Gender Toggle */
.gender-toggle-wrapper {
  display: flex;
  gap: 0.5rem;
  padding: 0.3rem;
  background: var(--input-bg); /* Adaptive background */
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
}

.gender-toggle-wrapper input[type="radio"] {
  display: none;
}

.gender-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.6rem;
  padding: 0 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--secondary-color);
  font-size: 0.95rem;
  border: 1px solid transparent;
  white-space: nowrap;
}

.gender-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.gender-toggle-wrapper input[type="radio"]:checked + .gender-btn {
  background: var(--primary-color);
  color: #ffffff;
  font-weight: 700;
  box-shadow: none;
}

/* Specific colors for gender could be optional, but sticking to accent color keeps theme consistent. 
   If user wants generic differentiation: */
#gender-m:checked + .gender-btn,
#daily-gender-m:checked + .gender-btn {
  background: #60a5fa; /* Blueish */
  color: #fff;
}

#gender-f:checked + .gender-btn,
#daily-gender-f:checked + .gender-btn {
  background: #f472b6; /* Pinkish */
  color: #fff;
}

/* Lifecycle Lists (Vertical) */
.lifecycle-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lifecycle-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05); /* Works in dark/light via opacity */
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.lifecycle-item.current {
  border: 1px solid var(--accent-color);
  background: rgba(74, 222, 128, 0.1); /* Green tint */
}

.cycle-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 120px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding-right: 1rem;
  margin-right: 1rem;
}

.cycle-age {
  font-size: 0.9rem;
  color: var(--secondary-color);
  text-align: center;
  min-width: 40px;
}

.cycle-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cycle-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sipseong-name {
  font-weight: 600;
  color: var(--text-color);
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

/* Detailed Lifecycle Styles */
.lifecycle-item.detailed {
  align-items: stretch;
}

.detailed-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 0.3rem;
  padding: 0.2rem 0;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bad-pill {
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-color);
}

[data-theme="light"] .bad-pill {
  background: rgba(0, 0, 0, 0.05);
}

.stem-pill {
  border-left: 2px solid var(--accent-color);
}
.branch-pill {
  border-left: 2px solid var(--secondary-color);
}

.unseong-badge {
  font-size: 0.8rem;
  font-weight: 600;
  color: #fbbf24; /* Amber-400 */
  background: rgba(251, 191, 36, 0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 99px;
}

.main-desc {
  font-size: 0.85rem;
  color: var(--secondary-color);
}

[data-theme="light"] .unseong-badge {
  color: #d97706; /* Amber-600 */
  background: rgba(217, 119, 6, 0.1);
}

/* Fortune Badges */
.fortune-badge {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 0.4rem;
  display: inline-block;
  margin-bottom: 0.2rem;
}

.fortune-5 {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
} /* Green */
.fortune-4 {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
} /* Blue */
.fortune-3 {
  background: rgba(156, 163, 175, 0.2);
  color: #9ca3af;
  border: 1px solid rgba(156, 163, 175, 0.3);
} /* Gray */
.fortune-2 {
  background: rgba(249, 115, 22, 0.2);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.3);
} /* Orange */
.fortune-1 {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
} /* Red */

[data-theme="light"] .fortune-5 {
  background: #dcfce7;
  color: #15803d;
  border-color: #bbf7d0;
}
[data-theme="light"] .fortune-4 {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
[data-theme="light"] .fortune-3 {
  background: #f3f4f6;
  color: #4b5563;
  border-color: #e5e7eb;
}
[data-theme="light"] .fortune-2 {
  background: #ffedd5;
  color: #c2410c;
  border-color: #fed7aa;
}
[data-theme="light"] .fortune-1 {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}

.lifecycle-item.detailed.fortune-5-border {
  border-left: 4px solid #4ade80;
}
.lifecycle-item.detailed.fortune-4-border {
  border-left: 4px solid #60a5fa;
}
.lifecycle-item.detailed.fortune-3-border {
  border-left: 4px solid #9ca3af;
}
.lifecycle-item.detailed.fortune-2-border {
  border-left: 4px solid #fb923c;
}
.lifecycle-item.detailed.fortune-1-border {
  border-left: 4px solid #f87171;
}

[data-theme="light"] .lifecycle-item.detailed.fortune-5-border {
  border-left-color: #15803d;
}
[data-theme="light"] .lifecycle-item.detailed.fortune-4-border {
  border-left-color: #1d4ed8;
}
[data-theme="light"] .lifecycle-item.detailed.fortune-3-border {
  border-left-color: #4b5563;
}
[data-theme="light"] .lifecycle-item.detailed.fortune-2-border {
  border-left-color: #c2410c;
}
/* Fortune Progress Bar */
.fortune-bar-container {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.2rem;
}

[data-theme="light"] .fortune-bar-container {
  background: rgba(0, 0, 0, 0.05);
}

.fortune-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.bar-low {
  background: linear-gradient(90deg, #fb923c, #f97316);
} /* Orange */
.bar-mid {
  background: linear-gradient(90deg, #a3e635, #4ade80);
} /* Yellow-Green */
.bar-high {
  background: linear-gradient(90deg, #4ade80, #22c55e);
} /* Green */
.bar-neutral {
  background: #9ca3af;
}

/* Remove old borders */
/* Ilun UI */
.ilun-container {
  margin-top: 1rem;
}
.ilun-input-group {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.ilun-input-group input {
  flex: 1;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-color);
}
[data-theme="dark"] .ilun-input-group input {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.ilun-result-card {
  /* Remove card look to match list style */
  background: transparent;
  border: none;
  padding: 0;
}
/* The inner lifecycle-item will handle the background/border */

.btn-x {
  background-color: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-threads {
  background-color: #101010;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-kakao {
  background-color: #fee500;
  color: #3c1e1e;
}

.btn-capture {
  background-color: var(--primary-color);
  color: #fff;
}

body.light-mode .btn-x,
body.light-mode .btn-threads {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Fortune Teller Styles */
.fortune-content {
  margin-top: 1rem;
  padding-top: 0;
  padding-bottom: 1rem;
  border-top: none;
  text-align: left;
}

.disclaimer-text {
  font-size: 0.8rem;
  color: var(--secondary-color);
  text-align: center;
  margin-top: 1rem;
}

#fortune-title {
  color: #f59e0b; /* Amber/Gold */
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
}

/* Zodiac Image */
.zodiac-image-container {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}

#zodiac-image,
#fortune-image {
  max-width: 100%;
  width: 200px; /* Adjust size as needed */
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: opacity 0.5s;
}

#fortune-text {
  line-height: 1.6;
  color: var(--text-color);
}

body.light-mode #fortune-title {
  color: #d97706; /* Darker Amber for light mode */
}

/* Main Content */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}

.tool-section {
  display: none;
  width: 100%;
  animation: fadeIn 0.5s ease-out;
  height: 100%; /* Take full height for centering if needed */
}

/* Home Section */
#home {
  display: none; /* Default hidden, toggled via JS/active class */
  height: 100%;
  justify-content: center;
  align-items: center;
}

#home.active {
  display: flex;
}

.home-content {
  text-align: center;
}

.main-title {
  font-size: 4rem;
  font-weight: 700;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
}

.tool-section.active {
  display: flex; /* Flex is used for centering in tool sections usually */
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Vertical center */
  gap: 2rem;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tool-card {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  padding: 3rem;
  border-radius: 1.5rem;
  width: 100%;
  max-width: 600px; /* Increased from 500px */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 0 15px var(--glow-color);
}

.tool-card h1 {
  font-size: 2rem;
  text-align: center;
  font-weight: 600;
}

.subtitle {
  text-align: center;
  color: var(--secondary-color);
  font-size: 1rem;
  margin-top: -1rem;
  margin-bottom: 1rem;
}

/* Form Elements */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.input-group label {
  font-size: 0.9rem;
  color: var(--secondary-color);
}

.input-group input,
.input-group select,
.input-item input,
.input-item select {
  background: var(--input-bg);
  border: 1px solid var(--glass-border);
  padding: 1rem;
  border-radius: 0.75rem;
  color: var(--text-color);
  font-size: 1.1rem;
  font-family: var(--font-main);
  transition: border-color 0.3s;
}

.input-group input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.input-group select,
.input-item select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding: 1rem 2.5rem 1rem 1rem;
  font-size: 1rem;
  cursor: pointer;
}

.primary-btn {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  font-family: var(--font-main);
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.primary-btn:active {
  transform: translateY(0);
}

/* Result Display */
.result-display {
  background: var(--result-bg);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.result-display.hidden {
  display: none;
}

.age-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--glass-border);
}

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

.age-item .label {
  color: var(--secondary-color);
}

.age-item .value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-color);
}

.age-detail {
  text-align: center;
  font-size: 0.9rem;
  color: var(--secondary-color);
  margin-top: 0.5rem;
}

/* Footer */
footer {
  text-align: center;
  padding: 1rem;
  color: var(--secondary-color);
  font-size: 0.8rem;
}

/* Salary Table */
.salary-table {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.5rem 0;
}

.salary-table .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  color: var(--text-color);
  gap: 3ch; /* Ensure at least 3 spaces gap */
}

.salary-table .row.header {
  font-weight: 600;
  color: var(--secondary-color);
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.salary-table .row.divider {
  height: 1px;
  background: var(--glass-border);
  margin: 0.5rem 0;
}

.salary-table .value {
  font-family: monospace;
  font-size: 1.1rem;
}

.salary-table .value.highlight {
  color: var(--primary-color);
  font-weight: 600;
}

.salary-table .value.warning {
  color: var(--warning-color);
}

.salary-table .value.success {
  color: var(--success-color);
  font-size: 1.3rem;
  font-weight: 700;
}

.row.total-deduction {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--glass-border);
  font-size: 0.9rem;
}

.row.final {
  background: rgba(59, 130, 246, 0.1);
  padding: 1.5rem; /* Increased padding */
  border-radius: 1rem;
  margin-top: 1rem;
}

/* Wide Card for Table */
.tool-card.wide-card {
  max-width: 1000px;
  padding: 2rem;
}

/* Search Bar */
.search-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.search-bar input {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--glass-border);
  padding: 1rem;
  border-radius: 0.75rem;
  color: var(--text-color);
  font-size: 1rem;
  font-family: var(--font-main);
}

.search-bar .search-icon {
  background: var(--primary-color);
  width: 3.5rem;
  border-radius: 0.75rem;
  font-size: 1.5rem;
}

/* Table container */
/* Table container: Holds style but NOT scrolling */
.table-container {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid var(--glass-border);
  background: var(--table-bg);
  overflow-x: auto; /* Allow horizontal scroll */
}

.data-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 1200px; /* Increased to prevent squashing */
}

/* Specific Override for Salary Table to fit in wide-card */
#salary-table .data-table {
  min-width: 100%;
}

.data-table thead {
  display: flex;
  width: 100%;
}

.data-table tbody {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 60vh;
  width: 100%;
  /* Custom Scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--secondary-color) transparent;
}

.data-table tbody::-webkit-scrollbar {
  width: 6px;
}

.data-table tbody::-webkit-scrollbar-track {
  background: transparent;
}

.data-table tbody::-webkit-scrollbar-thumb {
  background-color: rgba(100, 116, 139, 0.5);
  border-radius: 3px;
}

.data-table tr {
  display: flex;
  width: 100%;
}

.data-table th,
.data-table td {
  flex: 1;
  text-align: right;
  white-space: nowrap;
  /* overflow: hidden; Removed */
  /* text-overflow: ellipsis; Removed */
  padding: 0.75rem 0.5rem; /* Ensure padding is here */
}

.data-table thead th {
  background: var(--table-header-bg);
  padding: 1rem 0.5rem;
  text-align: right;
  font-weight: 600;
  color: var(--secondary-color);
  z-index: 10;
  border-bottom: 1px solid var(--glass-border);
  white-space: nowrap;
}

.data-table td {
  padding: 0.75rem 0.5rem;
  text-align: right;
  border-bottom: 1px solid var(--glass-border);
  font-family: monospace;
  font-size: 0.95rem;
  white-space: nowrap;
}

.data-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.1);
}

.data-table th.highlight-head,
.data-table td.highlight-net {
  color: var(--success-color);
  font-weight: 600;
}

.data-table td.highlight-net {
  background: rgba(59, 130, 246, 0.05);
}

/* Row Highlight Animation */
.highlight-row {
  animation: highlightFlash 2s ease-out;
  background: rgba(59, 130, 246, 0.2) !important;
}

@keyframes highlightFlash {
  0% {
    background: rgba(59, 130, 246, 0.5);
  }
  100% {
    background: rgba(59, 130, 246, 0.2);
  }
}

/* Responsive Table */
@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }

  .tool-card.wide-card {
    padding: 1rem;
  }

  .data-table {
    min-width: 100%;
  }

  .data-table th,
  .data-table td {
    padding: 0.75rem 0.25rem;
    flex: 1; /* Maintain flex behavior on mobile */
  }
}
/* SEO Description Boxes */
.description-box {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  padding: 1.25rem;
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-color);
  text-align: center;
}

.description-box strong {
  color: var(--success-color);
  font-weight: 600;
}

/* Home specific adjustments */
.home-desc {
  max-width: 600px;
  margin: 2rem auto 0;
  backdrop-filter: blur(16px);
  background: var(--card-bg);
}
/* Lunar Converter Styles */
.moon-display {
  text-align: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  margin-top: 1rem;
  border: 1px solid var(--glass-border);
}

.lunar-main {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.lunar-type {
  font-size: 1rem;
  color: var(--secondary-color);
  margin-left: 0.5rem;
  font-weight: 400;
}

.sub-value {
  font-size: 1rem;
  color: var(--secondary-color);
  margin-left: 0.5rem;
  font-weight: 400;
}

/* Radio Toggle */
.mode-toggle {
  flex-direction: row;
  gap: 2rem;
  margin-bottom: 1rem;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--text-color);
}

.radio-label input {
  width: 1.2rem;
  height: 1.2rem;
  cursor: pointer;
}

.hidden {
  display: none !important;
}

/* Solar Converter Inputs */
.input-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.input-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.input-item label {
  font-size: 0.9rem;
  color: var(--secondary-color);
}

.input-item input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--glass-border);
  padding: 1rem;
  border-radius: 0.75rem;
  color: var(--text-color);
  font-size: 1.1rem;
  font-family: var(--font-main);
  text-align: center;
}

.checkbox-group {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.checkbox-group input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
}

@media (max-width: 480px) {
  .input-group-row {
    flex-direction: column;
    gap: 1rem;
  }
}

/* Storage Consent Modal */
.consent-modal {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 500px;
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: slideUp 0.4s ease-out;
}

.consent-modal.hidden {
  display: none;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Feature Link Cards */
.feature-link.glass-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  text-align: left;
  width: 100%;
  color: var(--text-color);
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
  /* Ensure border is visible */
  border: 1px solid var(--glass-border);
}

.feature-link.glass-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
}

/* Light Mode Specifics for Feature Cards */
body.light-mode .feature-link.glass-card {
  background: white; /* distinct card bg */
  border: 1px solid rgba(0, 0, 0, 0.1); /* clearer border */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* soft shadow */
}

body.light-mode .feature-link.glass-card:hover {
  background: #f1f5f9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.consent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.consent-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-color);
}

.consent-desc {
  font-size: 0.95rem;
  color: var(--secondary-color);
  line-height: 1.5;
}

.consent-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.consent-btn {
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  transition: background 0.2s;
  font-family: var(--font-main);
}

.btn-allow {
  background: var(--primary-color);
  color: white;
}

.btn-allow:hover {
  background: #2563eb;
}

.btn-deny {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--secondary-color);
}

/* Saju Analyzer Styles */
.saju-card-container {
  position: relative;
  width: 100%;
  margin-top: 1.5rem;
  padding: 2rem;
  border-radius: 1rem;
  overflow: hidden;
  color: #fff;
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0f172a; /* Fallback */
}

.saju-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("images/saju_bg.png");
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  z-index: 1;
}

.pillars-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 500px;
}

.pillar-card {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 215, 0, 0.3); /* Goldish border */
  border-radius: 0.5rem;
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(4px);
}

.pillar-title {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.5rem;
  font-weight: 300;
}

.pillar-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 1.8rem;
  font-weight: 700;
  font-family: "serif"; /* Traditional look */
}

/* Five Elements Colors (Text Shadow for readability) */
.elem-wood {
  color: #4ade80;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
} /* Green/Blue */
.elem-fire {
  color: #f87171;
  text-shadow: 0 0 10px rgba(248, 113, 113, 0.5);
} /* Red */
.elem-earth {
  color: #facc15;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
} /* Yellow */
.elem-metal {
  color: #e2e8f0;
  text-shadow: 0 0 10px rgba(226, 232, 240, 0.5);
} /* White */
.elem-water {
  color: #60a5fa;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
} /* Black/Blue(Water) - Using blue for visibility on dark */

body.light-mode .elem-metal {
  color: #64748b;
} /* Darker gray for metal in light mode */
body.light-mode .elem-water {
  color: #1e3a8a;
} /* Dark blue for water */

.hint-text {
  font-size: 0.8rem;
  color: var(--secondary-color);
  margin-top: 0.2rem;
}

@media (max-width: 480px) {
  .pillars-grid {
    gap: 0.5rem;
  }
  .pillar-body {
    font-size: 1.5rem;
  }
}

/* O-haeng Analysis */
.ohaeng-analysis {
  margin-top: 2rem;
  width: 100%;
}

.ohaeng-analysis h3 {
  color: var(--text-color);
  font-size: 1.1rem;
  margin-bottom: 1rem;
  padding-left: 0.5rem;
  border-left: 3px solid var(--accent-color);
}

.ohaeng-stats {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 120px;
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
  padding: 1rem;
}

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

.stat-bar {
  width: 100%;
  background: #334155;
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease-out;
  min-height: 4px;
  position: relative;
}

.stat-bar.wood {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}
.stat-bar.fire {
  background: #f87171;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.3);
}
.stat-bar.earth {
  background: #facc15;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.3);
}
.stat-bar.metal {
  background: #e2e8f0;
  box-shadow: 0 0 8px rgba(226, 232, 240, 0.3);
}
.stat-bar.water {
  background: #60a5fa;
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
}

.stat-count {
  margin-top: 0.5rem;
  font-weight: bold;
  color: var(--text-color);
}

.stat-label {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.stat-desc {
  font-size: 0.75rem;
  color: var(--secondary-color);
  margin-top: 0.2rem;
  text-align: center;
}

.ohaeng-desc-box {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  padding: 1rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-color);
}
/* Mobile Adjustments */
@media (max-width: 480px) {
  nav {
    padding: 0.5rem 0.8rem; /* Tighter padding */
  }

  .nav-left,
  .theme-controls {
    gap: 0.5rem; /* Reduce gap between items */
  }

  .logo {
    font-size: 1rem; /* Smaller logo */
  }

  .auto-theme-wrapper span {
    display: none; /* Hide label */
  }

  /* Scale down toggle switch */
  .auto-theme-wrapper input {
    width: 2.2rem;
    height: 1.2rem;
  }

  .auto-theme-wrapper input:checked::after {
    left: 1.1rem; /* Position correctly on mobile */
    transform: translateY(
      -50%
    ); /* Start from center vertically, remove horizontal shift */
  }

  .auto-theme-wrapper input::after {
    width: 1rem;
    height: 1rem;
  }

  .theme-toggle,
  .menu-toggle {
    padding: 0.3rem;
    font-size: 1.1rem; /* Smaller icons */
  }
}

/* Upcoming Holiday Highlight */
.salary-table tr.upcoming-holiday,
#holiday-list-table tr.upcoming-holiday {
  background: rgba(59, 130, 246, 0.15) !important;
  border: 2px solid var(--accent-color);
  position: relative;
  animation: pulseBorder 2s infinite;
}

.upcoming-holiday td {
  font-weight: 700;
  color: var(--accent-color);
}

@keyframes pulseBorder {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

/* Netflix Rankings Styles */
.ranking-header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  color: var(--secondary-color);
  font-size: 0.9rem;
}

.ranking-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.ranking-card {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05); /* Glass effect */
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--glass-border);
  transition: transform 0.2s, background 0.2s;
  cursor: pointer;
}

.ranking-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
}

.rank-badge {
  font-size: 2rem;
  font-weight: 900;
  color: var(--text-color); /* Fallback */
  width: 3rem;
  text-align: center;
  margin-right: 1rem;
  flex-shrink: 0;
  font-family: "Inter", sans-serif; /* Clean font for numbers */
}

/* Specific Rank Colors */
.rank-1 .rank-badge {
  color: #ffd700;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}
.rank-2 .rank-badge {
  color: #c0c0c0;
  text-shadow: 0 0 15px rgba(192, 192, 192, 0.5);
}
.rank-3 .rank-badge {
  color: #cd7f32;
  text-shadow: 0 0 15px rgba(205, 127, 50, 0.5);
}

.rank-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.rank-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
}

.rank-season {
  font-size: 0.9rem;
  color: var(--secondary-color);
}

.rank-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.2rem;
}

.badge-new {
  background: #ef4444;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
}

.badge-weeks {
  font-size: 0.8rem;
  color: var(--secondary-color);
}

.poster-wrapper {
  margin-right: 1rem;
  flex-shrink: 0;
}

.poster-img {
  width: 120px;
  height: 68px; /* Approx 16:9 aspect ratio */
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.1);
}

/* Tving Specific (Portrait Posters) */
#tving-rank-list .poster-img,
#wavve-rank-list .poster-img {
  width: 110px;
  height: 158px; /* Portrait ~2:3 */
}

/* Daily Luck Graphical Enhancement */
.daily-luck-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.luck-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  backdrop-filter: blur(4px);
}

.luck-card.full-width {
  grid-column: span 2;
}

/* Circular Gauge */
.circular-chart {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    var(--chart-color) var(--percentage),
    rgba(255, 255, 255, 0.1) 0
  );
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  transition: background 1s ease-out;
}

.circular-chart::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  background: var(--card-bg); /* Match card background to create ring */
  border-radius: 50%;
}

.circular-chart .percentage {
  position: relative;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-color);
  z-index: 10;
}

.score-label {
  font-size: 0.9rem;
  color: var(--secondary-color);
  margin-top: 0.5rem;
}

/* Pillar Card Visuals */
.pillar-visual {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pillar-char {
  font-size: 2.5rem;
  font-weight: 700;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid transparent;
  font-family: "serif";
}

.pillar-name {
  font-size: 1rem;
  opacity: 0.8;
}

/* Advice Card */
.advice-box {
  text-align: left;
  width: 100%;
}

.advice-keyword {
  display: inline-block;
  background: var(--primary-color);
  color: white;
  padding: 0.2rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.advice-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-color);
}

@media (max-width: 480px) {
  .daily-luck-grid {
    grid-template-columns: 1fr;
  }
  .luck-card.full-width {
    grid-column: span 1;
  }
}

/* --- Home Feature Grid --- */
.feature-section {
  margin-top: 2rem;
  width: 100%;
}

.section-label {
  font-size: 1.1rem;
  color: var(--accent-color);
  margin-bottom: 1rem;
  margin-top: 2rem;
  padding-left: 0.5rem;
  border-left: 3px solid var(--accent-color);
}

.section-label:first-child {
  margin-top: 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.feature-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  /* Override button defaults */
  color: var(--text-color);
  font-family: var(--font-main);
}

.feature-link:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.08); /* Slightly lighter */
  border-color: var(--accent-color);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.feature-link:active {
  transform: scale(0.98);
}

.f-icon {
  font-size: 2rem;
  min-width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  transition: transform 0.3s ease;
}

.feature-link:hover .f-icon {
  transform: scale(1.1) rotate(5deg);
  background: rgba(
    var(--accent-rgb),
    0.2
  ); /* Assuming accent-rgb exists or use accent opacity */
  background: rgba(255, 255, 255, 0.15);
}

.f-info {
  flex: 1;
}

.f-info h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.3rem 0;
  color: var(--text-color);
}

.feature-link:hover .f-info h4 {
  color: var(--accent-color);
}

.f-info p {
  font-size: 0.85rem;
  color: var(--secondary-color);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .feature-grid {
    grid-template-columns: 1fr; /* Stack on mobile */
  }

  .feature-link {
    padding: 1rem;
  }

  .f-icon {
    font-size: 1.8rem;
    min-width: 3rem;
    height: 3rem;
  }
}

/* --- Related Links Section (SEO) --- */
.related-container {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.related-title {
  font-size: 0.9rem;
  color: var(--secondary-color);
  margin-bottom: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.related-title::before {
  content: "🔗";
  font-size: 0.8rem;
}

.related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.related-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.related-btn:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-2px);
}

body.light-mode .related-btn:hover {
  background: rgba(59, 130, 246, 0.1);
}

.related-btn span {
  font-size: 1.1em;
}

@media (max-width: 480px) {
  .related-btn {
    width: 100%; /* Stack on small screens for clickable area */
    justify-content: center;
  }
}
/* Anonymous Board Styles */
#board-app .tool-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.board-view {
  animation: fadeIn 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center children horizontally */
  width: 100%;
}

#board-login {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

#board-login .input-group {
  width: 100%;
  margin-bottom: 1rem;
  text-align: left; /* Keep label/input alignment natural inside the group */
}

#board-login .primary-btn {
  width: 100%; /* Make button full width of the centered container */
  margin-top: 1rem;
}

.board-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.8rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--glass-border);
}

.highlight-text {
  color: var(--primary-color);
}

.post-creation-area {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#board-post-content {
  background: var(--input-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-color);
  padding: 0.8rem;
  border-radius: 0.5rem;
  resize: vertical;
  width: 100%;
  font-family: inherit;
  min-height: 80px;
}

#board-post-content:focus {
  outline: 2px solid var(--primary-color);
  border-color: transparent;
}

.small-btn {
  align-self: flex-end; /* Default for other small buttons if any */
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
}

/* Specific override for board post button to center it if desired, 
   OR keep it right aligned. User said "Center board UI elements".
   Usually "Post" button is right aligned or full width. 
   I will make it right aligned as per standard UI but ensure the container is safe.
   Wait, user said "Centering: The board UI elements should be center-aligned."
   Maybe they mean the whole section? 
   let's keep the button right aligned but ensure proper container width. 
   Actually, I'll align it to the right within the centered post area. */

.board-list-container h3 {
  margin-bottom: 0.8rem;
  color: var(--secondary-color);
  font-size: 1rem;
}

.post-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 0.3rem;
}

.board-post-item {
  background: rgba(255, 255, 255, 0.03);
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--glass-border);
  transition: background 0.2s;
}

.board-post-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.board-post-meta {
  font-size: 0.8rem;
  color: var(--secondary-color);
  margin-bottom: 0.4rem;
}

.board-post-body {
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.4;
}

.text-btn {
  background: none;
  border: none;
  color: var(--secondary-color);
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.85rem;
}

.text-btn:hover {
  color: var(--text-color);
}

.error-text {
  color: var(--warning-color);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* Board Table Styles */
.table-responsive {
  overflow-x: auto;
  width: 100%;
}

.board-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.95rem;
}

.board-table th,
.board-table td {
  padding: 0.8rem;
  text-align: center;
  border-bottom: 1px solid var(--glass-border);
}

.board-table th {
  background: rgba(0, 0, 0, 0.1);
  color: var(--secondary-color);
  font-weight: 600;
}

[data-theme="light"] .board-table th {
  background: rgba(255, 255, 255, 0.3);
}

.board-table tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

.board-table td:nth-child(2) {
  /* Content Column */
  word-break: break-all;
}

@media (max-width: 600px) {
  .mobile-hide-date {
    display: none;
  }
  .board-table th:nth-child(4),
  .board-table td:nth-child(4) {
    display: none;
  }
  .board-table th,
  .board-table td {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
}

/* World Time Map */
.world-map-container {
  text-align: center;
  margin: 1.5rem 0;
  overflow: hidden;
}

.world-map-img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: block;
  margin: 0 auto;
}

/* Netflix Treemap Styles */
.view-toggle {
  display: flex;
  gap: 0.5rem;
  margin-left: auto; /* Align to right if flex parent */
  align-items: center;
}

/* Adjust search-bar to handle view-toggle */
#netflix-rankings .search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap; /* Allow wrapping on small screens */
}

.view-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--secondary-color);
  padding: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  width: 2.5rem;
  height: 2.5rem;
}

.view-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-color);
}

.view-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.map-container {
  margin-top: 1rem;
  min-height: 400px;
}

.map-category-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  justify-content: space-between;
  align-items: center;
  background: var(--input-bg);
  padding: 0.5rem;
  border-radius: 0.5rem;
  width: 100%;
}

.map-category-group {
  display: flex;
  gap: 0.5rem;
}

/* Reusing .gender-btn styles for map toggle */
.map-category-toggle input[type="radio"] {
  display: none;
}
.map-category-toggle input[type="radio"]:checked + label {
  background: var(--primary-color);
  color: white;
  font-weight: bold;
}

/* Treemap Canvas */
.treemap-canvas {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
  padding: 2px;
  gap: 2px; /* Small gap between blocks */
}

.treemap-item {
  position: absolute;
  background-color: var(--card-bg); /* Fallback */
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  text-align: center;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  /* Flex Props set inline via JS: flex-grow, flex-basis */
}

.treemap-item:hover {
  z-index: 10;
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-color: var(--primary-color);
}

.tm-content {
  pointer-events: none; /* Let clicks pass through if needed */
  z-index: 1;
}

.tm-rank {
  display: block;
  font-size: 0.8rem;
  opacity: 0.9;
  margin-bottom: 0.2rem;
}

.tm-title {
  display: block;
  font-weight: 700;
  font-size: 1rem; /* Adjust based on size with container queries if possible, but fixed for now */
  line-height: 1.2;
}

/* Tooltip */
.tm-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 0.5rem 0.8rem;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 20;
  margin-bottom: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  text-align: left;
  min-width: 150px;
}

.treemap-item:hover .tm-tooltip {
  opacity: 1;
}

/* Responsive Font Sizing for Treemap Items - Basic */
/* Since it's flex, smaller items might clip text. Use ellipsis. */
.tm-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.treemap-item:hover .tm-title {
  white-space: normal; /* Allow wrap on hover */
}

/* Treemap Absolute Layout Overrides */
.treemap-canvas {
  display: block; /* Remove flex */
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 0; /* Remove padding for perfect edge-to-edge fill */
  overflow: hidden;
}

.treemap-item {
  position: absolute;
  /* Reset flex props in case they leak, though position:absolute usually ignores them */
  flex-grow: 0;
  flex-basis: auto;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.2); /* Ensure borders are visible */
  box-sizing: border-box; /* Include border in width/height */
}
/* Netflix Rankings Styles Update */
.ranking-card {
  flex-wrap: wrap; /* Allow comment section to wrap */
}

/* Netflix Comments */
.btn-comment {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--secondary-color);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  transition: all 0.2s;
  margin-left: auto; /* Push to right */
}

.btn-comment:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.comment-section-container {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--glass-border);
  animation: fadeIn 0.3s ease;
}

.comment-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.comment-item {
  background: rgba(255, 255, 255, 0.03);
  padding: 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid var(--glass-border);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
  color: var(--secondary-color);
}

.comment-author {
  font-weight: 600;
  color: var(--text-color);
}

.comment-rating {
  color: #ffd700;
  font-size: 0.9rem;
}

.comment-body {
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--text-color);
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  border-top: 1px solid var(--glass-border);
  padding-top: 1rem;
}

.comment-inputs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.comment-inputs input {
  background: var(--input-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-color);
  padding: 0.6rem;
  border-radius: 0.3rem;
  flex: 1;
  min-width: 120px;
}

.comment-form textarea {
  background: var(--input-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-color);
  padding: 0.6rem;
  border-radius: 0.3rem;
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

.rating-select-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.5rem;
}

/* Star Rating Input */
.star-rating-input {
  display: flex;
  flex-direction: row-reverse;
  border: none;
}

.star-rating-input input {
  display: none;
}

.star-rating-input label {
  font-size: 1.5rem;
  color: #444;
  cursor: pointer;
  transition: color 0.1s;
  padding: 0 2px;
}

.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label {
  color: #ffd700;
}

.comment-submit-btn {
  align-self: flex-end;
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 0.5rem 1.2rem;
  border-radius: 0.3rem;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.2s;
}

.comment-submit-btn:hover {
  opacity: 0.9;
}

.comment-delete-btn {
  background: none;
  border: none;
  color: var(--warning-color); /* Red */
  cursor: pointer;
  font-size: 0.8rem;
  opacity: 0.6;
}
.comment-delete-btn:hover {
  opacity: 1;
}

/* --- Treemap Modal --- */
.treemap-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  backdrop-filter: blur(5px);
}

.treemap-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.treemap-modal-content {
  background-color: var(--card-bg);
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  display: flex;
  flex-direction: column;
}

.treemap-modal-overlay.active .treemap-modal-content {
  transform: translateY(0);
}

.tm-modal-header {
  position: relative;
  height: 300px; /* Increased height for better visibility */
  background-size: cover;
  background-position: top center; /* Focus on top (faces/title) */
  border-radius: 16px 16px 0 0;
}

.tm-modal-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%; /* Only fade bottom half */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    var(--card-bg) 100%
  );
}

.tm-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.tm-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.tm-modal-body {
  padding: 20px;
  position: relative;
  z-index: 5;
  margin-top: -60px; /* Overlap header */
}

.tm-modal-title {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}

.tm-modal-meta {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.tm-modal-badge {
  background: var(--accent-color);
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.85rem;
}

.tm-modal-section-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 5px;
}

.tm-modal-countries {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  max-height: 200px; /* Limit height for many items */
  overflow-y: auto;  /* Scroll if too many */
  padding-right: 5px; /* Space for scrollbar */
}

.tm-country-tag {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
}

/* --- Treemap List View & Toggle --- */
.map-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 15px;
  padding-left: 15px;
  border-left: 1px solid var(--border-color);
}

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

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

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--card-bg-hover);
  transition: 0.4s;
  border-radius: 24px;
  border: 1px solid var(--border-color);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-muted);
  transition: 0.4s;
  border-radius: 50%;
}

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

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
  background-color: white;
}

.toggle-label {
  font-size: 0.9rem;
  color: var(--text-color);
  cursor: pointer;
}

/* List Layout */
.tm-list-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.tm-list-item {
  display: flex;
  align-items: center;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 10px;
  gap: 15px;
  border: 1px solid var(--border-color);
  transition: transform 0.2s, background-color 0.2s;
  cursor: pointer;
}

.tm-list-item:hover {
  transform: translateY(-2px);
  background-color: var(--card-bg-hover);
}

.tm-list-rank {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-muted);
  min-width: 30px;
  text-align: center;
}

.tm-list-thumb {
  width: 80px;
  height: 45px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: #333;
}

.tm-list-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tm-list-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 2px;
}

.tm-list-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.tm-list-count {
  font-weight: 700;
  color: var(--accent-color);
}

/* --- View Type Toggle (Segmented Control) --- */
.view-type-toggle {
  display: inline-flex;
  background: var(--input-bg);
  padding: 3px;
  border-radius: 0.6rem;
  margin-left: 15px;
  border: 1px solid var(--border-color);
  gap: 0;
  height: 2.6rem; /* Match gender-btn */
  box-sizing: border-box;
  align-items: stretch;
}

.view-type-toggle input[type="radio"] {
  display: none;
}

.view-type-btn {
  padding: 0 12px;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
  height: 100%;
}

.view-type-btn:hover {
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.05);
}

/* Active State */
.view-type-toggle input[type="radio"]:checked + .view-type-btn {
  background: var(--primary-color);
  color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -1px rgba(0, 0, 0, 0.15);
  font-weight: 700;
  transform: translateY(-1px);
}

.view-type-icon {
  font-size: 1.1em;
}

/* Hide old toggle styles if invalid */
.map-view-toggle {
  border-left: none; /* Reset old separator */
  padding-left: 0;
}
/* Rating Badge in List */
.badge-rating {
  background: rgba(255, 215, 0, 0.15);
  color: #ffd700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Modal Watch Button */
.tm-modal-watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #e50914; /* Netflix Red */
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
  transition: background 0.2s;
  position: absolute;
  right: 3rem; /* Left of close button */
  top: 1rem;
}

.tm-modal-watch-btn:hover {
  background-color: #f40612;
}

.watch-icon {
  font-size: 0.8rem;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .tm-modal-watch-btn {
    position: static;
    margin-top: 0.5rem;
    width: 100%;
    justify-content: center;
  }
  .tm-modal-header {
    flex-wrap: wrap;
  }
}

/* Modal Comments */
.tm-comments-section {
  border-top: 1px solid var(--border-color);
  margin-top: 1rem;
  padding-top: 1rem;
}

.modal-comment-list {
  max-height: 200px; /* Scrollable area */
  overflow-y: auto;
  margin-bottom: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 0.5rem;
}

.modal-comment-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modal-comment-form textarea {
  min-height: 60px;
  resize: vertical;
}

/* Adjust mobile layout if needed */
@media (max-width: 480px) {
  .modal-comment-list {
    max-height: 150px;
  }
}

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

.modal.hidden {
  display: none;
}

.modal-content {
  background: var(--card-bg);
  margin: auto;
  padding: 2rem;
  border: 1px solid var(--glass-border);
  width: 90%;
  max-width: 500px;
  border-radius: 1rem;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.close-modal {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  color: var(--secondary-color);
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}

.close-modal:hover {
  color: var(--text-color);
}

/* Comment Item Style */
.comment-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
  padding: 0.8rem;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  color: var(--secondary-color);
}
.comment-rating {
  color: #ffd700;
}
.comment-text {
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--text-color);
}
.delete-comment-btn {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-size: 0.8rem;
  margin-left: 0.5rem;
}
.delete-comment-btn:hover {
  text-decoration: underline;
}

/* Fix Rating Dropdown Visibility */
#tving-rating-input {
  background-color: #1a1a1a;
  color: #ffffff;
  border: 1px solid var(--glass-border);
  padding: 0.5rem;
  border-radius: 0.5rem;
}

#tving-rating-input option {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* Tab Buttons */
.tab-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--secondary-color);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.tab-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-color);
}

.tab-btn.active {
  background: #ff153c; /* TVING Red */
  color: white;
  border-color: #ff153c;
  font-weight: 600;
}

/* Code Generator Placeholder Logic */
.canvas-wrapper:has(canvas[style*="block"]) .placeholder-text,
#qrcode-container:has(img) .placeholder-text {
  display: none;
}

/* Small Button for Quick Selection */
.small-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--secondary-color);
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.small-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary-color);
  border-color: var(--primary-color);
  transform: translateY(-1px);
}

/* Tool Header Styles */
.tool-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  list-style: none; /* Prevent dots if interpreted as list */
}

.tool-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-color);
}

/* Sidebar Category Styles */
.nav-category {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 0.5rem;
}

.category-btn {
  background: rgba(255, 255, 255, 0.03); /* Subtle background base */
  border: 1px solid rgba(255, 255, 255, 0.05); /* Subtle border */
  text-align: left;
  padding: 0.8rem 1rem;
  color: var(--text-color);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-main);
  cursor: pointer;
  border-radius: 0.75rem;
  transition: all 0.2s;
  width: calc(100% - 2rem);
  margin: 0.1rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0.9;
}

.category-btn:hover {
  background: rgba(255, 255, 255, 0.08); /* Brighter hover */
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
  opacity: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.arrow-icon {
  font-size: 0.9rem;
  transition: transform 0.3s ease;
  color: var(--secondary-color);
  /* Circle removed as per request */
  padding-left: 0.5rem; /* Ensure spacing from text */
  opacity: 0.7;
}

.category-btn:hover .arrow-icon {
  /* background: rgba(255, 255, 255, 0.2); Removed */
  color: var(--text-color);
  opacity: 1;
}

.nav-category.expanded .arrow-icon {
  /* Only color change, no rotation for ellipsis if preferred, but rotation makes it vertical which acts as "open" state */
  /* transform: rotate(90deg); */
  color: var(--primary-color);
  opacity: 1;
}

.nav-category.expanded .arrow-icon {
  transform: rotate(180deg);
  color: var(--primary-color);
}

.nav-category.expanded .category-btn {
  color: var(--primary-color);
  opacity: 1;
}

.category-content {
  display: none; /* Hidden by default */
  flex-direction: column;
  /* animation: slideDown 0.3s ease-out; */
  overflow: hidden;
}

.nav-category.expanded .category-content {
  display: flex;
}

/* Indent sub-items */
.category-content .nav-item {
  width: calc(100% - 3.5rem); /* More indent */
  margin: 0 1rem 0 2.5rem;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  font-weight: 400; /* Distinct from header */
  border-left: 2px solid var(--glass-border);
  border-radius: 0 0.5rem 0.5rem 0; /* Connected look */
  opacity: 0.7; /* Slightly dim when inactive */
  position: relative;
}

/* Add a pseudo-element to connect the line visually if valid */
.category-content .nav-item::before {
  content: "";
  position: absolute;
  left: -2px; /* Overlap border */
  top: 50%;
  width: 10px;
  height: 2px;
  background: var(--glass-border);
  opacity: 0;
  /* Connecting dots style could be tried but let's keep it simple first */
}

.category-content .nav-item:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.02);
}

.category-content .nav-item.active {
  border-left-color: var(--primary-color);
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary-color);
  opacity: 1;
  font-weight: 600;
}
/* Melon Tabs */
.melon-tabs .tab-btn {
  padding: 0.5rem 1rem;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-color);
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.melon-tabs .tab-btn.active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.playlist-search-btn {
  display: inline-block;
  margin-left: 10px;
  padding: 0.4rem 0.8rem;
  background: rgba(255, 0, 0, 0.1);
  color: #ff4444;
  border: 1px solid rgba(255, 0, 0, 0.3);
  border-radius: 20px;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.2s;
  vertical-align: middle;
}

.playlist-search-btn:hover {
  background: rgba(255, 0, 0, 0.2);
  border-color: #ff4444;
  transform: translateY(-1px);
}

.melon-tabs .tab-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.1);
}

/* Melon Chart Specifics */
/* Grid View (Default) */
.rankings-list:not(.view-list) {
  display: grid;
  /* Reduced min-width to fit more items and scale down */
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.8rem;
}

.rankings-list:not(.view-list) .ranking-item {
  display: flex;
  flex-direction: column;
  /* Card Style */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 0.6rem;
  transition: transform 0.2s, background 0.2s;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.rankings-list:not(.view-list) .ranking-item:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.1);
}

.rankings-list:not(.view-list) .rank-num {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-weight: bold;
  font-size: 0.8rem;
  padding: 1px 6px;
  border-radius: 8px;
  z-index: 2;
}

.rankings-list:not(.view-list) .item-poster {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.rankings-list:not(.view-list) .item-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.rankings-list:not(.view-list) .ranking-item:hover .item-poster img {
  transform: scale(1.05);
}

.rankings-list:not(.view-list) .item-info {
  width: 100%;
}

.rankings-list:not(.view-list) .item-title {
  font-size: 0.85rem; /* Reduced font size */
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--text-color);
  /* Multi-line ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  height: 2.5em; /* Ensure fixed height for 2 lines alignment */
}

.rankings-list:not(.view-list) .item-meta .artist {
  display: block;
  font-size: 0.75rem; /* Reduced font size */
  color: var(--secondary-color);
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rankings-list:not(.view-list) .item-meta .album {
  display: none; /* Hide album in grid view */
}

/* List View Overrides */
.rankings-list.view-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rankings-list.view-list .ranking-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.5rem 1rem;
  height: auto;
  width: 100%;
  margin: 0;
  justify-content: start;
  min-height: 70px;
}

.rankings-list.view-list .rank-num {
  font-size: 1.2rem;
  position: static;
  margin-right: 1rem;
  width: 40px;
  text-align: center;
  background: transparent;
  width: auto;
  min-width: 30px;
}

.rankings-list.view-list .item-poster {
  width: 50px;
  height: 50px;
  margin-right: 1rem;
  margin-bottom: 0;
  flex-shrink: 0;
}

.rankings-list.view-list .item-poster img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.rankings-list.view-list .item-info {
  text-align: left;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  width: auto;
}

.rankings-list.view-list .item-title {
  font-size: 1rem;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rankings-list.view-list .item-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.rankings-list.view-list .item-meta .artist {
  font-size: 0.9rem;
  margin-bottom: 0;
}

.rankings-list.view-list .item-meta .album {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Play Button Styles */
.play-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0; 
  transform: scale(0.9);
  transition: all 0.2s ease;
  z-index: 5;
  border: 1px solid rgba(255,255,255,0.2);
}

.play-btn span {
    padding-left: 2px; /* Visual center adjustment */
    line-height: 1;
}

.ranking-item:hover .play-btn {
  opacity: 1;
  transform: scale(1);
}

.play-btn:hover {
  background: #ff0000;
  border-color: #ff0000;
  transform: scale(1.1);
}

/* List View overrides for Play Button */
.rankings-list.view-list .play-btn {
    position: static;
    margin-left: auto;
    width: 36px;
    height: 36px;
    opacity: 1; /* Always visible in list view */
    background: transparent;
    border: 1px solid var(--glass-border);
    transform: none;
}
.rankings-list.view-list .play-btn:hover {
    background: rgba(255, 0, 0, 0.8);
    border-color: transparent;
}

/* Loan Limit Calculator Styles */
.limit-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.ratio-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.ratio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ratio-title {
  font-weight: 600;
  color: var(--text-color);
  font-size: 1rem;
}

.ratio-value {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--primary-color);
}

.ratio-bar-bg {
  width: 100%;
  height: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

[data-theme="light"] .ratio-bar-bg {
  background: rgba(0, 0, 0, 0.1);
}

.ratio-bar-fill {
  height: 100%;
  width: 0;
  background: var(--primary-color);
  border-radius: 5px;
  transition: width 0.5s ease-out, background-color 0.3s;
}

.ratio-bar-fill.safe {
  background: #22c55e; /* Green */
}
.ratio-bar-fill.warning {
  background: #f59e0b; /* Amber */
}
.ratio-bar-fill.danger {
  background: #ef4444; /* Red */
}

.ratio-desc {
  font-size: 0.85rem;
  color: var(--secondary-color);
}

.analysis-box {
  background: rgba(0,0,0,0.2);
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--glass-border);
  margin-bottom: 2rem;
}

[data-theme="light"] .analysis-box {
  background: rgba(255,255,255,0.5);
}

.analysis-box h4 {
  margin-bottom: 1rem;
  color: var(--text-color);
}

#limit-analysis-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

#limit-analysis-list li {
  font-size: 0.95rem;
  line-height: 1.5;
  padding-left: 1.5rem;
  position: relative;
}

#limit-analysis-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--secondary-color);
}

#limit-analysis-list li.success {
  color: #4ade80; /* Light Green */
}
#limit-analysis-list li.success::before { color: #4ade80; }

#limit-analysis-list li.warning {
  color: #fbbf24; /* Amber */
}
#limit-analysis-list li.warning::before { color: #fbbf24; }

#limit-analysis-list li.danger {
  color: #f87171; /* Light Red */
}
#limit-analysis-list li.danger::before { color: #f87171; }

/* Light Mode Overrides for Analysis Text */
[data-theme="light"] #limit-analysis-list li.success { color: #15803d; } /* Darker Green */
[data-theme="light"] #limit-analysis-list li.warning { color: #b45309; } /* Darker Amber */
[data-theme="light"] #limit-analysis-list li.danger { color: #b91c1c; } /* Darker Red */

.section-divider-title {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: var(--primary-color);
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 0.5rem;
}

.input-help {
    font-size: 0.8rem;
    color: var(--secondary-color);
    margin-top: -0.3rem; 
    margin-bottom: 0.5rem;
}

/* Small Grid View (4 items per row on mobile) */
.rankings-list.view-small-grid {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
}

.rankings-list.view-small-grid .ranking-item {
  padding: 0.4rem;
  border-radius: 8px;
}

.rankings-list.view-small-grid .rank-num {
  font-size: 0.7rem;
  padding: 1px 4px;
  top: 3px;
  left: 3px;
  border-radius: 6px;
}

.rankings-list.view-small-grid .item-poster {
  margin-bottom: 0.3rem;
  border-radius: 4px;
}

.rankings-list.view-small-grid .item-title {
  font-size: 0.75rem;
  height: 2.4em; /* Adjust for smaller font */
  -webkit-line-clamp: 2;
  margin-bottom: 1px;
}

.rankings-list.view-small-grid .item-meta .artist {
  font-size: 0.7rem;
}

.rankings-list.view-small-grid .play-btn {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
    bottom: 5px;
    right: 5px;
}

.rankings-list.view-small-grid .play-btn span {
    font-size: 0.9rem !important;
}

/* Mobile Layout Fix for Netflix Heatmap Toggle */
@media (max-width: 480px) {
  .map-category-toggle {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
  }

  .map-category-group {
    justify-content: center;
    width: 100%;
  }

  .view-type-toggle {
    margin-left: 0;
    width: 100%;
    margin-top: 0;
    justify-content: center;
    display: flex;
  }

  .view-type-toggle .radio-label {
    flex: 1;
    display: flex;
    justify-content: center;
  }
  
  .view-type-btn {
    width: 100%;
    white-space: nowrap; /* Prevent text wrap */
  }

  /* Fix Related Buttons wrap */
  .related-btn {
    white-space: nowrap;
  }
}

/* Modal Header Image Enhancement */
.tm-modal-header {
  position: relative;
  height: 300px; /* Enforce minimum height/fixed height */
  overflow: hidden;
  background-image: none !important; /* Override inline styles if any leak */
}

.modal-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.tm-modal-header::after {
  z-index: 1; /* Ensure overlay is above image */
}

.tm-modal-close,
.tm-modal-watch-btn {
  z-index: 10; /* Ensure controls are clickable */
}

/* Fix Modal Header Collapse */
.tm-modal-header {
  flex-shrink: 0;
  min-height: 300px;
}

/* Radio Group Styling */
.radio-group {
  display: flex;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.3rem;
  border-radius: 0.5rem;
  border: 1px solid var(--glass-border);
}

.radio-group input[type="radio"] {
  display: none;
}

.radio-group label {
  flex: 1;
  text-align: center;
  padding: 0.6rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--secondary-color);
  transition: all 0.2s;
}

.radio-group input[type="radio"]:checked + label {
  background: var(--primary-color);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}