/* ─── Base ─── */
:root {
  --primary-color: #007bff;
  --primary-hover-color: #0056b3;
  --secondary-color: #007acc;
  --light-bg: #ffffff; /* Corrected to #ffffff */
  --light-card-bg: #f8f9fa; /* Slightly off-white for cards */
  --dark-bg: #121212;
  --dark-card-bg: #1e1e1e;
  --text-light: #fff;
  --text-dark: #333;
  --text-muted-light: #555;
  --text-muted-dark: #aaa;
  --success-color: green;
  --danger-color: #f00;
  --shadow-color: rgba(0,0,0,0.1);
  --shadow-strong-color: rgba(0,0,0,0.2);
  --button-shadow: 0 2px 5px rgba(0,0,0,0.15);
  --button-active-shadow: 0 1px 2px rgba(0,0,0,0.1);
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: var(--light-bg);
  color: var(--text-dark);
  height: 100%;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden; /* Prevent horizontal scroll during animations */
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Gate Wall ─── */
#gate-wall {
  position: relative;
  text-align: center;
  background: var(--light-card-bg);
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 12px var(--shadow-strong-color);
  width: 90%;
  max-width: 400px;
}

#logo-container {
  background: #fff;
  padding: 1rem;
  border-radius: var(--border-radius-md);
  margin: 2rem auto 1.5rem auto; /* Existing margin */
  display: inline-block;
  box-shadow: 0 2px 4px var(--shadow-color);
}

#app-logo-header { /* Style for logo in main app header */
  height: 60px;
  width: auto;
  display: block;
}

#logo {
  max-width: 200px; /* MODIFIED: Was 180px */
  display: block;
  margin: 0.5rem auto 0 auto; /* MODIFIED: Added margin-top, kept horizontal auto */
}

#code-entry input {
  font-size: 1.5rem;
  width: 10ch;
  text-align: center;
  margin-right: .5rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: var(--border-radius-sm);
}

#code-entry button, #install-btn {
  font-size: 1.2rem;
  padding: .75rem 1.25rem;
  border: none;
  border-radius: var(--border-radius-sm);
  background: var(--primary-color);
  color: var(--text-light);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  box-shadow: var(--button-shadow);
}

#code-entry button:hover, #install-btn:hover {
  background: var(--primary-hover-color);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
#code-entry button:active, #install-btn:active {
  transform: translateY(1px);
  box-shadow: var(--button-active-shadow);
}

#install-btn {
  margin-top: 1rem;
  background-color: var(--secondary-color);
}
#install-btn:hover {
    background-color: #005999;
}

/* ─── Dark Mode Toggle Styles ─── */
.dark-mode-toggle-container {
  position: absolute;
  top: 2rem;
  right: 1rem;
  z-index: 1001;
}

.dark-toggle-checkbox {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.dark-toggle-label {
  cursor: pointer;
  font-size: 1.5rem;
  padding: 0.25rem;
  display: inline-block;
  user-select: none;
  border-radius: 50%;
  transition: transform 0.2s ease, color 0.3s ease;
  color: var(--text-dark);
}
.dark-toggle-label:hover {
    transform: scale(1.1);
}

/* ─── iOS tip ─── */
#ios-install-tip {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  width: auto;
  margin: 0 auto;
  max-width: 90%;
  text-align:center;
  font-size:.9rem;
  color: var(--text-muted-light);
  padding: 0.75rem;
  background-color: rgba(230,230,230,0.9);
  border-radius: var(--border-radius-md);
  box-shadow: 0 -1px 4px rgba(0,0,0,0.1);
  z-index: 1002;
}
#ios-install-tip svg {
    vertical-align: middle;
    margin-bottom: 2px;
}

/* ─── Main App ─── */
body.app-active {
  display: block;
  padding-top: 0;
}

#main-app {
  display: none;
  width:100%;
  max-width:520px;
  margin:0 auto;
  padding: 0 1rem 1rem 1rem;
}

