/* ===================================
   MATERIAL ICON BASELINE
   =================================== */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
}

/* ===================================
   BASE STRUCTURE & RESET
   =================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  width: 100vw;
  height: 100vh;
  position: relative;
 background: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
  font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;

}
/* ===================================
  GREETING
   =================================== */
   .moogleintro {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
      }
 .greeting {
          font-size: 28px;
          font-weight: bold;
          background: linear-gradient(to right, #667eea, #d4418f);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;
          text-align: center;
          margin-bottom: 16px;
      }

      .ask-gemini-placeholder {
          color: #aaa;
          font-size: 18px;
          text-align: center;
      }
/* ================================
   ? View Area Styling (Native Fix)
   ================================ */

main {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: block;
  background: var(--bg-primary);
}

/* Each view fills available space */
.view {
  position: absolute;
  top: 0;                 /* height of top-nav */
  bottom: 88px;              /* height of bottom nav + gap */
  left: 0;
  right: 0;
  overflow-y: auto;
  padding: 1rem;
  box-sizing: border-box;
  background: var(--bg-primary);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  transition:opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

}

/* Active + Animated View */
.view.active {
  opacity: 1;
  pointer-events: auto;
}

.view.slide-in {
  transform: translateX(0%);
  opacity: 1;
}

.view.slide-out {
  transform: translateX(-30%);
  opacity: 0;
}

/*===================================
HOME PAGE
===================================*/


html, body {
  margin: 0;
  padding: 0;
  width: 100%; /* Ensure they also take full width */
  height: 100%; /* Ensure they also take full height */
  overflow: hidden; /* Prevent scrollbars if the content exactly fits */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Asap", sans-serif;
}

.starter p,
.starter span {
  font-family: "Ubuntu", sans-serif;
  display: inline-block;
}


.starter {
  background-image: url("https://images.pexels.com/photos/4861373/pexels-photo-4861373.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-size: cover; /* Or contain, depending on your preference */
  background-repeat: no-repeat;
  height: 100vh; /* Use viewport height to cover the entire screen */
}

.bg-color {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
}

nav.top-menu {
  background: none !important;
  width: 100%;
  height: 100vh;
  display: none;
}
div.top-menu{
  display: block !important;
    width: 100%;
    height: 100vh;
}

.top-menu h3 {
  background: rgba(0, 0, 0, 0.1);
  width: 95%;
  color: #fff;
  font-size: 1.2em;
  line-height: 1.5;
  padding: 2% 0 2% 5%;
  border: none;
  position: relative;
  z-index: 0;
}

ul.cities {
  width: 100%;
  height: 100%;
  margin: 0;
   list-style-type: none; /* This line removes the bullet points */
}

ul.cities li.city {
  height: 100px;
  margin: 0;
  /*box-shadow: inset 0 0 175px rgba(142, 68, 173, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);*/
}

ul.cities li.city div.city-name,
ul.cities li.city div.degree {
  width: 45%;
  height: 100%;
  padding-left: 5%;
  text-align: center;
  float: left;
}

ul.cities li.city div.city-name p {
  font-size: 1.5em;
  text-align: left;
  line-height: 3;
}

ul.cities li.city div.city-name span {
  font-size: 0.8em;
  text-align: left;
  margin-top: -12px;
}

ul.cities li.city div.degree p,
ul.cities li.city div.degree span {
  font-size: 2em;
  line-height: 3;
  fill: #fff;
  padding-left: 5%;
  display: inline;
}

#open-find,
#close-find {
  top: 30px;
  right: 30px;
  fill: #fff;
  cursor: pointer;
  position: absolute;
  z-index: 99;
}

#close-find {
  display: none;
}

div.information {
  width: 100%;
  height: 100vh;
  top: 60px;
  overflow: hidden;
  position: relative;
}

.starter h1 {
  font-size: 4em;
  text-align: center;
  color: #fff;
}

.starter h2 {
  font-size: 2.5em;
  text-align: center;
  color: #fff;
  margin-top: 12%;
}


span.today {
  margin-top: 20px;
}

div.days {
  width: 375px;
  height: 125px;
  margin-top: 20%;
  overflow: hidden;
  /* 	position: absolute; */
}

.sunday,
.mondey,
.tuesday,
.wednesday,
.thursday,
.friday,
.saturday {
  /* 	background: rgba(0, 0, 0, .2); */
  width: calc(100% / 4);
  height: 120px;
  padding: 2% 0;
  float: left;
}

.starter p,
.starter span {
  text-align: center;
  color: #fff;
  display: block;
}

div.days p {
  margin-bottom: 5%;
}

span.day {
  font-size: 0.8em;
  margin-top: 5%;
}

i.svg-ico {
  width: 35px;
  height: 35px;
  margin: 0 auto;
  padding: 2%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 3;
  fill: #fff;
}

ul.navigation {
  width: 30%;
  margin: 0 35%;
}

ul.navigation li {
  width: 20%;
  text-align: center;
  float: left;
  color: #fff;
}


.weather-controls {
  position: absolute; /* To position them relative to the weather container's parent */
  top: 0;
  right: 0;
  display: flex; /* To place them side-by-side */
}

.arrow-button {
  background: none;
  border: none;
  color: #fff; /* Adjust arrow color */
  font-size: 1.2em; /* Adjust arrow size */
  padding: 5px 10px;
  cursor: pointer;
  opacity: 0.7; /* Slightly transparent */
  transition: opacity 0.3s ease;
}

.arrow-button:hover {
  opacity: 1;
}

.arrow-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Adjust positioning if needed */
/* .left-arrow {
  margin-right: 5px;
} */

.weather-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: calc(2 * (150px + 10px)); /* Adjust width as needed */
  margin: 20px auto 0;
  position: relative;
}

.weather-slider > div {
  flex: 0 0 auto;
  width: 150px;
  margin-right: 10px;
  scroll-snap-align: start;
  box-sizing: border-box;
  text-align: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  color: #fff;
}

.sunday p {
  margin-bottom: 5px; /* Add some space between title and description */
}

.sunday .day {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  font-size: smaller;
  white-space: nowrap;
}


.weather-slider .day {
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.7);
}

.weather-slider > div:last-child {
  margin-right: 0;
}


/* Base Styles */
#view-home {
  padding: 20px;
 background: var(--bg-primary);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100vh;               /* Ensure full screen height */
  overflow:hidden;
}
#view-home .home-header {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
}

/* ===================================
   TOP NAVIGATION — MODERN FLOATING BAR
   =================================== */
/* Hide the FAB container and buttons by default */
.fab-container, #subject-trigger, #history-button {
  display: block;
}

/* Show them only when #view-ai is active */
#view-ai.active .fab-container,
#view-ai.active #subject-trigger,
#view-ai.active #history-button {
  display: block;
}

/* ===================================
   ?? UPDATED: PROGRESS BAR - NATIVE STYLE
   =================================== */
.progress-container {
  background: var(--card-bg);
  padding: 0.45rem 1rem ;
  border-radius: 1rem;
  margin: 2px auto 1rem ;
  max-width: 480px;
  box-shadow: var(--shadow);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.progress {
  width: 50%; /* will be updated by JS */
  height: 100%;
  background: linear-gradient(to left, var(--katex-gradient-end), var(--katex-gradient-start));
  border-radius: 4px;
  transition: width 0.3s var(--ease-in-out);

}

/* ===================================
  UPDATED: CHAT MESSAGES + CONTAINER
   =================================== */
/* Whole AI view scrollable between navs */
#view-ai {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding-bottom: 0; /* FAB space already covered */
}

/* Main container with scrolling behavior */
/* Main container with fixed height (300px) */
.chat-container {
  position: relative;
  top:0px;
  overflow-y: auto; /* Make the entire container scrollable */
  height:400px;
  max-height:500px;
  padding-bottom: 20px; /* Space for input area at the bottom */
}

.chat-box {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 220px;
  max-height: 240px;
  overflow-y: auto;
  padding: 1rem 1rem  0;
  /*background: var(--card-bg);*/
  border-radius: 1rem;
  margin-inline: auto;
  width: 100%;
  max-width: 480px;
  scroll-behavior: smooth;
  margin-top:0px;
}
.bot-message {
 /* background: var(--bubble-bot);*/
  color: var(--text-primary);
  padding: 10px;
  border-radius: 12px;
 /* max-width: 100%;*/
  align-self: flex-start;
  font-size: 14px;
 border: 1px solid var(--border-light);
}

