@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');

/* Base Page Layout */
body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
}

body.has-category-panel {
  padding-left: 320px;
}

@media (max-width: 768px) {
  body.has-category-panel {
    padding-left: 0;
  }
}

.hidden {
  display: none !important;
}

html,
body {
  background-color: #000000;
  color: #f0f0f0;
  font-family: 'Inter', 'Open Sans', system-ui, sans-serif;
}

.card,
.survey-section,
.result-card {
  background-color: #000000 !important;
  color: #f0f0f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 8px;
}

/* Unified styling for each kink category block */
.kink-category {
  background-color: #000000;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--accent-text, rgba(255, 255, 255, 0.2));
  color: var(--accent-text);
}

.bar-label,
.item-label,
.item-name {
  color: #9ef0a7 !important;
}

.match-bar {
  background-color: #00cc88 !important;
}

.header,
.top-bar,
.partner-labels {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: none;
}

/* Default theme variables */
:root {
  --bg-color: #000000;
  --panel-color: #000;
  --text-color: #f0f0f0;
  --accent-text: #00ccff; /* fallback default for dark mode */
  --button-bg: #444;
  --button-text: #ffffff;
  --button-hover-bg: #666;
  --progress-fill-color: #00e676;
}
.category-panel {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 320px;
  overflow-y: auto;
  background-color: #000000;
  color: var(--text-color);
  padding: 10px 10px 20px 10px;
  z-index: 200;
  box-shadow: none;
  -webkit-font-smoothing: antialiased;
  scrollbar-color: var(--accent-color) #000000;
  border: none;
  box-sizing: border-box;
}

.category-panel::-webkit-scrollbar {
  width: 8px;
}

.category-panel::-webkit-scrollbar-thumb {
  background-color: var(--accent-color);
}

.category-panel::-webkit-scrollbar-track {
  background: #000000;
}

.category-panel:focus-within {
  outline: none;
}

#roleDefinitionsPanel {
  width: 460px;
  max-width: 100%;
  background-color: var(--panel-color);
  padding: 24px;
  overflow-y: auto;
  scroll-behavior: smooth;
  color: var(--text-color);
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
}






#closeRoleDefinitionsBtn {
  text-align: right;
  background: none;
  border: none;
  color: #ccc;
  font-size: 18px;
  width: 100%;
}
body.light-mode #closeRoleDefinitionsBtn {
  color: #2f4f2f;
}

@media (max-width: 768px) {

  #roleDefinitionsPanel {
    width: 90%;
    max-width: 320px;
    left: -100%;
  }

  #roleDefinitionsPanel.visible {
    left: 0;
  }

  .category-sidebar {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
  }

  .category-sidebar #categoryPanel {
    background-color: var(--panel-color, #000);
    max-width: 450px;
    width: 90%;
    max-height: 90vh;
  }

  /* mobile adjustments left intentionally blank after sidebar removal */
}

/* Ensure space below the final category button */
#categoryContainer {
  padding-bottom: 40px;
}

#categoryContainer button {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 10px;
  font-weight: bold;
  background-color: #333;
  color: #f8f8f8;
  border: 1px solid #555;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s;
}

#categoryContainer button:hover {
  background-color: #444;
}

/* Custom styles for kinks survey */
.category-panel button,
.category-panel label,
.category-panel input[type="checkbox"],
.start-survey-btn {
  box-shadow: none;
}

.category-panel button {
  border: 1px solid var(--accent-color);
}

.category-panel .category-list {
  padding-bottom: 40px;
}

.category-panel .category-list label {
  display: flex;
  align-items: center;
  border: 1px solid var(--accent-color);
  padding: 6px 8px;
  margin-bottom: 8px;
  background: transparent;
}

.start-survey-btn {
  margin-top: 10px;
  padding: 12px 24px;
  font-size: 1.2rem;
  border: 2px solid var(--accent-color);
}

.warning {
  margin-top: 8px;
  color: var(--accent-text, var(--accent-color));
}

.panel-container {
  margin-left: 340px;
  padding: 20px;
}

.survey-category {
  margin-bottom: 24px;
  border: 1px solid var(--accent-text, var(--accent-color));
  padding: 16px;
  background-color: var(--panel-bg, #000);
}

.kink-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.kink-row select {
  background-color: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--border-color);
  box-shadow: none;
}

.rating-tooltip {
  display: none;
  font-size: 0.8rem;
  margin-top: 4px;
  background-color: var(--panel-bg, #000);
  border: 1px solid var(--border-color);
  padding: 6px;
}

.rating-select:focus + .rating-tooltip {
  display: block;
}

#categoryContainer button.active {
  background-color: #000;
  color: #fff;
}
#categoryContainer button.disabled,
#mainCategoryList button.disabled {
  opacity: 0.5;
  pointer-events: none;
}
body.light-mode #categoryContainer button {
  background-color: #a9b8a9;
  color: #2f4f2f;
  border: 1px solid #9fb49f;
}
body.light-mode #categoryContainer button.active {
  background-color: #548c5a;
  color: #000;
}


/* Main Category List */
#mainCategoryList {
  margin-bottom: 10px;
}
#mainCategoryList button {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 10px;
  font-weight: bold;
  background-color: #333;
  color: #f8f8f8;
  border: 1px solid #555;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s;
}
#mainCategoryList button:hover {
  background-color: #444;
}
#mainCategoryList button.active {
  background-color: #666;
  color: white;
}
body.light-mode #mainCategoryList button {
  background-color: #a9b8a9;
  color: #2f4f2f;
  border: 1px solid #9fb49f;
}
body.light-mode #mainCategoryList button.active {
  background-color: #548c5a;
  color: #2f4f2f;
  border: 1px solid #000;
}
body.dark-mode #mainCategoryList button.active {
  background-color: #000;
  color: #fff;
  border: 1px solid #333;
}
body.theme-blue #mainCategoryList button.active {
  background-color: #000;
  color: #fff;
  border: 1px solid #333;
}
body.theme-blue-sky #mainCategoryList button.active {
  background-color: #99c9f2;
  color: #002244;
  border: 1px solid #99c9f2;
}
body.theme-echoes-beyond #mainCategoryList button.active {
  background-color: #334863;
  color: #fca311;
  border: 1px solid #fca311;
}
body.theme-love-notes-lipstick #mainCategoryList button.active {
  background-color: #ff6bd6;
  color: #311847;
  border: 1px solid #20c997;
}
body.theme-rainbow #mainCategoryList button.active {
  background-color: rgba(255, 255, 255, 0.9);
  color: #000;
  border: 1px solid #603636;
}