.main-app-header {
    display: flex;
    justify-content: space-between; /* For logo and toggle */
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.app-header-toggle {
    position: static;
}

/* Common Button Styles */
.btn-base {
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  box-shadow: var(--button-shadow);
  font-weight: 500;
}
.btn-base:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.btn-base:active {
  transform: translateY(1px);
  box-shadow: var(--button-active-shadow);
}

/* ─── Tests List ─── */
.tests-list {
  display:flex;
  flex-direction:column;
  gap:.75rem;
  margin-top:1rem;
}

.test-btn {
  width:100%;
  padding:1.25rem 1rem;
  background: var(--secondary-color);
  color: var(--text-light);
  font-size:1.1rem;
  text-align:center;
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  box-shadow: var(--button-shadow);
  font-weight: 500;
}
.test-btn:hover {
  background: #005999;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.test-btn:active {
  transform: translateY(1px);
  box-shadow: var(--button-active-shadow);
}

@media (min-width:600px){
  .tests-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
  }
}

/* ─── Exercises List ─── */
.ex-list{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  margin-top:1rem;
}

.ex-item {
  position: relative; /* For positioning CTAs within it */
  background: var(--light-card-bg);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 2px 6px var(--shadow-color);
  overflow: hidden; /* Crucial for containing sliding/animated CTAs */
}

.ex-info {
  padding:1.25rem;
}

.ex-info h3{
  font-size:1.2rem;
  margin-bottom:.5rem;
  color: var(--text-dark);
}

.ex-info p{
  font-size:.95rem;
  color: var(--text-muted-light);
  line-height:1.5;
}

/* ─── Play/Pause Button (Exercise Button) ─── */
.ex-btn {
  position:relative; /* Keep relative for its own children like progress-fill */
  width:100%;
  padding: 1.5rem 1rem;
  background: var(--danger-color);
  color: var(--text-light);
  /* No bottom radius if CTAs follow directly and form the new bottom */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--border-radius-lg);
  border-top-right-radius: var(--border-radius-lg);
  font-size:1rem;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background-color 0.3s ease-in-out;
  z-index: 2; /* Above progress-fill */
}
.ex-btn:hover {
  filter: brightness(1.1);
}

.ex-btn .icon {
  position:absolute;
  left:1rem;
  font-size:2rem;
  pointer-events: none;
  z-index: 2; /* Ensure icon is above progress fill */
}

.ex-btn .timer {
  position:absolute;
  right:1rem;
  font-size:1rem;
  pointer-events: none;
  z-index: 2; /* Ensure timer is above progress fill */
}

.progress-fill {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:0;
  background: var(--success-color);
  transition: width .2s linear, background-color 0.3s ease-in-out;
  z-index:1; /* Behind icon and timer */
}

/* Seek slider */
.seek-bar-container {
    padding: 0.75rem 1.25rem; /* Adjust padding as it's no longer the last item usually */
    background: var(--light-card-bg);
    /* No border-radius if CTAs make up the bottom of the card */
}
.seek-bar {
  width:100%;
  -webkit-appearance:none;
  appearance: none;
  height:6px;
  background:#ddd;
  border-radius:3px;
  outline:none;
  cursor: pointer;
}
.seek-bar::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance: none;
  width:16px;
  height:16px;
  border-radius:50%;
  background: var(--primary-color);
  cursor:pointer;
  transition: background-color 0.2s ease;
}
.seek-bar::-moz-range-thumb {
  width:16px;
  height:16px;
  border-radius:50%;
  background: var(--primary-color);
  cursor:pointer;
  border: none;
  transition: background-color 0.2s ease;
}
.seek-bar:hover::-webkit-slider-thumb {
    background: var(--primary-hover-color);
}
.seek-bar:hover::-moz-range-thumb {
    background: var(--primary-hover-color);
}


/* ─── "Activate with teacher" CTA (Timed) ─── */
.exercise-cta {
  display: none; /* Hidden by default, JS adds .visible */
  opacity: 0;
  transform: translateY(20px); /* Initial position for slide-up animation */
  padding: 0.8rem 1.25rem;
  background-color: var(--primary-color);
  color: var(--text-light);
  text-align: center;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  border-top: 1px solid rgba(0,0,0,0.05); /* Optional subtle separator */
  /* border-radius handled by .is-last-visible or if .social-slide-container is also visible */
}