.user-message {
   background: var(--bubble-user);
  color: var(--bubble-user-text);
  padding: 10px;
  border-radius: 12px;
  max-width: 75%;
  align-self: flex-end;
  font-size: 14px;
  word-wrap: break-word;

}

.message.bot-message {
  position: relative;
  padding-bottom: 28px;
}

.bot-message p {
  margin: 0 0 0.75rem;
  white-space: pre-wrap;
  line-height: 1.5;
  color: var(--text-primary);
}

.bot-message ul,
.bot-message ol {
  margin: 0.5rem 0 0.75rem 1.25rem;
  padding-left: 1rem;
}

.bot-message li {
  margin-bottom: 0.35rem;
  line-height: 1.5;
}
/*
.message .katex {
  font-size: 1.05rem;
	font-weight: bold;
	background: linear-gradient(to right, #667eea, #d4418f);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
*/
.bot-message code {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: 'Fira Code', monospace;
}

.message strong,
.message b {
  font-weight: 600;
}

.bot-message em,
.bot-message i {
  font-style: italic;
}
/* ===================================
    UPDATED: INPUT BAR & TEXTAREA
    =================================== */

/* Ensure the input container is fixed at the bottom but stays above the bottom navigation */
/* ===================================
    UPDATED: INPUT BAR & TEXTAREA (REVISED FOR BOTTOM ICONS)
    =================================== */

.fixed-input-container {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2px);
  max-width: 480px;
  background: var(--bg-secondary);
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center; /* Vertically align input wrapper and send button */
  padding: 0.5rem 1rem;
  gap: 0.5rem; /* Space between input wrapper and send button */
  z-index: 1001; /* Above keyboard */
}

/* Input wrapper for textarea and bottom actions */
.input-wrapper {
  flex-grow: 1; /* Allow textarea and bottom actions to take width */
  display: flex;
  flex-direction: column; /* Stack textarea and bottom actions vertically */
  background: var(--bg-secondary);
  border-radius: 1.25rem;
  padding: 0.5rem 0.75rem;
 /* box-shadow: var(--shadow);*/
}

/* Resizable Input Textarea */
.input-wrapper textarea {
  flex-grow: 1; /* Allow textarea to grow vertically */
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.95rem;
  padding: 0.25rem 0.25rem;
  resize: none;
  outline: none;
  min-height: 40px; /* Adjust initial height to accommodate bottom icons */
  max-height: 100px;
  line-height: 1.4;
  font-family: inherit;
  overflow-y: auto;
  margin-bottom: 0.25rem; /* Space between textarea and bottom icons */
}

/* Container for the mic and chart history buttons at the bottom */
.input-actions-bottom {
  display: flex;
  justify-content: space-evenly; /* Distribute space equally */
  align-items: center;
  gap: 0.5rem; /* Space between the icons if needed */
  padding-top: 0.25rem; /* Small space above the icons */
}

/* Generic styling for the icon buttons */
.icon-button {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 30px; /* Adjust size */
  height: 30px; /* Adjust size */
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: color var(--motion-fast) var(--ease-in-out);
}

.icon-button:hover {
  color: var(--text-primary);
}


/* Styling for the Material Icons */
.material-icons {
  font-size: 1rem; /* Adjust icon size */
  line-height: 1;
}

/* Optional: Scrollbar Styling (remains the same) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Optional: Text Selection Color (remains the same) */
::selection {
  background: var(--accent);
  color: #fff;
}

/* Handle small screens (remains the same) */
@media (max-width: 600px) {
  .fixed-input-container {
    bottom: 0px;
    padding: 0 10px;
  }
}


/* ? Delete Button (within bot bubble) */
.message.bot-message {
  padding-bottom: 2rem;
}

.moogledelete {
  position: absolute;
  bottom: 6px;
  right: 12px;
  font-size: 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  color: var(--text-secondary);
}

.moogledelete:hover {
  opacity: 1;
  color: var(--text-primary);
}

.moogleintro {
  transition: opacity 0.4s ease, visibility 0.4s ease;
  opacity: 1;
  visibility: visible;
}

.moogleintro.hidden {
  opacity: 0;
  visibility: hidden;
}


/* === KATEX BASE STYLING === */
.katex {
  font-size: var(--katex-font-size);
  line-height: var(--katex-line-height);
  font-weight: 600;
  color: var(--katex-fallback-color);

  word-break: break-word;
  overflow-wrap: break-word;
  vertical-align: middle;

  padding-block: 6px;
  transition: font-size 0.3s ease, color 0.3s ease;
}

/* === KATEX DISPLAY MODE (BLOCK) === */
.katex-display {
  font-size: calc(var(--katex-font-size) + 0.125rem); /* ~1.125rem */
  line-height: 1.65;
  font-weight: 600;

  color: var(--katex-fallback-color);

  padding-block: 20px;
  margin-block: 24px;
  text-align: center;

  overflow-x: auto;
  white-space: normal;

  transition: font-size 0.3s ease, color 0.3s ease;
}

/* === FRACTION & BINOMIAL FIXES === */
.katex .mfrac {
  margin: 0 5px ;
  display: inline-flex;
  align-items: center;
  font-size: 1em; /* Ensures fraction content is proportionally larger */
}

/* Fix fraction line visibility */
.katex .mfrac .frac-line {
  border-color: rgba(255, 255, 255, 0.4);
  border-width: 1px;
  border-style: solid;
}

.katex .vlist {
  overflow: visible !important; /* Prevent internal clipping */
}

/* === BINOMIAL ADJUSTMENTS === */
.katex .binom {
  vertical-align: middle !important; /* Ensure binomials are centered */
}

/* === RESPONSIVE STYLES FOR MOBILE === */
@media (max-width: 600px) {
  #chatBody .katex, #chatBody .katex-display {
    font-size: calc(var(--katex-font-size) ) !important; /* Increase font size on small screens */
  }

  #chatBody .katex .mfrac {
    font-size: 1.1em; /* Larger fractions on mobile */
  }
}

.solver-result-katex .katex{
	margin: 0 !important;
	 font-size: 1.1em; /* Larger fractions on mobile */
	padding:4px 0 !important;
	text-align: left !important;
}


/* === THINKING BUBBLE & TYPING DOTS === */
/* =================================== */

.thinking-bubble {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: var(--text-primary);
  margin: 10px 0;
}

.thinking-bubble .dots {
  display: inline-flex;
  gap: 5px;
  margin-left: 10px;
	background: linear-gradient(to right, #667eea, #d4418f);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.thinking-bubble .dots span {
  width: 8px;
  height: 8px;
	background: linear-gradient(to right, #667eea, #d4418f);
  border-radius: 50%;
  animation: bounce 2.5s infinite ease-in-out;
}

.thinking-bubble .dots span:nth-child(1) {
  animation-delay: 0s;
}

.thinking-bubble .dots span:nth-child(2) {
  animation-delay: 0.6s;
}

.thinking-bubble .dots span:nth-child(3) {
  animation-delay: 1.2s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
/* ===================================
   ?? AUTOCOMPLETE / SUGGESTION BOX
   =================================== */

.suggestion-box {
  position: absolute;
  bottom: 120px;
  left: 0;
  width: 100%;
  background: var(--bg-secondary);
  border-radius: 1rem;
  box-shadow: var(--shadow);
  padding: 0.5rem;
  max-width: 480px;
  margin-inline: auto;
  z-index: 12;
}

.suggestion-item {
  padding: 0.6rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-in-out);
}

.suggestion-item:hover {
  background: var(--bg-tertiary);
}



/* ===================================
   ? FAB MAIN BUTTON
=================================== */
.fab-container {
  position: fixed;
  bottom: 90px;
  left: 24px;
  z-index: 25;
 /*  display: none; Hide by default */
  transition: opacity 0.3s ease-in-out; /* Optional fade-in effect */
}
/* Show FAB when it's toggled by JS */
.fab-container.active {
  display: block;
}

.fab-main {
  background: linear-gradient(to left, var(--katex-gradient-end), var(--katex-gradient-start));
  border: none;
  color: white;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-in-out);
}

.fab-main:hover {
  background: var(--highlight);
}

.fab-overlay {
  position: fixed;
  inset: 0; /* expands to full screen */
  background: rgba(0, 0, 0, 0.35); /* subtle dark overlay */
  backdrop-filter: blur(4px); /* soft blur */
  z-index: 24;
  display: none;
  align-items: flex-end;  /* push to bottom */
  justify-content: flex-start; /* align left */
  padding: 0 0 120px 24px; /* ? offset sheet from bottom */
  animation: fadeIn 0.2s ease-out;
  bottom: 66px; /* <- Pushes the whole sheet above FAB */
}

.fab-overlay.active {
  display: flex;
}

/* Floating sheet container */
.fab-sheet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  animation: fadeIn 0.2s ease;
}