/* Theme Styling */
body.dark-mode {
  background-color: #000000;
  color: #f0f0f0;
  --panel-color: #000;
  --text-color: #f0f0f0;
  --button-bg: #444;
  --button-text: #ffffff;
  --button-hover-bg: #666;
}
body.light-mode {
  background-color: #939e93;
  color: #2f4f2f;
  --panel-color: #a9b8a9;
  --text-color: #2f4f2f;
  --button-bg: #558c75;
  --button-text: #ffffff;
  --button-hover-bg: #446d60;
}
body.theme-blue {
  background-color: #000000;
  color: #fff;
  --panel-color: #000000;
  --text-color: #fff;
  --button-bg: #000;
  --button-text: #ffffff;
  --button-hover-bg: #333;
}
body.theme-echoes-beyond {
  /* Outer Wilds inspired colors */
  background-color: #101a31;
  color: #fca311;
  --panel-color: #1b263b;
  --text-color: #fca311;
  --button-bg: #334863;
  --button-text: #fca311;
  --button-hover-bg: #1f3352;
}
body.theme-love-notes-lipstick {
  /* Monster Prom inspired colors */
  background-color: #311847;
  color: #ff6bd6;
  --panel-color: #3f206b;
  --text-color: #ff6bd6;
  --button-bg: #ff6bd6;
  --button-text: #311847;
  --button-hover-bg: #c44fb0;
}
body.theme-rainbow {
  background: linear-gradient(135deg, #cc7b7e, #c8a69c, #c89bbc, #8170a7);
  color: #000;
  --panel-color: #fff;
  --text-color: #000;
  --button-bg: rgba(255, 255, 255, 0.9);
  --button-text: #000;
  --button-hover-bg: rgba(255, 255, 255, 0.7);
}

/* Theme-specific panel colors */
body.light-mode .category-panel {
  background-color: #a9b8a9;
  color: var(--accent-text);
  border-right-color: #9fb49f;
}
body.theme-blue .category-panel {
  background-color: #000000;
  color: var(--accent-text);
  border-right-color: #003366;
}
body.theme-blue-sky .category-panel {
  background-color: #cde6ff;
  color: var(--accent-text);
  border-right-color: #99c9f2;
}
body.theme-echoes-beyond .category-panel {
  background-color: #1b263b;
  color: var(--accent-text);
  border-right-color: #fca311;
}
body.theme-love-notes-lipstick .category-panel {
  background-color: #3f206b;
  color: var(--accent-text);
  border-right-color: #20c997;
}
body.theme-rainbow .category-panel {
  /* Fully opaque panel to avoid text bleeding through */
  background-color: #fff;
  color: var(--accent-text);
  border-right-color: #603636;
}
body.theme-dark .category-panel,
body.theme-forest .category-panel,
body.theme-lipstick .category-panel {
  border: 2px solid var(--accent-color);
  background-color: #000000;
  box-shadow: none;
}

body.theme-dark .category-panel:hover,
body.theme-forest .category-panel:hover,
body.theme-lipstick .category-panel:hover {
  background-color: #000000;
  box-shadow: none;
}

/* === CATEGORY BOX BORDER PER THEME (WEB ONLY) === */

/* Base styling for all category panels */
.category-box {
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
  transition: border-color 0.3s ease;
}

/* Dark Theme: subtle muted charcoal */
body.theme-dark:not(.exporting) .category-box {
  border-color: #444;
}

/* Lipstick Theme: bold pink-magenta like Monster Prom */
body.theme-lipstick:not(.exporting) .category-box {
  border-color: #ff4fa2;
}

/* Forest Theme: calm pine green */
body.theme-forest:not(.exporting) .category-box {
  border-color: #5daa75;
}

/* Optional: hover highlight */
.category-box:hover {
  background-color: rgba(255, 255, 255, 0.04);
}


/* Header */
h1 {
  font-family: 'Fredoka One', cursive;
  text-align: center;
  margin-bottom: 30px;
}

/* Theme Selector */
#themeControl {
  text-align: center;
  margin-bottom: 20px;
}



/* Tab Container */
.tab-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.tab-toggle-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Tab Buttons */
.tab {
  padding: 10px 25px;
  border-radius: 6px;
  background-color: #ccc;
  color: #000;
  cursor: pointer;
  transition: background-color 0.3s;
  font-weight: 500;
}
.tab.active {
  background-color: #000;
  color: #fff;
  font-weight: bold;
}
.tab.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Tab Colors by Theme */
body.light-mode .tab {
  background-color: #a9b8a9;
  color: #2f4f2f;
}
body.light-mode .tab.active {
  background-color: #548c5a;
  color: #2f4f2f;
  border: 1px solid #000;
}
body.dark-mode .tab {
  background-color: #000000;
  color: #f5f5f5;
}
body.dark-mode .tab.active {
  background-color: #000;
  color: #fff;
  border: 1px solid #333;
}
body.theme-blue .tab {
  background-color: #000000;
  color: #fff;
}
body.theme-blue .tab.active {
  background-color: #000;
  border: 1px solid #333;
}
body.theme-blue-sky .tab {
  background-color: #cde6ff;
  color: #002244;
}
body.theme-blue-sky .tab.active {
  background-color: #99c9f2;
  border: 1px solid #99c9f2;
}
body.theme-echoes-beyond .tab {
  background-color: #2b314c;
  color: #fca311;
}
body.theme-echoes-beyond .tab.active {
  background-color: #334863;
  border: 1px solid #fca311;
}
body.theme-love-notes-lipstick .tab {
  background-color: #562b88;
  color: #ff6bd6;
}
body.theme-love-notes-lipstick .tab.active {
  background-color: #ff6bd6;
  color: #311847;
  border: 1px solid #20c997;
}
body.theme-rainbow .tab {
  background-color: rgba(255, 255, 255, 0.5);
  color: #000;
}
body.theme-rainbow .tab.active {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #603636;
}

/* Buttons and Controls */
button {
  margin: 10px auto;
  display: block;
  padding: 10px 20px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  background-color: var(--button-bg);
  color: var(--button-text);
  transition: background-color 0.3s;
  cursor: pointer;
}

/* Base style for role selection buttons */
.role-button {
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: bold;
  border: 1px solid transparent;
  margin-right: 4px;
}


textarea {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 10px auto;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #888;
  background-color: var(--panel-color);
  color: var(--text-color);
  font-family: inherit;
}

select {
  width: 200px;
  max-width: 100%;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #fff;
  display: inline-block;
  margin-top: 5px;
  box-sizing: border-box;
}

/* Category and Kink List */
#categoryContainer button {
  margin: 5px;
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid #aaa;
}
#categoryContainer button.active {
  background-color: #000;
  color: #fff;
}
body.light-mode #categoryContainer button {
  background-color: #a9b8a9;
  color: #2f4f2f;
  border: 1px solid #9fb49f;
}
body.light-mode #categoryContainer button.active {
  background-color: #548c5a;
  color: #2f4f2f;
  border: 1px solid #000;
}
body.dark-mode #categoryContainer button.active {
  background-color: #000;
  color: #fff;
  border: 1px solid #333;
}
body.theme-blue #categoryContainer button.active {
  background-color: #000;
  color: #fff;
  border: 1px solid #333;
}
body.theme-blue-sky #categoryContainer button.active {
  background-color: #99c9f2;
  color: #002244;
  border: 1px solid #99c9f2;
}
body.theme-echoes-beyond #categoryContainer button.active {
  background-color: #334863;
  color: #fca311;
  border: 1px solid #fca311;
}
body.theme-love-notes-lipstick #categoryContainer button.active {
  background-color: #ff6bd6;
  color: #311847;
  border: 1px solid #20c997;
}
body.theme-rainbow #categoryContainer button.active {
  background-color: rgba(255, 255, 255, 0.9);
  color: #000;
  border: 1px solid #603636;
}

/* Result Section with Theme Support */
#comparisonResult {
  margin-top: 30px;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
body.dark-mode #comparisonResult {
  background-color: #1f1f1f;
  color: #e0e0e0;
  border-color: #444;
}
body.light-mode #comparisonResult {
  background-color: #a9b8a9;
  color: #2f4f2f;
  border-color: #9fb49f;
}
body.theme-blue #comparisonResult {
  background-color: #000000;
  color: #fff;
}
body.theme-blue-sky #comparisonResult {
  background-color: #cde6ff;
  color: #002244;
}
body.theme-echoes-beyond #comparisonResult {
  background-color: #1b263b;
  color: #fca311;
}
body.theme-love-notes-lipstick #comparisonResult {
  background-color: #3f206b;
  color: #ff6bd6;
}
body.theme-rainbow #comparisonResult {
  background-color: rgba(255,255,255,0.8);
  color: #000;
}
/* Layout Wrapper for Sidebar and Content */
.main-container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}