.exercise-cta.visible {
  display: block; /* Or 'flex' if its child 'a' needs specific alignment */
  opacity: 1;
  transform: translateY(0);
}

.exercise-cta.is-last-visible { /* Add this class with JS if it's the true last element */
    border-bottom-left-radius: var(--border-radius-lg);
    border-bottom-right-radius: var(--border-radius-lg);
}

.exercise-cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  text-decoration: none;
  color: var(--text-light);
  font-weight: 500;
  font-size: 0.95rem;
}
.exercise-cta a:hover {
  text-decoration: underline;
  opacity: 0.9;
}
.exercise-cta .cta-icon { /* For the teacher icon */
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* ─── Sliding Social Media Button (NEW) ─── */
.social-slide-container {
  background-color: #ffffff;
  border-top: 1px solid #e0e0e0;
  /* For slide-down (expand) effect, it is placed after seekbar in DOM by JS */
  max-height: 0; /* Initially hidden */
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out 0.1s; /* Delay opacity */
  z-index: 3;
  /* This will always be the last visual element if active, so it takes bottom radius */
  border-bottom-left-radius: var(--border-radius-lg);
  border-bottom-right-radius: var(--border-radius-lg);
}

.social-slide-container.active {
  max-height: 70px; /* Adjust to snugly fit your content */
  opacity: 1;
}

.social-button-divided {
  display: flex;
  width: 100%;
  padding: 0.5rem 0; /* Vertical padding inside the sliding container */
}

.social-button-divided a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.2rem;
  text-decoration: none;
  color: #444;
  font-size: 0.7rem;
  font-weight: 500;
  text-align: center;
  transition: background-color 0.15s ease, transform 0.1s ease-out;
  min-height: 50px;
  line-height: 1.2;
  cursor: pointer;
}

.social-button-divided a:first-child {
  border-right: 1px solid #eaeaea; /* Divider */
}

.social-button-divided .social-icon-small {
  width: 20px;
  height: 20px;
  margin-bottom: 0.2em;
}

.social-button-divided .social-link-facebook .social-icon-small {
  fill: #1877F2; /* Facebook Blue */
}
.social-button-divided .social-link-facebook:hover {
  background-color: rgba(24, 119, 242, 0.08);
}
.social-button-divided .social-link-facebook:active {
  transform: scale(0.95);
  background-color: rgba(24, 119, 242, 0.15);
}

.social-button-divided .social-link-instagram .social-icon-small {
  fill: #d6249f; /* Instagram Pink (simplified) */
}
.social-button-divided .social-link-instagram:hover {
  background-color: rgba(214, 36, 159, 0.08);
}
.social-button-divided .social-link-instagram:active {
  transform: scale(0.95);
  background-color: rgba(214, 36, 159, 0.15);
}


/* ─── Back Button ─── */
.back-btn {
  width:100%;
  margin-top:1.5rem;
  padding: .9rem;
  background:#6c757d;
  color: var(--text-light);
  font-size:1rem;
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  box-shadow: var(--button-shadow);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.back-btn:hover {
  background: #5a6268;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.back-btn:active {
  transform: translateY(1px);
  box-shadow: var(--button-active-shadow);
}
.back-btn .icon-back {
    font-size: 1.2em;
    line-height: 1;
}

/* ─── Dark Mode ─── */
body.dark-mode {
  background: var(--dark-bg);
  color: var(--text-light);
}
body.dark-mode #gate-wall {
  background: var(--dark-card-bg);
  box-shadow:0 2px 8px rgba(0,0,0,0.7);
  color: var(--text-light);
}
body.dark-mode .dark-toggle-label {
    color: var(--text-light);
}
body.dark-mode #logo-container {
    background: #333;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