/* Each sub-button — minimal, pill-style */
.fab-sub {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: none;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  box-shadow: var(--shadow);
  cursor: pointer;
  transform: translateY(20px);
  opacity: 0;
  animation: slideInUp 0.25s forwards;
}

.fab-sub:hover {
  background: var(--bg-tertiary);
}

/* Icons inside FAB subs */
.fab-sub .material-symbols-outlined {
  font-size: 1.1rem;
}

/* ========================
   ? Animations
======================== */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/** MODAL ENGINE STYLE=**/

/* === VIEW HISTORY BUTTON (Floating) === */
/* =================================== */

#viewHistoryBtn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  background-color: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--btn-color);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease;
}

#viewHistoryBtn:hover {
  background-color: #2e2e2e;
}
/* === HISTORY MODAL === */
/* =================================== */

/*  Chat History Modal Styles */
#chatHistoryModal {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#chatHistoryModal .modal-content {
  background: var(--card-bg, #1e1e1e);
  padding: 20px;
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  color: var(--text-primary);
}

.history-message {
   background: var(--card-bg);
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--text-primary);
}

.history-message.user {
background: var(--bubble-user, #dbeafe);   /* light blue fallback */
  color: #111;                                /* force dark readable text for light bubble */

}

.history-message.bot {
  background: var(--bubble-bot, #ffffff);
  color: var(--text-primary);
}

/*  Force visible math & text in light mode inside modal */
.history-message.bot * {
  color: var(--text-primary) !important;
}

.steps-container {
	margin-top: 20px;
	max-height: 400px;
	overflow-y: auto;
	display: none;
	transition: height 0.5s ease;
}

.steps-container div {
	padding: 10px;
	border-bottom: 1px solid #333;
	text-align: left;
}

.result-container {
	margin-top: 20px;
	font-size: 24px;
	font-weight: bold;
	color: #76ff76;
	padding: 10px;
}
ol, li, ul {
	margin: 10px;
}
.mhint{
	font-weight: normal;

}
.step-math {
	font-size: 20px;
	color: #ffa726;
}

.step-explanation {
	margin-bottom: 15px;
	color: #bbbbbb;
}

.practice-container {
	margin-top: 20px;
}

.practice-question {
	background-color: #333;
	padding: 12px;
	border-radius: 8px;
	margin-bottom: 10px;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.bodmas-toggle {
	margin: 20px 0;
	cursor: pointer;
	color: #ffa726;
	text-decoration: underline;
	transition: color 0.3s ease;
}

.bodmas-toggle:hover {
	color: #ffcc33;
}
/* Correct button container class from your JS */
.chat-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

/*  Fix button color per theme */
.chat-actions button {
  background-color: var(--btn-color);
  color: white !important; /*  Force white text */
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s ease, color 0.2s ease;
}

.chat-actions button:hover {
 background-color: var(--btn-hover);
  color: #fff !important; /*  Ensure hover also stays white */
}


.modal-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modal-button.confirm {
  background: #2563eb;
  color: white;
}

.modal-button.cancel {
  background: #333;
  color: white;
}



/* === MODAL STYLES === */
/* =================================== */
.modal,
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Can stay as-is */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background: var(--card-bg);     /*  Was #2b2b3d */
  color: var(--text-primary);     /* Was #e0e0e0 */
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.modal-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center; /* Center horizontally */
  gap: 12px;
}

.modal-button {
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}
.modal-button.confirm {
  background-color: var(--confirm-bg, #ffdd57);  /* Fallback: yellow */
  color: var(--confirm-text, #1e1e2f);
}

.modal-button.cancel {
  background-color: var(--bg-tertiary);          /* Uses theme dark/light */
  color: var(--text-primary);
}

.modal-button.confirm:hover {
  background-color: var(--confirm-bg-hover, #ffcc33);  /* Slightly deeper yellow */
}

.modal-button.cancel:hover {
  background-color: var(--bg-secondary);         /* Subtle theme shift */
}

/* ===================================
   ? SNACKBAR — FLOATING TOAST
=================================== */
.snackbar {
  visibility: hidden;
  min-width: 200px;
  max-width: 80vw;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  text-align: center;
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  font-size: 0.85rem;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity 0.3s ease, bottom 0.3s ease;
}

/* ? Triggered */
.snackbar.show {
  visibility: visible;
  opacity: 1;
  bottom: 96px; /* Float slightly higher when shown */
 background-color: var(--bg-primary);  /* Applied from theme */
  color: var(--text-primary);           /* Applied from theme */
}

/* ================================
   ?? Native Grid Layout Container
   ================================ */
#grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 1rem;
  justify-content: center;
  max-height: 60vh;
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* ================================
   ? Native-style Chip Button
   ================================ */
.grid-button {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 0.5rem 0.9rem;
  border: none;
  border-radius: 24px;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow);
}

.grid-button:hover {
  background-color: var(--highlight);
  color: #fff;
}
#grid-container::-webkit-scrollbar {
  width: 6px;
}
#grid-container::-webkit-scrollbar-thumb {
  background: var(--highlight);
  border-radius: 10px;
}


/* ===================================
   ? BOTTOM NAVIGATION (NATIVE STYLE)
   =================================== */

.tab-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  height: 68px;
  width: calc(100% - 32px);
  max-width: 480px;
  background: var(--bg-secondary);
  border-radius: 2rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  /*z-index: auto;*/
  backdrop-filter: blur(8px);
}

.tab-button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0.6rem 0;
  background: transparent;
  border: none;
  border-radius: 1rem;
  color: var(--text-secondary);
  font-size: 0.75rem;
  transition: background var(--motion-medium) var(--ease-in-out), color var(--motion-medium) var(--ease-in-out);
  cursor: pointer;
}

.tab-button .material-symbols-outlined {
  font-size: 22px;
  transition: font-variation-settings var(--motion-fast) var(--ease-in-out);
}

.tab-button.active {
  color: var(--primary);
}

.tab-button.active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
}

.tab-button:active {
  background: rgba(255, 255, 255, 0.05);
  transform: scale(0.96);
}


/* ================================
   ? GRAPH VIEW STYLING
   ================================ */

/* ===================================
   ?? GRAPH VIEW — CONTAINER STYLES
   =================================== */
#view-graph {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 1.2rem;
  height: 100%;
  overflow-y: auto;
  background: var(--bg-primary);
}

/* === Header */
.graph-header {
  text-align: center;
  padding-top: 0.5rem;
}

.graph-header h2 {
  font-size: 1.3rem;
  color: var(--text-primary);
}

.graph-header p {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ===================================
   ?? INPUT BAR
   =================================== */
.graph-input-bar {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--bg-secondary);
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: var(--shadow);
}

.graph-input-bar input,
.graph-input-bar select {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-size: 0.9rem;
  width: 100%;
}

.graph-input-bar button {
  background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end));
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease;
}

.graph-input-bar button:hover {
  background: var(--highlight);
}

/* ===================================
   ?? GRAPH CANVAS AREA
   =================================== */
.graph-canvas-container {
  background: var(--card-bg);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: var(--shadow);
  overflow-x: auto;
}

#graph-container {
  width: 100%;
  height: 300px;
}
/*GRAPH PLOTTER*/
#result-section .katex-display, #katex-output .katex-display {
	font-size: 16px !important;
	padding: 3px 0 !important;
	margin: 0 !important;

}
/* ===================================
   ?? ERROR SECTION
   =================================== */
.error-section {
  color: var(--alert);
  font-size: 0.85rem;
  padding: 0.4rem 0.8rem;
  background: rgba(255, 0, 0, 0.1);
  border-radius: 8px;
  display: none;
}