/* Content Area Next to Sidebar */
.content-panel {
  flex: 1;
  padding-left: 20px;
  box-sizing: border-box;
}

/* Overlay for mobile sidebar */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 180;
  display: none;
}

/* Intro overlay shown before starting the survey */
#surveyIntro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

#surveyIntro .villain-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

#surveyIntro .villain-image {
  max-width: 240px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

#surveyIntro .villain-quote {
  font-family: 'Inter', 'Open Sans', system-ui, sans-serif;
  font-size: 1.4rem;
  color: var(--accent-text, #ff4dd2);
  border: 2px solid currentColor;
  border-radius: 12px;
  padding: 1rem;
  max-width: 500px;
  background-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

/* General villain panel styling used outside the intro overlay */
.villain-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  padding: 1.5rem;
  flex-wrap: wrap;
}

.villain-image,
.villain-img {
  width: 160px;
  max-width: 90%;
  height: auto;
  margin-bottom: 1rem;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.7);
}

.villain-quote {
  font-family: 'Fredoka One', sans-serif;
  font-size: 1.2rem;
  color: var(--accent-text);
  border: 2px solid var(--accent-text);
  padding: 1rem 1.5rem;
  border-radius: 10px;
  max-width: 500px;
  text-align: center;
  line-height: 1.5;
}

/* Dedicated block for villain quotes displayed on pages */
.villain-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  gap: 1rem;
  width: 100%;
}

.center-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.villain-block .villain-quote {
  border: 2px solid var(--accent-text);
  max-width: 500px;
  padding: 1rem 1.5rem;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.5;
}

.villain-toggle-btn {
  margin-top: 1rem;
  padding: 8px 16px;
  background-color: #444;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.villain-toggle-btn:hover {
  background-color: #666;
}

/* Overlay displayed for password entry */
#passwordOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
}


.password-modal {
  background-color: var(--panel-color);
  padding: 20px;
  border-radius: 8px;
  color: var(--text-color);
}

#surveyIntro .intro-modal {
  background-color: var(--panel-color);
  padding: 20px;
  border-radius: 8px;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 90%;
  max-width: 400px;
  box-sizing: border-box;
}

#categoryOverlay {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.category-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 320px;
  background-color: var(--panel-color, #000);
  color: var(--text-color, #ffffff);
  overflow-y: auto;
  padding: 24px 20px;
  z-index: 1000;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.4);
  display: none;
  flex-direction: column;
}

#categoryPanel {
  background-color: var(--panel-color, #fff);
  padding: 24px;
  border-radius: 8px;
  color: var(--text-color, #2c442e);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  max-width: 450px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  height: 100%;
  overflow-y: auto;
}

#categoryPanel h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 16px;
  color: var(--accent-text);
}

#category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

#duck-mascot {
  display: inline-block;
  width: 48px;
  height: 48px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


.scroll-container,
.category-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
  flex: 1 1 auto;
}

/* Category selection checkboxes */
.checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--accent-text);
  border-radius: 6px;
  background-color: var(--panel-color, #fff);
  color: var(--accent-text);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  width: 45%;
  box-sizing: border-box;
}

.checkbox-item.selected {
  background-color: var(--button-hover-bg, #e0e0e0);
  border-color: var(--progress-fill-color, #4caf50);
  color: var(--button-text, #fff);
}

.checkbox-item input {
  margin-top: 3px;
}

.category-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.select-btn {
  padding: 6px 12px;
  cursor: pointer;
  border: 2px solid var(--accent-text);
  border-radius: 4px;
  background-color: #444;
  color: var(--accent-text);
}
.select-btn:hover {
  background-color: #666;
}

.start-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background-color: #2a7cf7;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
}
.start-btn:hover {
  background-color: #1e5cbf;
}

body.light-mode .password-modal {
  background-color: #fff;
  color: #2f4f2f;
}
body.light-mode #surveyIntro .intro-modal {
  background-color: #fff;
  color: #2f4f2f;
}

.nav-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.nav-buttons button {
  flex: 1;
}

#surveyContainer {
  max-width: 800px;
  margin: 0 auto;
}

.final-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
}

/* Panel Survey Layout */
.panel-container {
  max-width: 750px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.expandable-panel {
  border-radius: 8px;
  overflow: hidden;
}

.expandable-panel summary {
  padding: 12px 16px;
  cursor: pointer;
  font-weight: bold;
  list-style: none;
}

.expandable-panel[open] .panel-content {
  padding: 16px;
  animation: fadeSlide 0.3s ease;
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

body.dark-mode .expandable-panel summary {
  background-color: #333;
  color: #f5f5f5;
}
body.light-mode .expandable-panel summary {
  background-color: #a9b8a9;
  color: #2f4f2f;
}
body.theme-blue .expandable-panel summary {
  background-color: #000000;
  color: #fff;
}
body.theme-blue-sky .expandable-panel summary {
  background-color: #cde6ff;
  color: #002244;
}
body.theme-echoes-beyond .expandable-panel summary {
  background-color: #2b314c;
  color: #fca311;
}
body.theme-love-notes-lipstick .expandable-panel summary {
  background-color: #562b88;
  color: #ff6bd6;
}
body.theme-rainbow .expandable-panel summary {
  background-color: rgba(255, 255, 255, 0.9);
  color: #000;
}

/* Micro-Animations */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bounce-in {
  animation: bounceIn 0.5s ease;
}
@keyframes bounceIn {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  80% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

button {
  position: relative;
  overflow: hidden;
}
button:hover {
  background-color: var(--button-hover-bg);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

button .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.6s linear;
  background-color: rgba(255,255,255,0.5);
  pointer-events: none;
}
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

#ratingLegend {
  display: none;
  position: absolute;
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
  border-radius: 5px;
  padding: 8px 12px;
  z-index: 1000;
  max-width: 520px;
  white-space: normal;
}
#ratingLegend ul {
  margin: 0;
  padding-left: 20px;
}
#ratingLegend li {
  margin: 2px 0;
}
body.light-mode #ratingLegend {
  background-color: #a9b8a9;
  color: #2f4f2f;
  border-color: #9fb49f;
}
.static-rating-legend {
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
  border-radius: 5px;
  padding: 8px 12px;
  max-width: 520px;
  margin: 10px auto;
}
.static-rating-legend ul {
  margin: 0;
  padding-left: 20px;
}
.static-rating-legend li {
  margin: 2px 0;
}
body.light-mode .static-rating-legend {
  background-color: #a9b8a9;
  color: #2f4f2f;
  border-color: #9fb49f;
}
/* Provide spacing at the top and bottom of the kink list */
#kinkList {
  padding: 10px 0;
}


/* Layout for survey action buttons */
.button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.main-nav-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.section-spacing {
  margin-top: 30px;
}

.survey-button {
  width: 260px;
  height: 50px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  background-color: #444;
  color: white;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.survey-button:hover {
  background-color: #666;
}

.button-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}

/* Back button placement on compatibility page */
.back-button-container {
  align-self: flex-start;
  margin-left: 20px;
}
.back-button-container button {
  margin: 10px 0;
}

//* Grid layout for compatibility page buttons */
.button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 80px;
  justify-content: center;
  margin: 0 auto 20px;
}

/* Vertical layout for compatibility page buttons */
.compatibility-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px; /* larger gap between button groups */
  margin: 0 auto 20px;
}

.compatibility-button {
  font-family: 'Fredoka One', cursive;
  width: 260px;
  height: 50px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  background-color: #444;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.compatibility-button:hover {
  background-color: #666;
}

.file-upload input[type="file"] {
  display: none;
}

.file-upload span {
  pointer-events: none;
}