body.dark-mode #app-logo-header {
    /* filter: invert(1) brightness(1.5); */
}
body.dark-mode #code-entry input {
  background-color: #2c2c2c;
  border-color: #444;
  color: var(--text-light);
}
body.dark-mode #code-entry button,
body.dark-mode #install-btn,
body.dark-mode .test-btn,
body.dark-mode .back-btn {
  background: var(--primary-color);
  color: var(--text-light);
}
body.dark-mode #code-entry button:hover,
body.dark-mode #install-btn:hover,
body.dark-mode .test-btn:hover,
body.dark-mode .back-btn:hover {
  background: var(--primary-hover-color);
}
body.dark-mode .main-app-header { }

body.dark-mode .ex-item {
  background: var(--dark-card-bg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
body.dark-mode .ex-info h3 {
  color: var(--text-light);
}
body.dark-mode .ex-info p {
  color: var(--text-muted-dark);
}

body.dark-mode .exercise-cta {
  background-color: var(--primary-hover-color);
  color: var(--text-light);
  border-top-color: #3a3a3a;
}
body.dark-mode .exercise-cta a {
  color: var(--text-light);
}

body.dark-mode .social-slide-container {
  background-color: #282828;
  border-top-color: #3a3a3a;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.5); /* Shadow from top if it slides up from bottom */
}
body.dark-mode .social-button-divided a {
  color: var(--text-muted-dark);
}
body.dark-mode .social-button-divided a:first-child {
  border-right-color: #3a3a3a;
}
body.dark-mode .social-button-divided .social-link-facebook:hover {
  background-color: rgba(24, 119, 242, 0.15);
}
body.dark-mode .social-button-divided .social-link-facebook .social-icon-small {
  fill: #4293f7;
}
body.dark-mode .social-button-divided .social-link-instagram:hover {
  background-color: rgba(214, 36, 159, 0.15);
}
body.dark-mode .social-button-divided .social-link-instagram .social-icon-small {
  fill: #e556b8;
}

body.dark-mode .seek-bar-container {
    background: var(--dark-card-bg);
}
body.dark-mode .seek-bar {
  background:#333;
}
body.dark-mode .seek-bar::-webkit-slider-thumb {
  background:var(--primary-color);
}
body.dark-mode .seek-bar::-moz-range-thumb {
  background:var(--primary-color);
}
body.dark-mode #ios-install-tip {
  color: var(--text-muted-dark);
  background-color: rgba(40,40,40,0.9);
  box-shadow: 0 -1px 4px rgba(0,0,0,0.4);
}

/* Accessibility: Focus Styles */
#code-entry input:focus,
#code-entry button:focus,
#install-btn:focus,
.test-btn:focus,
.ex-btn:focus,
.seek-bar:focus,
.back-btn:focus,
.dark-toggle-checkbox:focus + .dark-toggle-label,
.exercise-cta a:focus, 
.social-button-divided a:focus
{
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25);
}
.dark-toggle-checkbox:focus + .dark-toggle-label {
    transform: scale(1.1);
}
body.dark-mode #code-entry input:focus,
body.dark-mode #code-entry button:focus,
body.dark-mode #install-btn:focus,
body.dark-mode .test-btn:focus,
body.dark-mode .ex-btn:focus,
body.dark-mode .seek-bar:focus,
body.dark-mode .back-btn:focus,
body.dark-mode .dark-toggle-checkbox:focus + .dark-toggle-label,
body.dark-mode .exercise-cta a:focus,
body.dark-mode .social-button-divided a:focus
{
  outline-color: var(--primary-hover-color);
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.35);
}

/* Expiry Banner */
.expiry-banner {
  position:fixed;
  top:0;
  left: 0;
  right: 0;
  width: auto;
  background:'#fffae6';
  color:'#333';
  padding:'.75rem';
  text-align:center;
  z-index:1000;
  font-size: 0.9rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
body.dark-mode .expiry-banner {
    background: #3e382e;
    color: #f0e0c0;
}

/* ─── UI Enhancements: Loader & Page Transitions ─── */
.loader {
  border: 5px solid var(--light-bg);
  border-top: 5px solid var(--primary-color);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: 2rem auto;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#content-area.fade-in {
  animation: fadeInAnimation 0.5s ease-in-out forwards;
}
@keyframes fadeInAnimation {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.hidden {
    display: none !important;
}