/* ===================================
   ? RESULT SECTION
   =================================== */
.result-section {
  background: var(--bg-secondary);
  padding: 0.8rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--text-primary);
  min-height: 40px;
  text-align: center;
	display: none !important;
}


/* ===================================
   ?? SOLVER VIEW CONTAINER
   =================================== */
.solver-header {
  padding: 1.5rem 1rem 0.5rem;
  text-align: center;
}

.solver-header h2 {
  font-size: 1.5rem;
  color: var(--text-primary);
}

.solver-header p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

.solver-section {
  margin-top: 1rem;
  padding: 0 1rem;
}

.section-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: var(--text-primary);
}

.solver-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.solver-card {
  background: var(--card-bg);
  padding: 1rem;
  border-radius: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.solver-card:hover {
  background: var(--primary);
  color: white;
  transform: scale(1.05);
}

.solver-card span {
  font-size: 2rem;
  margin-bottom: 0.4rem;
}

.card-label {
  font-size: 0.9rem;
  font-weight: 500;
}


/* ===================================
   SOLVER MODAL STYLING
   =================================== */
  #view-ai,
  #view-home,
  #view-solver,
  #view-graph,
  #view-puzzle {
      z-index: auto !important;
  }

.solver-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1002; /* Explicitly set higher */
    justify-content: center;
    align-items: center;
    overflow: auto;
}

.solver-modal.active {
  display: flex;
}

/* Apply blur effect to specific containers */
.app-blur-active #app {
  filter: blur(5px);
  pointer-events: none; /* Prevent interaction with blurred content */
}

.app-blur-active .top-nav,
.app-blur-active .tab-bar {
  filter: blur(5px);
  pointer-events: none; /* Prevent interaction with blurred content */
}

.solver-modal-content {
  background: var(--card-bg);
  padding: 20px;
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  box-shadow: var(--shadow);
  color: var(--text-primary);
  z-index: 101; /* Keeps modal content on top of overlay */
}

.solver-modal-content input {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  background: var(--bg-primary);

  color: var(--text-primary);
  border: none;
  margin-bottom: 12px;
}

.solver-modal-content button {
  padding: 10px 16px;
    background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end));
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.modal-close {
  margin-top: 16px;
  background: var(--btn-hover);
}

/* ===================================
   SOLVER PANEL (Slide-in style)
   =================================== */
  #view-solver {
      position: relative; /* Ensures the container aligns well within the parent */
      height: 100vh; /* Ensure it doesn't grow beyond the viewport height */

  }
/* ✅ Solver Panel (Base styles - these should already be present) */
.solver-panel {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0px;
    background: var(--bg-primary); /* Use your primary background color variable */
    color: var(--text-primary); /* Use your primary text color variable */
    padding: 20px;
    border-radius: 12px;
    box-shadow: var(--shadow); /* Use your shadow variable */
    z-index: 1001; /* Ensure it's on top */
    display: none; /* Hidden by default */
    flex-direction: column;
    gap: 1rem;
    animation: slideUpFadeIn 300ms ease;
    overflow-y: auto;
    height: 100vh; /* Cover the full viewport height */
}

/* ✅ Active Solver Panel (Styles when the .active class is applied) */
.solver-panel.active {
    display: flex; /* Make it visible and use flex layout */
}

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

.solver-input-area {
  display: flex;
  flex-direction: column;  /* Stack vertically by default */
  gap: 10px;
  background-color: var(--bg-primary);
  padding: 10px;
  /*border-radius: var(--radius);*/
  align-items: stretch;  /* Ensure the elements stretch across the container */
  margin-bottom: 20px;
}

/* Style for individual inputs */
.solver-input-area input {
  padding: 10px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #444);
  background: var(--bg-primary);
  color: var(--text-primary);
  width: 100%;  /* Ensure inputs take up the full width of the container */
}

/* Style for the button */
.solver-input-area button {
  padding: 10px 16px;
  background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end));
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;  /* Make the button take full width */
  font-size: 16px;
  transition: background-color 0.3s ease;
}

/* Button hover effect */
.solver-input-area button:hover {
  background-color: var(--highlight);
}

/* Specific style for input fields when they are focused */
.solver-input-area input:focus {
  outline: none;
  border-color: var(--primary);
}

/* Media Query for Larger Screens */
@media (min-width: 600px) {
  .solver-input-area {
    flex-direction: row;  /* Switch to row layout on larger screens */
    align-items: center;  /* Align the items in the center */
  }

  .solver-input-area input,
  .solver-input-area button {
    width: 30%;  /* Adjust width for input fields and buttons on larger screens */
  }

  .solver-input-area button {
    margin-left: 10px;  /* Add some space between the button and inputs */
    width: auto;  /* Allow the button to shrink to fit its content */
  }
}

/* Specific style for individual inputs (e.g., factoring input) */
#factoring-input {
  width: 80%;
  padding: 10px;
  font-size: 16px;
  border: 2px solid var(--bg-tertiary);
  border-radius: var(--radius);
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  transition: border-color 0.3s ease;
}

#factoring-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* Button class for solving the problem */
.solve-button {
  padding: 10px 20px;
  margin-left: 10px;
  font-size: 14px;
    background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end));
  color: var(--text-primary);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.solve-button:hover {
  background-color: var(--highlight);
}


.solver-preview-katex,
.solver-result-katex {
  padding: 8px;
/*  background: var(--bg-tertiary);*/
  border-radius: 8px;
  min-height: 40px;
}

/* === Animation for native feel === */
@keyframes slideUpFadeIn {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ================================
   ? STEP-BY-STEP SOLVER OUTPUT
   ================================ */

/* Optional: Emphasize headings like Original:, Simplify: */

.katex .textnormal {
  font-weight: 600;
  /*color: var(--accent); /* Slight highlight */
}


/* Base Layout for Native App Module */
#steps-output, #final-result-output {
padding:10px;
}

#systemofequations {
    padding: var(--spacing-lg);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

/* === Fix for Method Buttons in Simultaneous Solver === */
/* === Native Button Group for Solver Methods === */
.method-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

/* Uniform button style */
.method-buttons .btn {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end));
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.method-buttons .btn:hover {
  background: var(--highlight); /* Use your accent */
  transform: scale(0.98);
}

/* === Native Solver Panel Header Fix === */
.solver-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  padding: 4px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-color, #444);
}

.solver-panel-header h3 {
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  gap: 8px;
  margin: 0;
}

.solver-panel-header .material-symbols-outlined {
  font-size: 20px;
  color: var(--primary);
}

.solver-panel-header button {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s ease;
}

.solver-panel-header button:hover {
  color: var(--text-primary);
}

/* Native Card Container */



 /* Styling for the steps and result containers */
  .steps-container, .result-container {
    margin-top: 20px;
    padding: 15px;
    background: var(--card-bg);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 16px;
  }

.step-block {

  color: var(--text-primary, #fff);
  font-size: 16px;
}


#factoring-steps-output {
  margin-top: 10px;
}

#factoring-final-result-output {
  margin-top: 20px;
  font-size: 1.2em;
  font-weight: bold;
}

/* Ensure that the matrix panels are positioned relatively */
.matrixpanel{
  background-color: var(--card-bg);
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative; /* Make this the reference for absolute positioning */
  overflow: hidden; /* Prevent content overflow */
  z-index: 1004; /* Ensure it's below the overlaying .longversion */
}

/* .longversion overlay - initially hidden */
.longversion {
  z-index: 10000; /* Ensure it appears on top */
  position: absolute; /* Overlay the panel */
  top: 0; /* Position at the top of the container */
  left: 0; /* Align to the left */
  width: 100%; /* Fill the container width */
  height: 100%; /* Fill the container height */
  padding: 20px;
  background-color: var(--bg-primary); /* Solid background color from the theme */
  color: white; /* Text color for better readability on dark background */
  overflow-y: auto; /* Scrollable content */
  display: none; /* Hidden by default */
  opacity: 1; /* Ensure it's fully visible */
  transition: opacity 0.3s ease; /* Smooth transition for fading in and out */
}

/* Show .longversion when active */
 .longversion.show {
  display: block; /* Show overlay */
  opacity: 1; /* Fully visible */
}