.section-header {
  font-size: 1.3rem;
  margin: 24px 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 4px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-weight: 700;
  color: #ff5e5e;
}

.section-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 24px 0;
}

.role-card {
  background-color: #2a2a3d;
  border-radius: 8px;
  padding: 12px 18px;
  margin: 12px auto;
  max-width: 420px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  margin-left: auto;
  margin-right: auto;
}

.role-card h4 {
  font-size: 1.05rem;
  margin-bottom: 6px;
  font-weight: bold;
  color: #ffffff;
}

.role-card p {
  font-size: 0.93rem;
  color: #d6d6d6;
  margin: 0;
}
/* Communication panel layout adjustments */
#kinkList .kink-container {
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 16px;
  align-items: center;
}

#kinkList .kink-label {
  margin-bottom: 0;
}

#kinkList textarea {
  display: block;
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
  margin: 0 auto;
  background-color: var(--panel-color);
  color: var(--text-color);
}

#kinkList select {
  margin: 0;
}

.panel-content .kink-container {
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 16px;
  align-items: center;
}
.panel-content .kink-label {
  margin-bottom: 0;
}
.panel-content select {
  margin: 0;
}

.row {
  margin-bottom: 8px;
  align-items: center;
}

@media (max-width: 600px) {
  #kinkList textarea {
    max-width: 100%;
  }

  #kinkList .kink-container,
  .panel-content .kink-container {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
}

/* Layout for the kink list upload section */
.kink-list-section {
  max-width: 600px;
  margin: 20px auto;
  text-align: center;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.kink-list-section h2 {
  margin-bottom: 10px;
}

.kink-list-section p {
  margin-bottom: 20px;
}

/* Instruction banner on main page */
.instruction-banner {
  text-align: center;
  max-width: 800px;
  margin: 10px auto 30px;
  color: inherit;
}

/* Callout section below the banner */
.callout-section {
  max-width: 800px;
  margin: 20px auto;
  padding: 16px;
  background-color: var(--panel-color);
  border: 1px solid var(--button-bg);
  border-radius: 6px;
  color: inherit;
}

/* Centered menu container for main buttons */
.menu-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: auto;
}

/* Progress bar styles */
.progress-container {
  width: 80%;
  max-width: 300px;
  margin: 20px auto;
  background-color: #333;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  height: 26px; /* keep progress bar text from being clipped */
  overflow: hidden;
}
.progress-label {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  margin-bottom: 4px;
}
.progress-bar {
  width: 100%;
  height: 100%;
  background-color: #333;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 1rem;
  display: inline-block;
  overflow: hidden;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
}
.progress-bar-text {
  color: #ffffff;
  font-weight: bold;
}
.progress-fill {
  height: 100%;
  width: 0;
  background-color: #00e676;
  transition: width 0.4s ease;
  border-radius: 4px 0 0 4px;
}

/* Match progress bar background to theme */
body.dark-mode .progress-container,
body.dark-mode .progress-bar {
  background-color: #333;
}
body.light-mode .progress-container,
body.light-mode .progress-bar {
  background-color: #b8c5b8;
}
body.theme-blue .progress-container,
body.theme-blue .progress-bar {
  background-color: #000000;
}
body.theme-blue-sky .progress-container,
body.theme-blue-sky .progress-bar {
  background-color: #e6f2ff;
}
body.theme-echoes-beyond .progress-container,
body.theme-echoes-beyond .progress-bar {
  background-color: #14213d;
}
body.theme-love-notes-lipstick .progress-container,
body.theme-love-notes-lipstick .progress-bar {
  background-color: #311847;
}
body.theme-rainbow .progress-container,
body.theme-rainbow .progress-bar {
  background-color: #fff;
}

/* Kink breakdown table */
.kink-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0;
  font-size: 0.9rem;
}

.kink-table th,
.kink-table td {
  border: 1px solid #666;
  padding: 2px 4px;
  text-align: center;
}

.kink-table th {
  background-color: #333;
}

.kink-table td:first-child {
  text-align: left;
}
.match-row {
  background-color: #263326;
}
body.light-mode .match-row {
  background-color: #ccdacc;
}
.accordion-panel,
.accordion-panel > summary,
.accordion-panel > details {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.accordion-panel > summary {
  cursor: pointer;
}

.accordion-panel > details[open] {
  border: 1px solid #444;
  max-height: 80vh;
  overflow-y: auto;
}

/* ✅ Codex Instructions: Accordion Overflow Fix for Bottom Categories
   Goal: Prevent bottom categories like “Protocol and Ritual” and “Mouth Play” from visually spilling out or stretching beyond the accordion layout.
   These styles ensure the open section is scrollable, sized appropriately, and visually contained like the top categories.
*/
/* Codex update: prevent accordion items from stretching */
.accordion-item {
  flex-shrink: 0;
  flex-grow: 0;
  min-height: auto;
  height: auto;
  overflow: hidden;
  border-radius: 4px;
  max-width: 100%;
  transition: max-height 0.3s ease;
}

.accordion-item.active {
  max-height: 1000px;
}

.accordion-item.active .accordion-content {
  max-height: 800px;
}

.accordion-button,
.accordion-content {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.accordion-content {
  max-height: 500px;
  overflow-y: auto;
  padding: 1rem;
  transition: max-height 0.3s ease-in-out;
}

/* Ensure sidebar and accordion items do not stretch full height */
.sidebar {
  align-items: flex-start;
  justify-content: flex-start;
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Prevent bottom accordion sections from growing outside view */
.accordion-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 100%;
  overflow-y: auto;
}

.json-display {
  width: 100%;
  max-width: 600px;
  height: 200px;
  overflow: auto;
  background-color: #000;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  box-sizing: border-box;
}
body.light-mode .json-display {
  background-color: #fff;
  color: #2f4f2f;
}

#categoryDescription {
  margin-bottom: 10px;
  font-style: italic;
}

/* Scrollbar styling for panels */
.scrollable-panel {
  scrollbar-width: thin;
  scrollbar-color: #888 #000000;
  padding-bottom: 12px;
}

.scrollable-panel::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.scrollable-panel::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

.scrollable-panel::-webkit-scrollbar-track {
  background: #000000;
}

body.light-mode .scrollable-panel {
  scrollbar-color: #666 #d0d0d0;
}

body.light-mode .scrollable-panel::-webkit-scrollbar-thumb {
  background-color: #666;
}

body.light-mode .scrollable-panel::-webkit-scrollbar-track {
  background: #d0d0d0;
}


/* ===== TALK KINK SURVEY LAYOUT FIX (DESKTOP + MOBILE) ===== */
/* Applies ONLY to survey content — does not affect Greenlight */

#survey-section,
#survey-section *,
#survey-section select,
#survey-section input[type="text"],
.role-button,
body {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, box-shadow 0.3s ease;
}

#survey-section .category-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap; /* allows wrapping on smaller screens */
}

/* Label for category/kink name */
#survey-section .category-label {
  white-space: normal;
  word-wrap: break-word;
  max-width: 250px;
  padding-right: 6px;
  font-size: 15px;
  line-height: 1.4;
  flex: 1 1 60%; /* allows flexibility */
}

/* Dropdown styling */
#survey-section .rating-select {
  min-width: 100px;
  max-width: 150px;
  flex: 1 1 35%;
  margin-left: 0;
}

#survey-section select,
#survey-section input[type="text"] {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #aaa;
  appearance: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

#survey-section select:hover,
#survey-section input[type="text"]:hover {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

/* ===== RESPONSIVE TWEAKS ===== */
@media (max-width: 768px) {
  #survey-section .category-row {
    flex-direction: column;
    align-items: flex-start;
  }

  #survey-section .category-label {
    max-width: 100%;
    font-size: 15px;
    margin-bottom: 4px;
  }

  #survey-section .rating-select {
    width: 100%;
    max-width: 100%;
  }
}

