:root {
  --page-bg: #f2f4f8; /* light-gray page background */
  --panel: #ffffff; /* white panels */
  --blue: #3498db;/* primary blue */
  --blue-dark: #217dbb; /* darker blue */
  --btn-blue: #1474e2;/* button blue */
  --text: #0f1724;/* dark text on panels */
  --muted: #6b7280;
  --radius: 10px;
  --max-w: 1100px;
  --gap: 18px; /* Defined a default value for --gap based on its usage */
  
  /* --- NEW BUTTON COLORS --- */
  --new-btn-hover: hsl(234, 100%, 50%);
  --new-btn-active: hsl(234, 100%, 30%);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:'Roboto',sans-serif;background:var(--page-bg);color:var(--text);
  -webkit-font-smoothing:antialiased;display:flex;justify-content:center;padding:20px;
}
.wrap{width:100%;max-width:var(--max-w)}
header{
  background:linear-gradient(90deg,var(--blue),var(--blue-dark));
  color:white;padding:18px;border-radius:var(--radius);display:flex;gap:16px;align-items:center;margin-bottom:18px;
  box-shadow:0 10px 30px rgba(31,120,190,0.13);
}
.logo{
  width:clamp(48px,9vw,84px);height:clamp(48px,9vw,84px);border-radius:12px;
  background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:clamp(16px,3vw,26px);transition:all .2s;
}
header .title{display:flex;flex-direction:column}
header h1{margin:0;font-size:18px}
header p.lead{margin:6px 0 0;font-size:13px;color:rgba(255,255,255,0.95)}