/* Steps and result inside the overlay */
.longversion .steps,
.longversion .result-container {
  font-size: 16px;
  margin: 10px 0;
  line-height: 1.5;
  color: var(--text-primary);
}

/* Button container inside the panel */
.button-container{
  text-align: center;
  margin-bottom: 20px;
}

/* Button styles */
.native-btn, .longversion .close-overlay-btn {
    background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end));
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.native-btn:hover, .longversion .close-overlay-btn:hover {
  background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end));
}

.native-btn:active, .longversion .close-overlay-btn:active {
   background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end));
}
#start-game-btn{
	 background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end));
}

/*
==========================================================
Matrix input fields styling - Refactored
=======================================================
*/
.input-flex {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px; /* Keep specific layout spacing */
}

.input-flex input{
  background-color: var(--bg-primary); /* Already uses theme variable */
  color: var(--text-primary); /* Use theme variable for text color */
  border: 1px solid var(--border-color-default); /* Use theme variable for border color */
  padding: 10px; /* Keep specific padding */
  width: 30%; /* Keep layout width */
  font-size: 16px; /* Keep specific font size */
  border-radius: 4px; /* Keep specific border radius */
  text-align: center; /* Keep text alignment */
   /* Ensure transition applies to this specific input style too */
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.input-flex input:focus {
  outline: none; /* Keep as is */
  border-color: var(--border-color-focus); /* Use theme variable for focus border color */
   /* Add themed box-shadow for focus */
  box-shadow: 0 0 0 0.2rem rgba(var(--primary), 0.25);
}


/* Styling for the close button inside the .longversion overlay */
.longversion .close-overlay-btn {
  position: absolute;
  top: 20px;
  right: 20px; /* Position it in the top-right corner */
}

.longversion .steps .katex{
font-size:17px !important;
}


/* === PUZZLE MODULE STYLES (THEME-COMPATIBLE & NON-LEAKING) === */
/* Puzzle Panel */
#puzzle {
  width: 100%;
  background-color: #1f1f1f;
  padding: 20px;
  border-radius: 10px;
  color: white;
}

/* Puzzle Controls */
#puzzle .solver-input-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}

.puzzle-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  align-items: center;
}

.puzzle-send-button {
background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end));
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.puzzle-send-button:hover {
  background-color: #f43f5e;
}

/* Puzzle Select Fields */
.puzzle-select-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.puzzle-category-select,
.puzzle-level-select {
  padding: 8px;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid #ddd;
  width: auto;
  min-width: 140px;
}

/* Responsive Design */
@media (max-width: 768px) {
  #puzzle {
    padding: 10px;
  }

  .puzzle-select-group {
    flex-wrap: wrap;
    justify-content: center;
  }

  select {
    width: 100%;
    margin-bottom: 5px;
  }

  .puzzle-send-button {
    width: 100%;
    padding: 12px 20px;
  }
}

/* XP Progress Bar */
#puzzle-hud {
  width: 100%;
  padding-top: 20px;
}

#xpProgressWrap {
  background: #2e2e2e;
  border-radius: 8px;
  height: 24px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

#xpProgressFill {
  height: 100%;
  width: 0%;
  background: #3b82f6;
  transition: width 0.4s ease;
}

#xpProgressLabel {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 12px;
  line-height: 24px;
}

/* Disabled Button State */
.puzzle-send-button:disabled {
  background-color: #a0aec0;
  cursor: not-allowed;
}

.puzzle-category-select:focus,
.puzzle-level-select:focus {
  outline: none;
  border-color: #3b82f6;
}

/* Puzzle Question Display */
.puzzle-chat-body {
  height: 350px;
  overflow-y: auto;
  margin-top: 20px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Puzzle Feedback and Input */
.puzzle-question {
  font-size: 16px;
  margin-bottom: 10px;
}

.puzzle-input {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.puzzle-input input {
  width: 70%;
  padding: 8px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #e2e8f0;
}

.puzzle-input button {
  background-color: #3b82f6;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
}

.puzzle-input button:disabled {
  background-color: #a0aec0;
  cursor: not-allowed;
}

/* Feedback Section */
.puzzle-feedback {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.action-button {
  background-color: #3b82f6;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
}

.action-button:disabled {
  background-color: #a0aec0;
  cursor: not-allowed;
}

/* HUD for XP */
.puzzle-hud {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 500px;
  background: #2e2e2e;
  border-radius: 8px;
  padding: 10px;
  z-index: 999;
}

.xp-progress-wrap {
  position: relative;
  height: 24px;
  background: #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.xp-progress-fill {
  height: 100%;
  width: 0;
  background: #3b82f6;
}

.xp-progress-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 12px;
  line-height: 24px;
}
/* Transition effects for smooth dragging feedback */
.puzzle-dragging {
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}


/* =============================
   QUIZ PANEL STYLES
============================= */

/* Quiz Title */
.quiz-title {
  background-color: var(--accent);
  color: var(--bg-primary);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* Timer Section */
#timer {
  font-size: 18px;
  color: var(--text-primary);
  margin-bottom: 10px;
}

/* Progress Bar Section */
#progress-container {
  border-radius: 10px;
  overflow: hidden;
  margin: 10px 0;
}

#prog-bar {
  background-color: var(--primary);
  height: 20px;
  text-align: center;
  color: white;
  line-height: 20px;
  width: 0;
  transition: width 0.3s ease;
}

/* Difficulty Selector Section */
#difficulty-selector {
  padding: 20px;
  background: var(--bg-secondary);
  text-align: center;
  border-bottom: 1px solid var(--accent);
}

.difficulty-button {
  background-color: var(--btn-color);
  color: var(--bg-primary);
  padding: 10px 15px;
  margin: 5px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.difficulty-button:hover {
  background-color: var(--btn-hover);
}

/* Quiz Content Section */
#quiz-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Question Styling */
.quiz-question {
  font-size: 16px;
  margin-bottom: 15px;
  font-weight: bold;
  text-align: left;
  color: var(--text-primary);
}

/* Modern Radio Button Styling */
.option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background-color: var(--bg-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  margin-right: 10px;
}

.option input[type="radio"]:checked {
  background-color: var(--accent);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(222, 122, 31, 0.2);
}

.option input[type="radio"]:hover {
  background-color: var(--highlight);
  border-color: var(--highlight);
}

.option {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.option input[type="radio"] {
  margin-right: 10px;
  cursor: pointer;
}

.option label {
  font-size: 14px;
  cursor: pointer;
  line-height: 1.5;
  color: var(--text-primary);
}

/* Submit Button */
.submit-button {
  background-color: var(--accent);
  color: var(--bg-primary);
  padding: 10px 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  text-align: center;
}

.submit-button:hover {
  background-color: var(--highlight);
}

/* Feedback Styling */
#feedbacks {
  margin-top: 15px;
  font-size: 14px;
  text-align: center;
  color: var(--text-primary);
}

/* Next Question Button */
.next-button {
  background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end));
  color: var(--bg-primary);
  padding: 10px 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  margin-top: 10px;
  align-self: center;
  transition: background-color 0.3s ease;
}

.next-button:hover {
  background-color: var(--accent);
}

/* Scrollbar Styling for Quiz Content */
#quiz-content {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg-tertiary);
  overflow-y: auto;
}

#quiz-content::-webkit-scrollbar {
  width: 8px;
}

#quiz-content::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: 4px;
}

#quiz-content::-webkit-scrollbar-track {
  background-color: var(--bg-tertiary);
}

/* Leaderboard Section */
#leaderboard {
  background-color: var(--card-bg);
  padding: 20px;
  border-radius: 8px;
  display: none;
}

#leaderboard h3 {
  font-size: 16px;
  margin-bottom: 10px;
   background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--katex-fallback-color);
}

#leaderboard-list {
  color: var(--text-primary);
  font-size: 16px;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#leaderboard-list li {
  padding: 5px 0;
}

/* Restart Button */
.restart-button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 16px;
  background: linear-gradient(to left, var(--katex-gradient-end), var(--katex-gradient-start));
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#restart-quiz{
	background: linear-gradient(to left, var(--katex-gradient-end), var(--katex-gradient-start));
}

.restart-button:hover {
  background-color: var(--accent);
}

/* Progress Bar */
#progress-container {
  background-color: #ddd;
  border-radius: 10px;
  overflow: hidden;
  margin: 10px 0;
}