/* === SURVEY CATEGORY PROGRESS TRACKER FIX === */
/* Prevents "Category 1 of X (Y left)" from being cut off */

#survey-section .category-progress {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 8px;
  padding: 0 12px;
  line-height: 1.4;
}

/* Ensures safe resizing on mobile */
@media (max-width: 768px) {
  #survey-section .category-progress {
    font-size: 13px;
    text-align: center;
    padding: 0 8px;
  }
}
/* === STYLES FOR CR COMPATIBILITY RESULTS DISPLAY === */
/* Mimics BDSMTest.org style while preserving original role data */

#cr-results-container {
  background-color: #000000;
  border: 2px solid #ccc;
  border-radius: 6px;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
  font-family: 'Arial', sans-serif;
  color: white;
}

#cr-results-container h2 {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--accent-text);
  text-align: center;
}

/* Each role result row */
.cr-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px 0;
}

/* Role name */
.cr-role-name {
  flex: 1;
  text-align: left;
  padding-right: 10px;
}

/* Bar container and percentage */
.cr-role-score {
  flex: 2;
  display: flex;
  align-items: center;
}

/* Progress bar outline */
.cr-bar {
  height: 4px;
  background-color: #444;
  width: 100%;
  margin-right: 8px;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
}

/* Fill inside bar */
.cr-fill {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 3px;
}

/* Text % next to bar */
.cr-percent {
  width: 32px;
  text-align: right;
  font-size: 13px;
}