.ebook{background:var(--panel);border-radius:var(--radius);padding:18px;box-shadow:0 8px 24px rgba(23,31,42,0.04)} /* Applied: --card -> --panel */
.layout{display:grid;grid-template-columns:320px 1fr;gap:var(--gap);align-items:start} /* Applied: --gap */
nav{background:#fbfdff;border-radius:12px;padding:12px;border:1px solid rgba(16,24,40,0.03)}
nav h3{margin:0 0 10px 0;font-size:15px}
.examples{display:flex;flex-direction:column;gap:8px}
.example-item{
  padding:8px 10px;border-radius:10px;background:#fff;border:1px solid rgba(16,24,40,0.1);
  cursor:pointer;font-weight:700;text-align:center;
}
.example-item:hover{background:linear-gradient(90deg,rgba(59,130,246,0.06),rgba(30,64,175,0.06))}

.link {color: var(--btn-blue); text-decoration: none; font-size: 16px;}



main{min-height:480px}
.card{background:var(--panel);border-radius:12px;padding:14px;border:1px solid rgba(16,24,40,0.03);margin-bottom:12px} /* Applied: --card -> --panel */
h2{color:var(--blue);margin:0 0 10px 0}
.lead-note{color:var(--muted);font-size:14px;margin-top:6px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.input-group{display:flex;gap:8px;width:100%}
input[type=text]{flex:1;padding:10px 12px;border-radius:10px;border:1px solid rgba(16,24,40,0.08);font-size:15px;background:#fff}
button.btn{background:linear-gradient(90deg,var(--blue),var(--blue-dark));color:white;border:0;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700}
button{background:#fff;color:var(--text);border:1px solid rgba(16,24,40,0.06)}
.status{font-size:14px;color: rgb(0, 180, 0); /* Darkened slightly for readability */;margin-top:10px}
.status.error{color:red}
.status.success{color:rgb(0, 255, 0)}
.media-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.media{background:#fbfdff;padding:10px;border-radius:10px;min-height:100px;border:1px solid rgba(16,24,40,0.1)}
.media strong{display:block;color:var(--text)}
.placeholder{font-size:13px;color:var(--muted)}
img,video,audio{width:100%;border-radius:8px;max-height:260px;object-fit:cover}
.lesson-structure{margin-top:12px;padding:12px;border-radius:8px;background:#f7fbff;border:1px solid rgba(16,24,40,0.03)}
.examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:8px}
.suggestions{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.suggest-btn{background:#fff;border:1px solid rgba(16,24,40,0.06);padding:6px 8px;border-radius:8px;cursor:pointer;font-weight:700}

#ttsBtn{background: linear-gradient(90deg, var(--blue), var(--blue-dark)); padding: 10px 14px; border-radius:10px;cursor:pointer;font-weight:700; border-style: none; color: white;}

#clearProgressBtn {background: linear-gradient(90deg, var(--blue), var(--blue-dark)); padding: 10px 14px; border-radius:10px;cursor:pointer;font-weight:700; border-style: none; color: white;}

/* Button Hover/Active Fixes */
#clearProgressBtn:hover{background: var(--new-btn-hover);}
#clearProgressBtn:active{background: var(--new-btn-active);}

#saveBtn:hover{background: var(--new-btn-hover);}
#saveBtn:active{background: var(--new-btn-active);}


#searchBtn:hover{background: var(--new-btn-hover);}
#searchBtn:active{background: var(--new-btn-active);}


#ttsBtn:hover{background: var(--new-btn-hover);}
#ttsBtn:active{background: var(--new-btn-active);}
/* End Button Fixes */

a {text-decoration: none; color: var(--blue);} /* Applied: #1e90ff -> --btn-blue */

a:hover {text-decoration: underline;}

.footer-note{margin-top:12px;color:var(--muted);font-size:13px}


/* MINI-GAME*/

.game-container {
  background: var(--panel); /* Applied: --card -> --panel */
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  padding: 20px;
  width: 100%;
  max-width: 600px;
  text-align: center;
}

.h3 {color: var(--btn-blue);} /* Applied: #1e90ff -> --btn-blue */



.timer {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--blue-dark);
}

.progress-bar {
  height: 10px;
  width: 100%;
  background: #ddd;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 20px;
}

.progress {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-dark));
  transition: width 1s linear;
}

.image-area {
  margin-bottom: 16px;
}

img {
  width: 100%;
  max-width: 250px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

#startBtn {
  background: linear-gradient(90deg, var(--blue), var(--blue-dark));
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  margin-top: 12px;
}

/* Button Hover/Active Fixes */
#startBtn:hover {
  background: var(--new-btn-hover);
}
#startBtn:active {
 background: var(--new-btn-active);
}

#options button{background: var(--btn-blue);color: white;font-weight: 700;border: none;border-radius: 8px;padding: 10px;cursor: pointer;transition: background 0.2s ease;} /* Applied: #1e90ff -> --btn-blue */

#options button:hover {
  background: var(--new-btn-active); /* Adjusted for contrast on hover */
}
/* End Button Fixes */

.result {
  margin-top: 16px;
  font-size: 18px;
  font-weight: bold;
  color: var(--text);
}

.restart-btn {
  background: white;
  color: var(--blue);
  margin-top: 12px;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
}

/* Button Hover/Active Fixes */
.restart-btn:hover {
  background: var(--new-btn-hover);
  color: white;
}
/* End Button Fixes */


/* Responsive rules (mobile-first tweaks) */
@media (max-width:1100px){
  .layout{grid-template-columns:minmax(200px,280px) 1fr}
  .media-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  body{padding:16px}
  header{padding:12px;gap:12px}
  .layout{grid-template-columns:1fr}
  nav{order:0}
  .media-row{grid-template-columns:1fr}
  .examples-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}
  .logo{width:clamp(48px,10vw,76px);height:clamp(48px,10vw,76px);font-size:clamp(14px,3.5vw,22px)}
  input[type=text]{font-size:15px}
}
@media (max-width:560px){
  header{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .logo{width:56px;height:56px;font-size:16px}
  .ebook{padding:12px}
  .card{padding:12px}
  .game-container{padding:12px}
  button.btn{width:100%;min-width:0}
  .input-group{flex-direction:column}
  input[type=text]{width:100%}
  .chat-window{height:36vh}
  .media-row{grid-template-columns:1fr}
  .examples{flex-direction:row;flex-wrap:wrap;gap:6px}
  .example-item{flex:1 1 45%}
}

/* High-density small screens */
@media (max-width:420px){
  header h1{font-size:16px}
  header p.lead{font-size:12px}
  .logo{width:48px;height:48px;font-size:15px}
  .chat-window{height:34vh;padding:10px}
  .msg{font-size:14px;padding:8px 10px}
}