#progress {
  background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end));
  height: 20px;
  text-align: center;
  color: white;
  line-height: 20px;
  width: 0;
  transition: width 0.3s ease;
}

/* Hint Button */
.hint-button {
  background-color: var(--btn-color);
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}

.hint-button:hover {
  background-color: var(--btn-hover);
}


#geometry-solver-panel {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

#geometry-solver-panel label {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: block;
}

#geometry-solver-panel select,
#geometry-solver-panel input {
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--bg-tertiary);
  border-radius: var(--radius);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 16px;
  outline: none;
  transition: all 0.3s ease;
}

#geometry-solver-panel select:focus,
#geometry-solver-panel input:focus {
  border-color: var(--primary);
  background-color: var(--bg-tertiary);
}

#geometry-solver-panel button#geo-calculate {
  width: 100%;
  padding: 12px;
  background-color: var(--btn-color);
  border: none;
  color: white;
  font-size: 18px;
  font-weight: bold;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#geometry-solver-panel button#geo-calculate:hover {
  background-color: var(--btn-hover);
}

#geo-formula {
  font-size: 16px;
  margin-top: 15px;
  text-align: center;
  color: var(--text-secondary);
}

#geo-result {
  font-size: 22px;
  margin-top: 20px;
  color: var(--text-primary);
  text-align: center;
  font-weight: bold;
}

#geo-result.error {
  color: var(--alert);
}

#geo-result b {
  font-size: 26px;
  color: var(--primary);
}

@media (max-width: 600px) {
  #geometry-solver-panel {
    padding: 20px;
    width: 90%;
  }

  #geometry-solver-panel button {
    font-size: 16px;
  }

  #geometry-solver-panel h1 {
    font-size: 20px;
  }
}


.quiz-container {
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
	overflow-y: auto;
}

#dailyquiz-panel h1 {
  font-size: 2rem;
  margin-bottom: 15px;
  color: var(--primary);
}

#dailyquiz-panel .settings label {
  display: block;
  margin-bottom: 10px;
  color: var(--text-primary);
}

#dailyquiz-panel .settings input, #dailyquiz-panel .settings select {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid var(--accent);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: var(--radius);
}

#dailyquiz-panel .settings button {
  width: 100%;
  padding: 10px;
  margin-top: 15px;
   background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end));
  border: none;
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
}

#dailyquiz-panel .settings button:hover {
  background: var(--btn-hover);
}

#quizSection {
  display: none;
}

.quiz-section button {
  width: 100%;
  padding: 10px;
  background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end));
  border: none;
  border-radius: var(--radius);
  color: white;
  cursor: pointer;
  opacity: 0.5;
  pointer-events: none;
}

.quiz-section button:enabled {
  opacity: 1;
  pointer-events: auto;
}

#quizSummary {
  color: var(--text-primary);
}

#progressdaily {
  color: var(--highlight);
  text-align: center;
}
#questiondaily{
	padding: 5px 0px 10px !important;
	font-size: 14px !important;
}
#feedbackdaily{
font-size: 12px !important;
	padding: 5px;
}
#options button{
	margin:4px 0px !important;
	text-align: left !important;
	align-self: flex-start;
	background:  var(--bg-primary);
}

/* General Leaderboard Styling */
#leaderboard {
  background-color: var(--bg-primary); /* Use the primary background color */
  color: var(--text-primary); /* Text color based on theme */
  border-radius: var(--radius); /* Use the radius from root theme */
  box-shadow: var(--shadow); /* Box shadow for depth from root theme */
  width: 100%;
  max-width: 400px;
  padding: 20px;
  margin: 20px auto;
  text-align: center;
  display: block;
}

/* Header Styling */
#leaderboard h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary); /* Primary color for the header text */
  margin-bottom: 20px;
}

/* Paragraph Styling */
#leaderboard p {
  font-size: 1rem;
  font-weight: 600;
  margin: 10px 0;
  color: var(--text-secondary); /* Secondary text color */
}

/* Button Styling */
#restart-quiz {
  background-color: var(--btn-color); /* Use the button primary color from root theme */
  color: var(--text-primary); /* Text color based on theme */
  border: none;
  padding: 12px 30px;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%; /* Full width for mobile */
  margin-top: 20px;
}

/* Button hover effect */
#restart-quiz:hover {
  background-color: var(--btn-hover); /* Use the hover color from root theme */
}

#restart-quiz:focus {
  outline: none;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
  #leaderboard {
    padding: 15px;
    max-width: 90%; /* Allow more width on small screens */
  }

  #leaderboard h3 {
    font-size: 1.4rem;
  }

  #leaderboard p {
    font-size: 0.9rem;
  }

  #restart-quiz {
    padding: 12px 20px;
  }
}


/* Settings Section */
.settings h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: var(--primary);
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.form-group label {
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.form-group input,
.form-group select {
  padding: 10px;
  font-size: 1rem;
  border: 1px solid var(--accent);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: var(--radius);
  width: 100%;
}

.start-quiz-button {
  width: 100%;
  padding: 10px;
  margin-top: 15px;
  background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end)) !important;
  border: none;
  border-radius: var(--radius);
  color: white;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background 0.3s;
}

.start-quiz-button:hover {
  background: var(--btn-hover);
}
/* Quiz Summary Styling */
.quiz-summary-content {
  background-color: var(--bg-primary);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 500px;
  margin: 20px auto;
  color: var(--text-primary);
  text-align: center;
  box-shadow: var(--shadow);

}

.quiz-summary-title {
  font-size: 1.8rem;
  color: var(--primary);
  margin-bottom: 15px;
  font-weight: bold;
}

.quiz-summary-text {
  font-size: 1.2rem;
  color: var(--text-primary);
  margin: 10px 0;
}

.quiz-summary-text strong {
  color: var(--highlight);
}

.start-new-quiz-button {
  width: 100%;
  padding: 10px;
 background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end));
  border: none;
  border-radius: var(--radius);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  margin-top: 20px;
  transition: background 0.3s ease;
}

.start-new-quiz-button:hover {
  background: var(--btn-hover); /* Applied from theme */
}

/*MULTIPLE CHOICE QUIZ */
#difficulty-selector {
  text-align: center;
  padding: 20px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* Text Style */
#difficulty-selector p {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--text-primary);
}

/* Material-Inspired Gradient Button Styling */
.difficulty-button {
  font-size: 14px;
  padding: 12px 24px;
  margin: 0 10px;
  border: 2px solid transparent;
  background-color: transparent;
  color: var(--accent);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  text-transform: uppercase;
}

/* Hover & Focus Effects */
.difficulty-button:hover,
.difficulty-button:focus {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

/* Active Click Style */
.difficulty-button:active {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Disabled State */
.difficulty-button:disabled {
  color: var(--text-secondary);
  border-color: var(--bg-tertiary);
  cursor: not-allowed;
  opacity: 0.5;
}

/* Mobile Responsive Adjustments */
@media (max-width: 600px) {
  #difficulty-selector {
    flex-direction: column;
    gap: 10px;
  }
}

/* ?? FAB Trigger */
/* ?? Floating FAB */
.fab-keyboard-btn {
  position: fixed;
  top: 70px;
  right: 16px;
  z-index: 1000;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(to right, var(--katex-gradient-start), var(--katex-gradient-end)); /* Gradient matching theme */
  color: #fff;
  border: none;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.fab-keyboard-btn:hover {
  background: var(--btn-hover); /* Hover effect matching the theme */
}

/* ?? Keyboard Panel */
.math-keyboard {
  position: fixed;
  top: 160px; /* Position above the bottom navigation */
  left: 8px;
  width: calc(100% - 16px); /* Adjust width with padding */
  background: var(--bg-tertiary); /* Darker background from the theme */
  padding: 8px; /* Reduced padding */
  border-radius: 8px; /* Slightly less rounded */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow */
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 6px; /* Reduced gap */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  transition: opacity 0.3s ease-in-out;
  max-width: 100%;
  height: auto; /* Adjust height dynamically */
}

.math-keyboard.hidden {
  display: none;
}

/* ?? Keyboard Row */
.keyboard-row {
  display: flex;
  justify-content: space-around; /* Distribute keys more evenly */
  gap: 6px; /* Reduced gap */
}

/* ?? Key Buttons */
.key {
  flex: 1;
  background: var(--bg-secondary); /* Background color matching the theme */
  color: var(--text-primary); /* Lighter text for contrast */
  border: none;
  font-size: 14px; /* Reduced font size */
  padding: 8px 0; /* Reduced padding */
  border-radius: 6px; /* Slightly less rounded */
  font-weight: normal; /* Regular font weight */
  cursor: pointer;
  transition: background 0.2s ease;
  text-align: center; /* Center text in buttons */
  min-width: 40px; /* Ensure minimum width */
}

.key:hover {
  background: var(--accent); /* Hover effect matching the accent color */
}

/* PHASE 1: Session Timer */
.timer-box {
  display: flex;
  justify-content: center;
  margin: 20px auto 10px;
}

.circular-timer {
  position: relative;
  width: 150px;
  height: 150px;
}

.timer-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timer-svg .bg {
  fill: none;
  stroke: var(--bg-tertiary);
  stroke-width: 8;
}

.timer-svg .progress {
  fill: none;
  stroke: var(--highlight);
  stroke-width: 8;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1s linear;
}

.timer-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: bold;
  color: var(--text-primary);
}

.timer-label #elapsed-time {
  font-size: 22px;
  display: block;
}