/* Fill color logic */
.cr-fill.green { background-color: #00cc44; }     /* 80–100% */
.cr-fill.yellow { background-color: #ffaa00; }    /* 30–79% */
.cr-fill.red { background-color: #cc0033; }       /* 0–29% */

/* -------------------------------------------------- */
/*  Compatibility Comparison Updates                  */
/* -------------------------------------------------- */

/* Compatibility comparison cleanup */
.compatibility-bar,
.compare-bar {
  display: none !important;
}

/* 🧹 CLEAN COMPARISON LAYOUT (NO BARS) */
.compare-entry {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  font-size: 14px;
  border-bottom: 1px solid #e0e0e0;
}
.compare-entry .label {
  flex: 2;
  font-weight: 500;
  color: #444;
}
.compare-entry .you,
.compare-entry .partner {
  flex: 1;
  text-align: center;
  color: #666;
}

/* 🎨 PDF OUTPUT STYLING (MATCH BDSMTest.org Aesthetic) */
.result-container,
.pdf-container {
  position: relative;
  background-color: #000000;
  color: #f0f0f0;
  font-family: 'Segoe UI', Arial, 'Helvetica Neue', sans-serif;
  max-width: 700px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Wrapper used for PDF export */
.print-wrapper {
  background-color: #000000;
  padding: 20px;
}

.result-section-title {
  font-size: 20px;
  font-weight: 600;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 18px;
  padding-bottom: 6px;
  color: #f0f0f0;
}

.result-entry {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  margin-bottom: 6px;
  background-color: #000000;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.result-entry .label {
  flex: 2;
  font-weight: 500;
}
.result-entry .score {
  flex: 1;
  text-align: right;
  font-weight: 400;
  color: var(--text-color, #555);
}

.download-btn {
  background-color: #000000;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  margin-top: 30px;
  cursor: pointer;
}
.download-btn:hover {
  background-color: #444;
}

/* ===== Kink Comparison Bars ===== */
.kink-compare-section {
  margin-bottom: 24px;
  border-bottom: 1px solid #444;
  padding-bottom: 16px;
}

.kink-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
  color: var(--text-color);
}

.kink-bar-row {
  display: flex;
  align-items: center;
  margin: 4px 0;
  gap: 8px;
}

.kink-label {
  width: 120px;
  font-size: 14px;
  color: var(--text-color);
}

.kink-bar-container {
  flex: 1;
  background-color: #ddd;
  height: 6px;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.kink-bar-fill {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #00cc44;
  border-radius: 3px;
}

.kink-score {
  width: 32px;
  font-size: 13px;
  text-align: right;
  color: var(--text-color);
}

/* ===== Comparison Chart ===== */
#comparison-chart {
  background-color: #000000;
  color: white;
  font-family: Arial, sans-serif;
  padding: 24px;
  border-radius: 12px;
  max-width: 850px;
  margin: 40px auto;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

.result-row {
  display: flex;
  align-items: center;
  padding: 6px 0;
  gap: 12px;
  border-bottom: 1px solid #2a2a2a;
}

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

.percentage {
  width: 60px;
  font-weight: bold;
  text-align: right;
  color: white;
}

.role {
  flex: 1.5;
  color: white;
}

.bar-container {
  flex: 2;
  background: #000000;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 5px;
}

.more-info {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: #ccc;
}

@media (max-width: 600px) {
  #comparison-chart {
    padding: 16px;
    margin: 20px 10px;
  }
  .percentage {
    width: 45px;
    font-size: 0.8rem;
  }
  .more-info {
    font-size: 0.75rem;
  }
}
/* Compatibility page refined layout */
#compatibility-report {
  font-family: 'Segoe UI', Arial, sans-serif;
  max-width: 850px;
  margin: 20px auto;
  color: var(--text-color);
}

.col-labels {
  display: flex;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
  color: #f0f0f0;
}
.col-labels .label-col {
  flex: 2;
}
.col-labels .col-label {
  flex: 1;
  text-align: center;
  color: inherit;
}

.category-header {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  padding: 4px 0;
  margin: 12px 0 4px;
}
.category-wrapper {
  margin-bottom: 24px;
  padding-bottom: 20px;
}

#listOutput section {
  break-inside: avoid;
  page-break-inside: avoid;
}
.category-header.green { color: #00cc66; }
.category-header.yellow { color: #ffcc00; }
.category-header.red { color: #ff4444; }
.category-header.flag-high { color: #00cc66; }
.category-header.flag-low { color: #ff4444; }

.compare-row {
  display: flex;
  align-items: center;
  font-size: 14px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 4px 0;
}
.compare-label {
  flex: 2;
  padding-right: 8px;
  font-weight: 500;
  font-size: 16px;
}
.compare-label.green { color: #00cc66; }
.compare-label.yellow { color: #ffcc00; }
.compare-label.red { color: #ff4444; }
.partner-bar {
  flex: 1;
  position: relative;
  height: 12px;
  background: #000000;
  border-radius: 8px;
  margin: 0 6px;
}
.partner-fill {
  height: 100%;
  border-radius: 8px;
}
.partner-fill.green { background-color: #00cc66; box-shadow: 0 0 5px rgba(0,204,102,0.6); }
.partner-fill.yellow { background-color: #ffcc00; box-shadow: 0 0 5px rgba(255,204,0,0.6); }
.partner-fill.red { background-color: #ff4444; box-shadow: 0 0 5px rgba(255,68,68,0.6); }
.partner-fill.black { background-color: #000000; box-shadow: none; }
.partner-text {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  font-size: 16px;
  text-align: center;
  pointer-events: none;
  color: #ffffff;
}
.partner-text.green { color: #ffffff; }
.partner-text.yellow { color: #ffffff; }
.partner-text.red { color: #ffffff; }
.partner-text.black { color: #ffffff; }
.compare-icons {
  width: 40px;
  text-align: right;
  font-size: 16px;
}

.icon-star { color: #ffd700; }
.icon-red-flag { color: #e60000; }
.icon-yellow-flag { color: #f1c40f; }
.icon-green-flag { color: #00c853; }


.page-break { display: none; }

@page {
  size: A4 landscape;
  margin: 0;
}

@media print {

  body {
    margin: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body,
  html {
    background-color: var(--bg-color, #000) !important;
    color: var(--text-color, inherit) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .pdf-container {
    background-color: transparent !important;
    color: inherit !important;
    padding: 0;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }

  .print-wrapper {
    padding: 0 !important;
  }

  .card,
  .category-box,
  .result-card {
    background-color: var(--panel-color, #000) !important;
    color: inherit !important;
    border: 1px solid #333 !important;
    box-shadow: none !important;
  }

  .match-bar {
    background-color: #444 !important;
  }

  .item-label {
    color: #c0ffc7 !important;
  }

  .pdf-container h2,
  .pdf-container h3,
  .pdf-container .category-title {
  text-align: center;
  color: red;
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 40px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

  .pdf-container .bar-label {
    color: #9ef0a7 !important;
  }

  .pdf-container .match-bar {
    background-color: #444 !important;
  }
}
html, body {
  background-color: #000 !important;
  color: #fff !important;
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
}

#app,
.print-wrapper,
.card,
.kink-category,
.section {
  background-color: #000000 !important;
  color: #fff !important;
  border: 1px solid #333 !important;
  box-shadow: none !important;
}

.section-header,
.category-header {
  color: #ff4444 !important;
  font-weight: 600;
}

.item-label,
.partner-label,
span,
p,
li {
  color: #f0f0f0 !important;
}

.progress-bar-container {
  background-color: #000000 !important;
}

.progress-bar-fill {
  background-color: #00e676 !important;
}

table,
tr,
td,
th {
  background-color: #000000 !important;
  color: #fff !important;
}

hr {
  border-color: #333 !important;
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

[class*="dark"], [class*="theme"], .theme-dark {
  background-color: #000 !important;
  color: #fff !important;
}

body {
  background-color: #000;
  color: #eee;
  font-family: 'Segoe UI', sans-serif;
}

#compatibility-wrapper {
  background-color: #000000 !important;
  color: #f5f5f5;
  padding: 1rem;
  border-radius: 8px;
}
.category-title {
  text-align: center;
  color: red;
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 40px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.category-empty {
  color: #ff4444;
  font-weight: bold;
  font-size: 1.1rem;
}

.score-bar {
  background-color: #00c853;
  color: #000;
  border-radius: 4px;
  padding: 2px 6px;
  font-weight: bold;
}

.pdf-page {
  margin-bottom: 2rem;
}

.print-only {
  display: none;
}

/* Simple compatibility results table */
.results-table {
  width: 100%;
  max-width: none;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
}
.results-table th,
.results-table td {
  padding: 4px 6px;
  text-align: center;
}
.results-table th:first-child,
.results-table td:first-child {
  text-align: left;
  width: 45%;
}
.results-table th:nth-child(2),
.results-table td:nth-child(2) {
  width: 13%;
}
.results-table th:nth-child(3),
.results-table td:nth-child(3) {
  width: 10%;
}
.results-table th:nth-child(4),
.results-table td:nth-child(4) {
  width: 7%;
}
.results-table th:nth-child(5),
.results-table td:nth-child(5) {
  width: 13%;
}
.results-table th {
  border-bottom: 2px solid #444;
  font-size: 1rem;
  color: #ccc;
}
.results-table .kink-name {
  color: #ccc;
  font-weight: bold;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
  max-width: 220px;
}
.results-table .row {
  border-bottom: 1px solid #333;
}
.results-table .bar-container {
  width: 100%;
  background-color: #000000;
  border-radius: 4px;
  overflow: hidden;
  height: 12px;
}
.results-table .bar {
  height: 12px;
}
.results-table .green { background-color: #00e676; }
.results-table .yellow { background-color: #ffee58; }
.results-table .red { background-color: #f44336; }
.results-table .percent-label {
  font-size: 0.85rem;
  color: #aaa;
}

/* Slimmed-down result card for compatibility results */
.result-card {
  background-color: #000000; /* pure black for dark mode */
  border-radius: 6px;
  padding: 6px 12px;
  margin-bottom: 8px;
  font-size: 12px;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  color: #f0f0f0;
  max-width: 100%;
}

/* Header Row (Kink | Partner A | Partner B) */
.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 12px;
  color: #fff;
}

/* Body of each row (kink label + 2 bars) */
.result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0;
  font-size: 11px;
  flex-wrap: wrap;
}

/* Kink Label */
.kink-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bar Containers */
.result-bar {
  flex: 1;
  background-color: #444;
  height: 10px;
  border-radius: 3px;
  position: relative;
}

/* Green Fill */
.result-bar-fill {
  background-color: #00cc66;
  height: 100%;
  border-radius: 3px;
}

/* Percentage Text */
.percentage-label {
  font-size: 10px;
  text-align: right;
  color: #ccc;
  margin-left: 4px;
}

@media print {

  .pdf-container {
    width: 100%;
    padding: 0;
    background-color: transparent;
    color: inherit;
    font-family: sans-serif;
  }

  .print-wrapper {
    padding: 0 !important;
  }

  .category-header {
    font-weight: bold;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.25rem 0;
  }

  #listOutput section {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .category-header.green { color: #00cc44; }
  .category-header.yellow { color: #cccc00; }
  .category-header.red { color: #cc0033; }
  .category-header.flag-high { color: #00cc44; }
  .category-header.flag-low { color: #cc0033; }

  .comparison-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--panel-color, #000);
    color: inherit;
    padding: 0.5rem 0.75rem;
    margin: 0.25rem auto;
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1.2;
    max-width: 320px;
    height: auto;
    min-height: 1.2rem;
    page-break-inside: avoid;
  }

  .kink-label {
    flex: 1.4;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
  }

  .partner-score {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  .bar {
    height: 0.35rem;
    border-radius: 3px;
    flex-grow: 1;
    background-color: lightgray;
    position: relative;
  }

  .bar-fill {
    height: 100%;
    border-radius: 3px;
    background-color: var(--color);
    width: var(--width);
  }

  .percentage-label {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--color);
    min-width: 2.2rem;
    text-align: right;
  }

  .match-icon {
    font-size: 0.75rem;
    margin-left: 0.4rem;
  }

  .download-help-button,
  .save-results-buttons {
    display: none !important;
  }
}

@media print {
  body {
    background: #000 !important;
    color: var(--text-color, inherit) !important;
  }
}

/* 📄 Web layout */
.compatibility-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
}

/* 🖨️ PDF Export Fix */
.exporting body,
.exporting html {
  margin: 0;
  padding: 0;
  background: #000 !important;
  color: #fff;
  height: 100%;
  width: 100%;
}

.exporting {
  zoom: 0.8;
}

.exporting #compatibility-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px !important;
  margin: 0 auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
}

.exporting .results-table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 13px;
}

.exporting .kink-label {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.exporting .progress-bar {
  height: 12px;
  margin: 2px 0;
}


.exporting #compatibility-wrapper h1,
.exporting #compatibility-wrapper h2,
.exporting #compatibility-wrapper h3,
.exporting #compatibility-wrapper h4,
.exporting #compatibility-wrapper h5,
.exporting #compatibility-wrapper h6 {
  text-align: center;
}


@page {
  size: A4 landscape;
  margin: 0;
}

@media print {
  html, body {
    margin: 0;
    padding: 0;
    background: #000 !important;
    color: white;
  }

  .compatibility-wrapper, .results-table {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .results-table td, .results-table th {
    page-break-inside: avoid;
    break-inside: avoid;
    word-wrap: break-word;
  }

  nav, header, footer, aside, .no-print {
    display: none !important;
  }
}


/* Loading spinner displayed during PDF generation */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.loading-overlay .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ffffff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media print {
  .loading-overlay {
    display: none !important;
  }
}

@media print {
  * {
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  html,
  body {
    background: #000 !important;
    color: #ffffff !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
  }

  #compat-container, #pdf-container {
    margin: 0 auto !important;
    padding: 0 !important;
    background-color: #000 !important;
    width: 100% !important;
    display: flex;
    justify-content: center;
    page-break-before: avoid;
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  #compatibility-wrapper {
    display: table;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* Centered PDF export containers */
#compat-container, #pdf-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

#compatibility-wrapper {
  width: 100%;
  max-width: 1000px;
  background: #000;
  margin: 0 auto;
}

@media print {
  body, #compat-container, #pdf-container, #compatibility-wrapper {
    background: #000 !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  #compatibility-wrapper {
    page-break-before: avoid;
    page-break-after: avoid;
    page-break-inside: avoid;
  }
}

/* 
 * Instructions: Add the following CSS (e.g., in your stylesheet or a <style> tag) to fix PDF alignment.
 * - Defines print styles to center content and use full page width.
 * - Ensures content is not cut off (tables, graphs) and supports multi-page output.
 * Copy-paste this entire block into your codebase (after any existing CSS so it can override as needed).
 */
@page {
  margin: 0;
  size: A4 landscape;
}
@media print {
  /* Hide unnecessary elements (nav, sidebars) to allow main content full width */
  nav, aside, .sidebar, .side-column, .no-print { 
    display: none !important; 
  } /* Hiding side sections for print:contentReference[oaicite:1]{index=1} */

  /* Reset body/HTML margin to avoid any additional whitespace */
  html, body {
    margin: 0;
    padding: 0;
  }

  /* Make main content container span full width and remove padding/margins */
  #mainContent, .container, main, article {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  } /* Force content container to full width:contentReference[oaicite:2]{index=2}:contentReference[oaicite:3]{index=3} */

  /* Flatten multi-column layouts: ensure no flex/grid limiting width */
  .row, .col, .flex-container, .grid-container {
    display: block !important;
    width: 100% !important;
  } /* Make flex/grid containers full width:contentReference[oaicite:4]{index=4} 
       (Ensure parent elements aren’t inline-block/flex to allow page breaks:contentReference[oaicite:5]{index=5}) */

  /* Prevent content overflow: tables, images, graphs scale to fit page */
  table, img, canvas, svg {
    max-width: 100% !important;  /* no element wider than page */
  }
  img, canvas, svg {
    height: auto !important;     /* keep aspect ratio for images/canvases */
  }
  td, th {
    word-wrap: break-word;       /* break long text in tables to avoid overflow */
  }

  /* Avoid cutting off content between pages */
  tr, img, .chart, .graph { 
    page-break-inside: avoid;    /* do not break table rows or images across pages */
    break-inside: avoid;         /* modern equivalent for avoiding breaks inside element:contentReference[oaicite:6]{index=6} */
  }
}
/* If using a PDF generator like wkhtmltopdf, enable print media styles (e.g., use the --print-media-type flag):contentReference[oaicite:7]{index=7} */

/* === EXPORT FIXES FOR PDF === */
.exporting body {
  margin: 0;
  padding: 0;
  background: #000 !important;
  color: #fff !important;
}

.exporting .compatibility-wrapper {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: #000 !important;
}

.exporting .results-table {
  width: 100% !important;
  margin: 0 auto !important;
  border-collapse: collapse;
  word-wrap: break-word;
  table-layout: fixed;
  font-size: 13px;
}

.exporting .results-table td,
.exporting .results-table th {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  padding: 6px 4px;
  font-size: 12px;
}

/* === Print/PDF layout fixes === */
@media print {
  @page {
    size: A4;
    margin: 0;
  }

  html, body {
    margin: 0;
    padding: 0;
    background: black;
    color: white;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .compatibility-wrapper {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center; /* Center the table horizontally */
    transform: scale(0.88) translateX(20px); /* Shift right */
    transform-origin: top center;
  }

  .results-table {
    width: 100%;
    max-width: none;
    table-layout: fixed;
    word-wrap: break-word;
  }

  th, td {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .category-title {
    text-align: center;
    color: red;
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/* Make the section headers black */
.exporting .category-header {
  color: #ff4444 !important;
  text-align: center;
}

/* Hide non-essential export elements */
@media print {
  nav, header, footer, .no-print {
    display: none !important;
  }
}
/* Set universal black background and text color for PDF */
@media print {
  html, body {
    margin: 0;
    padding: 0;
    background: #000 !important;
    color: white !important;
  }

  .compatibility-wrapper {
    background: #000 !important;
    color: white !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box;
  }

  .results-table {
    width: 100% !important;
    table-layout: fixed;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .results-table th,
  .results-table td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 200px;
    white-space: normal;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  nav, header, footer, aside, .no-print {
    display: none !important;
  }
}

/* Web display (non-print) */
.compatibility-wrapper {
  background: #000 !important;
  color: white;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.results-table {
  width: 100%;
  table-layout: fixed;
  word-wrap: break-word;
}

.results-table th,
.results-table td {
  white-space: normal;
}

/* === EXPORT MODE FIXES === */
.exporting body {
  margin: 0;
  padding: 0;
  background: #000 !important;
  color: #fff !important;
}

.exporting .compatibility-wrapper {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: #000 !important;
}

/* Force black header background instead of dark blue */
.exporting .category-header {
  color: #f00 !important; /* Or #fff if you'd rather use white text */
  text-align: center;
}

/* Ensure table fits, wraps long text, and doesn't overflow */
.exporting .results-table {
  width: 100% !important;
  margin: 0 auto !important;
  table-layout: fixed;
  border-collapse: collapse;
  word-wrap: break-word;
  font-size: 13px;
}

.exporting .results-table td,
.exporting .results-table th {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  padding: 6px 4px;
  font-size: 12px;
}

/* Hide UI elements during export */
@media print {
  nav, header, footer, .no-print {
    display: none !important;
  }
}
/* Print-specific layout fixes for PDF export */
@media print {
  .compatibility-wrapper {
    display: table;
    margin: 0 auto;
    transform: scale(0.9);
    transform-origin: top center;
  }

  .results-table {
    width: 100%;
    max-width: none;
  }

  th, td {
    white-space: normal;
    word-wrap: break-word;
  }

  @page {
    size: A4;
    margin: 0;
  }

  body {
    margin: 0;
    padding: 0;
    background: #000;
  }
}

.print-mode {
  background: black !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  transform: scale(0.94);
  transform-origin: top center;
  overflow: hidden;
}

@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html, body {
    background: black !important;
    color: white !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden;
  }

  .container, .print-mode {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
  }

  @page {
    margin: 0;
    size: auto;
  }
}

/* === Theme-Compatible Elements for /kinks/ page === */
:root {
  --accent-text: #00ccff; /* default (dark) */
}

/* Theme-specific overrides */
.theme-dark {
  --accent-text: #00ccff;
}

.theme-forest {
  --accent-text: #66ff66;
}

.theme-lipstick {
  --accent-text: #ff3399;
}

/* MAIN TALK KINK HEADER */
.themed-header {
  font-family: 'Fredoka One', sans-serif;
  font-size: 3.2rem;
  text-align: center;
  color: var(--accent-text);
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Generic border using the accent color */
.themed-border {
  border: 2px solid var(--accent-text);
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem auto;
  width: fit-content;
}

/* Shared border style for theme selector and buttons */
.highlighted-box {
  border: 2px solid var(--accent-text);
  border-radius: 10px;
}

  .themed-button {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    border: 2px solid var(--accent-color, #00ffff);
    background-color: #000000;
    color: var(--accent-color, #00ffff);
    font-weight: 700;
    text-align: center;
    white-space: normal;
    max-width: 280px;
    margin: 0.5rem auto;
    transition: background 0.2s, transform 0.1s;
    cursor: pointer;
    text-decoration: none;
  }

.themed-button:hover {
  background-color: #000000;
  transform: scale(1.02);
}

.themed-button:active {
  background-color: #000000;
  transform: scale(0.98);
}

.select-toggle-button {
  background: transparent;
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
  text-decoration: none;
  padding: 0.8rem 1.6rem;
  font-size: 1.2rem;
  font-weight: bold;
  font-family: 'Fredoka One', sans-serif;
  border-radius: 10px;
  transition: all 0.3s ease;
  margin: 0.2rem;
}

.select-toggle-button:hover {
  background: var(--accent-color);
  color: #000;
  text-decoration: none;
}


.start-survey-btn {
  margin: 1.5rem auto 0;
  padding: 12px 32px;
  font-size: 1.25rem;
  border: 2px solid var(--accent-color);
  background-color: transparent;
  color: var(--text-color);
  min-width: 220px;
  border-radius: 8px;
  box-shadow: none;
  transition: background-color 0.3s, color 0.3s;
}

.start-survey-btn:hover:not(:disabled) {
  background-color: var(--accent-color);
  color: #000;
}

.start-survey-btn:active:not(:disabled) {
  filter: brightness(0.9);
  transform: scale(0.98);
}

.start-survey-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.5s;
}

 

.villain-quote {
  font-family: 'Fredoka One', sans-serif;
  font-size: 1.2rem;
  color: var(--accent-text);
  border: 2px solid var(--accent-text);
  padding: 1rem 1.5rem;
  border-radius: 10px;
  max-width: 500px;
  text-align: center;
  line-height: 1.5;
}

.villain-image {
  max-width: 180px;
  height: auto;
}

.villain-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  gap: 1rem;
  width: 100%;
}

.no-print {
  display: block;
}

@media print {
  .no-print {
    display: none !important;
  }
}
/* Hide all extra UI elements */
.nav-buttons,
#villain-image,
#mascot-left,
.footer,
.extra-elements,
.villain-quote {
  display: none !important;
}

/* Base layout */
.landing-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  text-align: center;
  gap: 1.5rem;
  color: var(--text-color);
}

/* Container for landing page actions */
.landing-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.landing-buttons .themed-button {
  width: 260px;
  text-align: center;
  display: inline-block;
}

/* Talk Kink title */
.themed-title {
  font-family: 'Fredoka One', sans-serif;
  font-size: 4rem;
  font-weight: bold;
  color: var(--theme-accent);
  margin: 0;
}

/* Start Survey Button */
.themed-start-btn {
  font-family: 'Fredoka One', sans-serif;
  font-size: 1.5rem;
  padding: 0.9rem 2.2rem;
  background-color: transparent;
  border: 3px solid var(--accent-text);
  color: var(--accent-text);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: none;
}

.themed-start-btn:hover {
  background-color: var(--accent-text);
  color: #000;
}

/* Theme Selector */
.theme-selector {
  font-family: 'Fredoka One', cursive;
  margin-top: 0.75rem;
  font-size: 1rem;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid var(--accent-color);
  background-color: var(--button-bg);
  color: var(--text-color);
  box-shadow: none;
  cursor: pointer;
}

#themeSelector,
select,
input[type="file"] {
  background-color: var(--button-bg);
  border: 2px solid var(--accent-color);
  color: var(--text-color) !important;
  padding: 10px;
  border-radius: 8px;
  font-family: 'Fredoka One', cursive;
}
.compatibility-link {
  margin-top: 1.5rem;
  padding: 0.8rem 2rem;
  font-size: 1.3rem;
}



#categorySurveyPanel {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  background-color: #000000;
  color: var(--text-color);
  border-right: 2px solid var(--accent-color);
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-color) transparent;
  z-index: 10;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
#categorySurveyPanel:hover {
  box-shadow: none;
}
#categorySurveyPanel::-webkit-scrollbar {
  width: 10px;
}
#categorySurveyPanel::-webkit-scrollbar-thumb {
  background-color: var(--accent-color);
  border-radius: 10px;
}
#categorySurveyPanel::-webkit-scrollbar-track {
  background: transparent;
}
#categorySurveyPanel h2 {
  font-size: 1rem;
  color: var(--accent-color);
  margin: 0;
  padding: 1rem 1rem 0.5rem 1rem;
  line-height: 1.2rem;
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: #000000;
}
#categorySurveyPanel .category-buttons {
  position: sticky;
  top: 2.5rem;
  z-index: 10;
  background-color: #000000;
  display: flex;
  padding: 0.5rem 1rem;
}

.top-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 10px;
}
#categorySurveyPanel .category-buttons .themed-button {
  height: 32px;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  font-size: 1rem;
  margin: 0;
  border: 1px solid var(--accent-color);
  box-shadow: none;
}
#categorySurveyPanel .category-list {
  flex: 1 1 auto;
  padding: 0 0 3rem 1rem;
}
#categorySurveyPanel .category-list label {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0.5rem 1.25rem 0.5rem 0.5rem;
  margin: 0.25rem 0 0.25rem 0;
  border: 1px solid var(--accent-color);
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Fredoka One', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.1rem;
  color: var(--text-color);
  background-color: transparent;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: none;
}
#categorySurveyPanel .category-list label span {
  flex: 1;
  text-align: left;
}
#categorySurveyPanel .category-list input[type="checkbox"] {
  margin-right: 0.75rem;
  flex-shrink: 0;
  transform: scale(1.2);
  accent-color: var(--accent-color);
}
#categorySurveyPanel .category-list label:hover,
#categorySurveyPanel .category-list input[type="checkbox"]:focus + span {
  background-color: var(--hover-bg);
}
#categorySurveyPanel .category-list input[type="checkbox"]:checked + span {
  color: var(--accent-color);
}

/* Remove glow and standardize borders for controls */
input,
select,
button {
  box-shadow: none;
}

input {
  border: 2px solid var(--accent-color);
  background-color: transparent;
  color: var(--text-color);
}

select {
  background-color: #000000 !important;
  color: var(--accent-color) !important;
  border: 1px solid var(--accent-color);
}

select option {
  background-color: #000000 !important;
  color: var(--accent-color) !important;
}

input:focus,
select:focus {
  outline: 1px solid var(--accent-color);
  box-shadow: none;
}

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

.rating-tooltip {
  display: none;
  background-color: #000000;
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

select:focus + .rating-tooltip,
select:hover + .rating-tooltip {
  display: block;
}

.warning {
  color: var(--accent-color);
  margin-top: 0.5rem;
  min-height: 1rem;
}

.category-button {
  border: 1px solid var(--accent-color);
  box-shadow: none;
}

body,
button,
input,
select {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-weight: 600;
}

/* Progress banner and bar synced to theme */
#progressBanner {
  background-color: var(--bg-color);
  color: var(--text-color);
  border: 2px solid var(--accent-color);
  box-shadow: none;
}

#progressBanner .progress-bar {
  background-color: var(--bg-color);
}

#progressBanner .progress-fill {
  background-color: var(--accent-color);
}
.panel-toggle {
  display: none;
}
@media (max-width: 768px) {
  #categorySurveyPanel {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  #categorySurveyPanel.open {
    transform: translateX(0);
  }
  .panel-toggle {
    display: block;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1100;
    width: 40px;
    height: 40px;
    background: var(--button-bg);
    color: var(--button-text);
    border: 2px solid var(--accent-text);
    border-radius: 4px;
  }
}