:root { font-family: Arial, Helvetica, sans-serif; color: #1f2937; }
    * { box-sizing: border-box; }
    body { margin: 0; min-height: 100vh; background: #fff; display: grid; place-items: start center; }
    main { width: min(760px, 92vw); padding: 10vh 0 60px; }
    h1 { text-align:center; letter-spacing:.04em; margin:0 0 36px; font-size: clamp(30px, 6vw, 48px); }
    h2 { margin-top:0; }
    .card { border:1px solid #d1d5db; border-radius:16px; padding:26px; box-shadow:0 6px 24px rgba(0,0,0,.06); }
    .hidden { display:none !important; }
    label { display:block; font-weight:700; margin:16px 0 7px; }
    input[type=text], input[type=password] { width:100%; font-size:20px; padding:12px 14px; border:1px solid #9ca3af; border-radius:10px; }

    #taskCode::placeholder { color:#d6dadd; opacity:1; }
    button { font:inherit; cursor:pointer; border:1px solid #9ca3af; background:#fff; border-radius:10px; padding:11px 16px; }
    button.primary { font-weight:700; border-color:#374151; }
    button:disabled { cursor:not-allowed; opacity:.4; }
    .row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    .groups { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
    .group-option { border:1px solid #d1d5db; border-radius:10px; padding:10px 12px; }
    .group-option label { display:inline; margin:0; font-weight:400; }
    .message { min-height:1.4em; margin-top:12px; font-weight:700; }
    .audio-box { border:1px solid #d1d5db; border-radius:14px; padding:18px; margin-top:18px; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.06); }
    #playPauseBtn { width:112px; }
    .audio-box.compact { padding:8px 10px; border-radius:10px; }
    .audio-box.compact .progress,
    .audio-box.compact .speed-line,
    .audio-box.compact .status,
    .audio-box.compact #stopBtn { display:none; }
    .audio-box.compact .transport-row { margin-top:0 !important; flex-wrap:nowrap; }
    .audio-box.compact .time { font-size:13px; min-width:95px; }
    .time { font-variant-numeric: tabular-nums; min-width:110px; }
    .progress { width:100%; }
    .speed-line { margin-top:16px; }
    .speed-line button.active { font-weight:700; outline:2px solid #374151; }
    .status { margin:14px 0 0; }
    #textPanel { margin-top:22px; border-top:1px solid #e5e7eb; padding-top:20px; line-height:1.65; font-size:18px; }
    .speaker { font-weight:700; }
    .helpword { cursor:pointer; position:relative; border-radius:4px; transition:background .12s ease; }
    .helpword:hover { background:#fff3a6; }
    .tooltip { position:fixed; z-index:1000; background:#111827; color:white; border-radius:8px; padding:7px 10px; font-size:15px; pointer-events:none; box-shadow:0 4px 14px rgba(0,0,0,.2); }
    .topline { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
    .small { font-size:14px; color:#6b7280; }
    table { width:100%; border-collapse:collapse; margin-top:14px; }
    th, td { text-align:left; border-bottom:1px solid #e5e7eb; padding:8px; font-size:14px; }
    .teacher-actions { margin:14px 0; }
    @media (max-width:560px){ .groups { grid-template-columns:1fr; } .card{padding:18px;} }
  
    #floatingTransport{
      display:none; position:fixed; top:8px; left:50%; transform:translateX(-50%);
      z-index:9999; background:white; border:1px solid #d1d5db; border-radius:10px;
      box-shadow:0 4px 14px rgba(0,0,0,.12); padding:7px 9px; gap:7px;
      align-items:center; white-space:nowrap;
    }
    #floatingTransport.visible{display:flex;}
    #floatingTransport button{margin:0;}
#listenStatus { display:none; }
#listenStatusInline { margin-left:10px; }
.topline > .row { justify-content:flex-end; }


/* VERSION 23 – one approved background image, no separate landscape layers */
html{
  min-height:100%;
  background:#fff;
}
body{
  margin:0;
  min-height:100vh;
  display:block;
  position:relative;
  overflow-x:hidden;
  background:#fff url("../assets/background-v23.png") center center / cover no-repeat fixed;
}
main{
  width:min(1040px,92vw);
  margin:0 auto;
  padding:28px 0 48px;
}
h1{
  /* The logo is already part of the background image. */
  height:205px;
  margin:0 0 8px;
  font-size:0;
  line-height:0;
  color:transparent;
  text-shadow:none;
}
.card{
  background:rgba(255,255,255,.95);
  border-color:#d9e6f1;
  box-shadow:0 9px 28px rgba(35,83,122,.11);
}
button.primary{
  background:#1264d9;
  border-color:#1264d9;
  color:#fff;
}
.groups{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.group-option{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  background:#fff;
  border-color:#cddae7;
}
.group-option label{
  font-weight:700;
  color:#17315f;
}

/* Login and student-selection views fit in the viewport and do not reveal other sections. */
body[data-view="gate"],
body[data-view="studentStart"]{
  height:100vh;
  overflow-y:hidden;
}
body[data-view="gate"] main,
body[data-view="studentStart"] main{
  height:100vh;
  padding-top:18px;
  padding-bottom:18px;
}
body[data-view="gate"] h1,
body[data-view="studentStart"] h1{
  height:205px;
}
body[data-view="gate"] #gate,
body[data-view="studentStart"] #studentStart{
  margin:0;
}

/* Content pages may scroll normally. */
body[data-view="listeningPage"],
body[data-view="teacherPage"]{
  min-height:100vh;
  overflow-y:auto;
}
body[data-view="listeningPage"] main,
body[data-view="teacherPage"] main{
  padding-bottom:70px;
}

/* On the actual listening/report pages the logo area is smaller,
   so useful content begins higher up. */
body[data-view="listeningPage"] h1,
body[data-view="teacherPage"] h1{
  height:145px;
}

@media(max-width:720px){
  .groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  body{background-position:center center}
  h1{height:165px}
  body[data-view="gate"] h1,
  body[data-view="studentStart"] h1{height:165px}
}
@media(max-height:760px) and (min-width:721px){
  body[data-view="gate"] h1,
  body[data-view="studentStart"] h1{height:150px}
  body[data-view="gate"] main,
  body[data-view="studentStart"] main{padding-top:8px}
  body[data-view="studentStart"] .card{padding:20px 26px}
  body[data-view="studentStart"] label{margin-top:10px}
  body[data-view="studentStart"] input[type=text]{padding:9px 12px}
  body[data-view="studentStart"] .group-option{min-height:44px;padding:7px 10px}
}


/* VERSION 24 – only two visual corrections */

/* 1. Show the COMPLETE background instead of cropping it with cover.
   The page background itself supplies the surrounding sky/white tone. */
body{
  background-color:#ffffff !important;
  background-image:url("../assets/background-v23.png") !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
  background-size:100% auto !important;
  background-attachment:fixed !important;
}

/* 2. Content cards must be fully opaque so the background/logo
   can never show through while reading. */
.card,
.player-card,
.transcript,
#listeningPage .card,
#teacherPage .card{
  background:#ffffff !important;
  opacity:1 !important;
}

/* Any transcript/text area inside a card stays solid white as well. */
#transcript,
.transcript,
.transcript-content,
.text-content{
  background:#ffffff !important;
}

/* VERSION 26 – V24 behaviour preserved, only positioning refined */

/* Keep the background proportional. On narrower windows it is cropped,
   never squeezed to the browser dimensions. */
body{
  background-image:url("../assets/background-v23.png") !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
  background-size:auto 100vh !important;
  background-attachment:fixed !important;
  background-color:#fff !important;
}

/* The logo is part of the background. Reserve enough room for the
   complete wordmark including the smile before the real card begins. */
body[data-view="gate"] h1,
body[data-view="studentStart"] h1{
  height:195px !important;
  margin:0 !important;
}

/* Listening/report views need less empty header space. */
body[data-view="listeningPage"] h1,
body[data-view="teacherPage"] h1{
  height:120px !important;
}

/* Keep the real interface clear of the logo on the first two views. */
body[data-view="gate"] main,
body[data-view="studentStart"] main{
  padding-top:8px !important;
}

/* Reading surfaces remain fully opaque. */
.card,
.player-card,
.transcript,
#listeningPage .card,
#teacherPage .card,
#transcript,
.transcript-content,
.text-content{
  background:#fff !important;
  opacity:1 !important;
}


/* VERSION 27 – narrower code box on the main page only */
body[data-view="gate"] #gate{
  width:min(760px, 82vw) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}


/* VERSION 28 – narrower student-selection menu as well */
body[data-view="studentStart"] #studentStart{
  width:min(760px, 82vw) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}


/* VERSION 29 – listening page starts a little lower */
body[data-view="listeningPage"] h1{
  height:175px !important;
}

/* Keep the listening card itself unchanged; only reserve more
   clear space for the background Listening4us title above it. */
body[data-view="listeningPage"] main{
  padding-top:8px !important;
}


/* VERSION 30 – Buttons & controls only. Layout from V29 stays untouched. */

/* General button language: softer, clearer, less "browser default". */
button{
  border-radius:12px !important;
  font-weight:700 !important;
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease !important;
}
button:not(:disabled):hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(31,74,112,.13);
}
button:not(:disabled):active{
  transform:translateY(0);
  box-shadow:none;
}

/* Main action */
button.primary,
#startBtn{
  background:#1769d2 !important;
  border-color:#1769d2 !important;
  color:#fff !important;
}

/* Group choices: four calm little cards */
.group-option{
  border:2px solid #cbd9e7 !important;
  border-radius:12px !important;
  background:#f9fcff !important;
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.group-option:hover{
  background:#eef7ff !important;
  border-color:#9fc2e5 !important;
}
.group-option:has(input:checked){
  background:#e4f2ff !important;
  border-color:#3982cb !important;
  box-shadow:0 0 0 2px rgba(57,130,203,.10);
}
.group-option input[type="radio"]{
  accent-color:#2676c8;
}

/* Audio controls: Play/Pause visually primary, FF/FB secondary */
#playPauseBtn{
  background:#1769d2 !important;
  border-color:#1769d2 !important;
  color:#fff !important;
  min-width:120px;
}
#backBtn,
#forwardBtn{
  background:#f0f6fb !important;
  border-color:#c8d8e7 !important;
  color:#24486c !important;
}

/* Speed controls */
.speed button,
.speed-btn{
  background:#fff !important;
  border-color:#c9d7e5 !important;
  color:#294b6c !important;
  min-width:58px;
}
.speed button.active,
.speed-btn.active,
.speed button[aria-pressed="true"],
.speed-btn[aria-pressed="true"]{
  background:#e4f2ff !important;
  border-color:#3982cb !important;
  color:#174f86 !important;
}

/* Transcript button: warm yellow when available; grey when disabled */
#textBtn,
#transcriptBtn{
  background:#fff0a8 !important;
  border-color:#e4c84e !important;
  color:#4f4311 !important;
}
#textBtn:disabled,
#transcriptBtn:disabled{
  background:#eceff2 !important;
  border-color:#d3d8dd !important;
  color:#8a939c !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Navigation actions stay deliberately quieter */
#anotherBtn,
#logoutBtn,
#backBtnTask{
  background:#eaf4ff !important;
  border-color:#bfd6eb !important;
  color:#27577f !important;
}

/* Keep the tiny sticky player restrained */
.sticky-player button,
#stickyPlayer button{
  border-radius:9px !important;
  box-shadow:none !important;
}


/* VERSION 31 – final control refinements */

/* Start button: lighter blue */
#startBtn,
button.primary{
  background:#7fc4f2 !important;
  border-color:#7fc4f2 !important;
  color:#173b5b !important;
  font-weight:600 !important;
}

/* Player transport: plain white, normal-weight text */
#playPauseBtn,
#backwardBtn,
#forwardBtn,
#stopBtn,
#backBtn,
#forwardBtn{
  font-weight:400 !important;
}

#playPauseBtn{
  background:#7fc4f2 !important;
  border-color:#7fc4f2 !important;
  color:#173b5b !important;
}

#backwardBtn,
#forwardBtn,
#backBtn,
#forwardBtn,
#stopBtn{
  background:#ffffff !important;
  border-color:#cfd9e3 !important;
  color:#2b3c4e !important;
  box-shadow:none !important;
}

/* Speed controls: simple typography again */
.speed-line,
.speed-line strong,
.speed-line button,
.speed button,
.speed-btn{
  font-weight:400 !important;
}

.speed-line strong{
  font-weight:400 !important;
}

.speed-line button,
.speed button,
.speed-btn{
  background:#ffffff !important;
  color:#2b3c4e !important;
  border-color:#cfd9e3 !important;
}

.speed-line button.active,
.speed button.active,
.speed-btn.active,
.speed-line button[aria-pressed="true"],
.speed button[aria-pressed="true"],
.speed-btn[aria-pressed="true"]{
  background:#eef7ff !important;
  border-color:#9fc7e5 !important;
  color:#244d6b !important;
}

/* Whole group card is clickable */
.group-option{
  cursor:pointer !important;
  user-select:none;
}
.group-option input[type="radio"]{
  pointer-events:none;
}
.group-option label,
.group-option span{
  pointer-events:none;
}

/* Transcript button wording remains visually calm */
#textBtn,
#transcriptBtn{
  font-weight:500 !important;
}


/* VERSION 34 – group choice behaves like four real buttons */
.group-option{
  cursor:pointer !important;
  user-select:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:50px !important;
  border:2px solid #cbd9e7 !important;
  border-radius:12px !important;
  background:#f9fcff !important;
  color:#17315f !important;
  font-weight:600 !important;
  transition:background .12s ease,border-color .12s ease,box-shadow .12s ease !important;
}
.group-option:hover{
  background:#f4f9fd !important;
  border-color:#9fc2e5 !important;
}
.group-option input[type="radio"]{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
}
.group-option span{
  pointer-events:none !important;
}
.group-option:has(input[type="radio"]:checked){
  background:#fff1a8 !important;
  border-color:#e3c45a !important;
  box-shadow:0 0 0 2px rgba(227,196,90,.10) !important;
}