.timer-label .subtext {
  font-size: 12px;
  color: var(--text-primary);
}

/* Session Stats Below Timer */

/* ?? Usage Summary Section */
#user-usage-summary {
  padding: 0 16px;
  margin-top: 10px;
  color: var(--text-primary);
  font-size: 14px;
  text-align: center;
}
#user-usage-summary p {
  margin: 4px 0;
}
#user-usage-summary span {
  font-weight: bold;
  color: var(--highlight);
}

/* ?? Session Stats Cards */
.session-stats {
  display: flex;
  justify-content: space-around;
  gap: 12px;
  padding: 0 16px;
  margin-top: 12px;
}
/* ?? Usage Summary Section */
.usage-summary {
  text-align: center;
  font-size: 0.9rem;
  margin: 12px auto;
  color: var(--text-secondary);
}
.usage-summary p {
  margin: 4px 0;
  font-weight: 500;
}

/* ? Session Summary Blocks */
.session-stats {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  margin-top: 16px;
  margin-bottom: 20px;
}
.stat-block {
  flex: 1;
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  box-shadow: var(--shadow);
}
.stat-block .label {
  font-size: 0.75rem;
  color: var(--text-primary);
}
.stat-block strong {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}


h3.brandface, .brandface{
	  background: linear-gradient(to right, #667eea, #d4418f);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;
}
h3.brandface{
		font-size: 15px;
	margin-bottom: 20px;

}
.featured-solvers-container {
  padding: 10px;
}

.featured-solvers-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.solver-item {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  margin-bottom: 10px;
  background-color: #e6f7ff;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.solver-item:hover {
  background-color: #d0f0ff;
}

.solver-icon {
  font-size: 1.8em;
  color: #ffc107;
  margin-right: 20px;
  line-height: 1;
}

.solver-name {
  font-size: 1.1em;
  color: #212529;
}

/* Overlay Styles */
.solver-overlay {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1004; /* Ensure it's on top of other elements */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
}

.overlay-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  max-width: 600px; /* Limit width on larger screens */
  border-radius: 8px;
  position: relative;
}

.close-button {
  color: #aaa;
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

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

#overlayContent {
  padding: 20px 0;
}

#overlayContent h2 {
  margin-top: 0;
  color: #333;
}

#overlayContent p {
  color: #555;
  line-height: 1.6;
}

#overlayContent button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  margin-top: 15px;
}

#overlayContent button:hover {
  background-color: #0056b3;
}}

/*TOURGUIDE*/
/* Tour Guide Styling */
.tour-guide {
    position: fixed; /* Use fixed to overlay on content */
    bottom: 20px; /* Adjust position as needed */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    width: 90%; /* Adjust width for mobile screens */
    max-width: 400px; /* Maximum width for larger screens */
    background-color: #007bff; /* Blue background color like the image */
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 15px;
    box-sizing: border-box; /* Include padding in width */
    z-index: 999; /* Ensure it's above other content */
    display: none; /* Hidden by default */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.tour-guide.active {
    display: block;
    opacity: 1;
}

.tour-guide-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
}

.tour-guide-close {
    font-size: 20px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8); /* Slightly transparent white */
}

.tour-guide-close:hover {
    color: white;
}

.tour-guide-body h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.1em;
}

.tour-guide-body p {
    margin-bottom: 10px;
    font-size: 0.9em;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
}

.tour-guide-body a {
    color: #ffffff; /* White color for the link */
    text-decoration: underline;
    font-size: 0.9em;
}

.tour-guide-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.tour-guide-navigation {
    display: flex;
    align-items: center;
}

.nav-arrow {
    font-size: 1.2em;
    margin: 0 5px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
}

.nav-arrow:hover {
    color: white;
}

#stepIndicator {
    font-size: 0.9em;
}

#nextButton {
    background-color: white;
    color: #007bff;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
}

#nextButton:hover {
    background-color: #e2e6ea;
}


/*
==========================================================
Custom CSS for the overlay - Refactored
ABOUT MATHCRAVE SCALFOLD PAGE
=======================================================
*/

/*
==========================================================
Custom CSS for the overlay - Refactored
ABOUT MATHCRAVE SCALFOLD PAGE
=======================================================
*/
       .mathcraveabout-overlay {
           position: fixed;
           bottom: 0;
           left: 0;
           width: 100%;
           height: 50vh; /* Covers half of the viewport height */
           background-color: var(--bg-primary); /* Use theme background */
           box-shadow: var(--shadow); /* Use theme shadow */
           transform: translateY(100%); /* Initially hidden below the viewport */
           transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother animation */
           z-index: 1000; /* Ensure it's above other content */
           border-top-left-radius: var(--radius); /* Use theme radius */
           border-top-right-radius: var(--radius); /* Use theme radius */
           overflow-y: auto; /* Add scrolling if content exceeds height */
           display: flex; /* Use flexbox for internal layout */
           flex-direction: column;
           color: var(--text-primary); /* Use theme text color for default content */
       }

       .mathcraveabout-overlay.mathcraveabout-visible {
           transform: translateY(0); /* Slide up to be visible */
       }

       /* Backdrop to dim the background with namespace */
       .mathcraveabout-overlay-backdrop {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           /* Using a semi-transparent black is standard for backdrops, regardless of theme */
           background-color: rgba(0, 0, 0, 0.6);
           z-index: 999;
           opacity: 0;
           visibility: hidden;
           transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
       }

       .mathcraveabout-overlay-backdrop.mathcraveabout-visible {
           opacity: 1;
           visibility: visible;
       }

       /* Style for the drag handle with namespace */
       .mathcraveabout-drag-handle {
           width: 40px;
           height: 4px;
           background-color: var(--text-secondary); /* Use muted text color for handle */
           border-radius: 2px;
           margin: 0.5rem auto 1rem; /* Center and space it */
       }

 /* ACCORDION */
        .mathcraveguide-details > .mathcraveguide-summary {
            list-style: none; /* Remove default marker */
        }
        .mathcraveguide-details > .mathcraveguide-summary::-webkit-details-marker {
            display: none; /* Remove default marker for webkit browsers */
        }
        /* Add a custom arrow indicator with namespace */
        .mathcraveguide-details > .mathcraveguide-summary::after {
            content: '+'; /* Plus sign when closed */
            float: right;
            transition: transform 0.2s ease;
        }
        .mathcraveguide-details[open] > .mathcraveguide-summary::after {
            content: '-'; /* Minus sign when open */
            transform: rotate(0deg); /* Ensure it stays upright */
        }

        /* Style for the content div for animation with namespace */
        .mathcraveguide-accordion-content {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
        }

        .mathcraveguide-accordion-content.mathcraveguide-open {
            max-height: 800px; /* Increased height to accommodate more content */
            opacity: 1;
        }


        /**SIMULTANEOUS EQUATION **/
                /* Custom styles */
.solveby{
background:none !important; padding-top:20px;}
                .equation-input, input[type="number"] {

                          /* Hide number input arrows */
                          -moz-appearance: textfield; /* Firefox */
                      }

                      .equation-input::-webkit-outer-spin-button,
                      .equation-input::-webkit-inner-spin-button,  input[type="number"]::-webkit-outer-spin-button,
                       input[type="number"]::-webkit-inner-spin-button{
                          -webkit-appearance: none; /* Safari and Chrome */
                          margin: 0; /* Remove default margin */
                      }
                      #eq1-z-term, #eq2-z-term{
                      display: block;}
                .output-section {

                    padding: 2rem;
                    border-radius: 0.5rem; /* Rounded corners */
                    padding: 1.5rem;
                    margin-top: 1.5rem;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Subtle shadow */
                    overflow-x: auto; /* Allow horizontal scroll for potentially wide KaTeX output */
                }
                .output-section h3 {
                    color: #1e40af; /* Dark blue heading */
                    border-bottom: 2px solid #93c5fd; /* Light blue underline */
                    padding-bottom: 0.5rem;
                    margin-bottom: 1rem;
                }
                .step {
                    margin-bottom: 0.5rem; /* Increased margin for better KaTeX spacing */
                    padding-left: 1rem;
                    line-height: 1.1; /* Improve line spacing for math */
                }
                 /* KaTeX styling adjustments if needed */


                .error-msg {
                    color: #dc2626; /* Red for errors */
                    font-weight: 500;
                }
                .solution {
                    font-weight: 600;
                   color: var(--text-primary);
                                      background-color: var(--bg-secondary);
                    margin-top: 1.5rem; /* More space before final solution */
                    padding: 0.5rem;

                    border-left: 3px solid #22c55e; /* Green border */
                    border-radius: 0.25rem;
                }
                /* Style radio buttons */
                input[type="radio"] {
                    accent-color: #2563eb; /* Blue accent */
                }
                /* Style buttons */


                /* Hide/Show based on variable selection */
                .var3-hidden {
                    display: none;
                }
                 /* Center matrix tables generated by older formatMatrix (if any remain temporarily) */
                 table.border-collapse {
                    margin-left: auto;
                    margin-right: auto;
                 }
                 .threevariables .katex{
                 font-size:1rem !important;

                 }

                  /* Modern Radio Button Styles */
                        /* Modern Radio Button Styles - Modified to hide custom circle */
                                .modern-radio {
                                    display: flex; /* Use flexbox for alignment */
                                    align-items: center; /* Vertically center content */
                                    cursor: pointer; /* Indicate it's clickable */
                                    user-select: none; /* Prevent text selection */
                                    padding: 4px 8px; /* Add some padding */
                                    border: 1px solid #d1d5db; /* Light gray border */
                                    border-radius: 0.375rem; /* Rounded corners */
                                    transition: all 0.2s ease-in-out; /* Smooth transitions */
                                    font-size:0.8rem;
                                }

                                .modern-radio input[type="radio"] {
                                    /* Hide the default radio button */
                                    position: absolute;
                                    opacity: 0;
                                    width: 0;
                                    height: 0;
                                }

                                /* Hide the custom radio circle */
                                .modern-radio .radio-custom {
                                    display: none;
                                }

                                .modern-radio input[type="radio"]:checked + .radio-custom + span {
                                    font-weight: 600; /* Bold text when checked */
                                    color: #3b82f6; /* Blue text when checked */
                                }

                                .modern-radio:hover {
                                    border-color: #9ca3af; /* Slightly darker border on hover */
                                }

                                /* Add a subtle background or border change on checked state for the label itself */
                                .modern-radio input[type="radio"]:checked + .radio-custom + span {
                                     /* Existing styles for text color and weight */
                                     font-weight: 600;
                                     color: #3b82f6;
                                }

                                 .modern-radio input[type="radio"]:checked ~ span {
                                    font-weight: 600; /* Bold text when checked */
                                    color: #3b82f6; /* Blue text when checked */
                                }

                                 .modern-radio input[type="radio"]:checked {
                                    /* Style the label container when the radio is checked */
                                    /* This targets the parent label when the hidden input is checked */
                                     /* You might need JavaScript or a different CSS selector approach for direct parent styling */
                                 }

/* === General Select Styling === */
#equationType,
.mathcraveQuadratic-select {
    display: block;
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem; /* space for custom arrow */
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--surface-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292.362 292.362'%3E%3Cpath fill='%232575fc' d='M287.9 146.2c0 3.7-1.4 7-4.3 9.9L146.2 289c-5.8 5.8-15.2 5.8-21 0L4.3 156.1c-2.9-2.9-4.3-6.2-4.3-9.9s1.4-7 4.3-9.9l112.8-112.8c5.8-5.8 15.2-5.8 21 0l112.8 112.8c2.9 2.9 4.3 6.2 4.3 9.9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.75rem;
    border: 1px solid var(--border-color-default);
    border-radius: 0.375rem;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

#equationType:focus,
.mathcraveQuadratic-select:focus {
    border-color: var(--border-color-focus);
    box-shadow: 0 0 0 3px rgba(37, 117, 252, 0.3);
    outline: none;
}

#equationType option {
    padding: 0.5rem 1rem;
    background-color: var(--surface-base);
    color: var(--text-primary);
}

/* === Inline Input for KaTeX === */
.inline-input {
    width: 2.5rem;
    height: 1.5rem;
    font-size: 0.9rem;
    text-align: center;
    border: 1px solid var(--border-color-default);
    border-radius: 0.375rem;
    margin: 0 0.25rem;
    background-color: var(--surface-base);
    color: var(--text-primary);
}
.input-wrapper {
    display: inline-block;
}
.math-input-wrapper {
    overflow-x: auto;
    white-space: nowrap;
}

/* === Form Grid Alignment === */
.grid label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 0.5rem;
}
.input-container {
    display: flex;
    align-items: center;
}

/* === KaTeX Custom Styling === */
#solutionArea .katex {
    font-size: 1rem !important;
}
#solutionArea .text-gray {
    color: var(--text-secondary) !important;
}

/* === Card Layout === */
.mathcraveQuadratic-card {
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: var(--surface-base);
}

/* === Input Group === */
.mathcraveQuadratic-input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* === Input Label === */
.mathcraveQuadratic-input-label {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 1.5rem;
}

/* === Input Field === */
.mathcraveQuadratic-input {
    flex: 1 1 calc(33.33% - 0.5rem);
    min-width: 80px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: var(--text-primary);
    background-color: var(--surface-base);
    border: 1px solid var(--border-color-default);
    border-radius: 0.375rem;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.mathcraveQuadratic-input:focus {
    border-color: var(--border-color-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
    outline: none;
}

/* === Button === */
.mathcraveQuadratic-button {
    display: inline-block;
    background-color: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.mathcraveQuadratic-button:hover {
    background-color: var(--primary-hover);
}

.mathcraveQuadratic-button:active {
    background-color: var(--primary-active);
}

@media (max-width: 640px) {
  #mathcraveQuadratic-graphCanvas {
    height: 300px !important;
    width: 100% !important;
  }

}

/*============LOGARITHMS ===============*/
#solutionTitle{
padding-top: 20px;
}
/* Error Message */
.error-message {
    color: #dc2626; /* Red-600 equivalent */
    font-weight: 500;
    margin-top: 1rem;
}

/* Hidden class (assumes JavaScript adds/removes this) */
.hidden-input {
    display: none;
}


/* --- Desktop Styles (using a media query) --- */
@media (min-width: 768px) { /* Equivalent to Tailwind's 'md' breakpoint */
    .solver-container {
        padding: 2rem; /* Desktop padding */
        margin-top: 4rem; /* More space from top on desktop */
        margin-bottom: 4rem; /* More space at bottom on desktop */
    }

    .solver-title {
        font-size: 1.5rem; /* Desktop text size */
        margin-bottom: 2rem;
    }

     label {
        margin-bottom: 0.25rem; /* Less margin below label in grid layout */
    }

    /* Input Grid adjustments for desktop */
    .input-grid {
        display: grid; /* Use grid layout on desktop */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Create columns */
        gap: 1.5rem; /* Space between grid items */
    }

    .input-grid .input-field {
        /* Remove full width override from mobile */
        width: auto;
    }

     /* Adjust Sig Fig layout for desktop if desired */
    .inline-fields {
       /* Might not need changes if flex/align works well */
    }

     .small-input {
       width: 6rem; /* Slightly wider on desktop maybe */
     }

    .solution-area {
        margin-top: 2rem;
    }
}