/* ==================== PC 专用布局 ==================== */

.layout{
  display:flex;
  gap:18px;
  align-items:flex-start;
}

.panel{
  background:#ffffff;
  border-radius:10px;
  border:1px solid #e5e7eb;
  padding:14px 16px 16px;
}

.panel-left{
  flex:0 0 360px;
}
.panel-right{
  flex:1 1 auto;
}

/* PC 两栏响应 */
@media (max-width:960px){
  .layout{
    flex-direction:column;
  }
  .panel-left{
    flex:1 1 auto;
  }
}

/* PC 夜间模式 */
body.dark-mode{
  background:#020617;
  color:#e5e7eb;
}
body.dark-mode .wrap{
  color:#e5e7eb;
}
body.dark-mode .panel{
  background:#020617;
  border-color:#1f2937;
}
body.dark-mode h1,
body.dark-mode h2{
  color:#e5e7eb;
}
body.dark-mode .tagline,
body.dark-mode .section-caption,
body.dark-mode .hint{
  color:#9ca3af;
}
body.dark-mode input,
body.dark-mode select{
  background:#020617;
  color:#e5e7eb;
  border-color:#4b5563;
}
body.dark-mode fieldset{
  background:#020617;
  border-color:#1f2937;
}
body.dark-mode .unit-row label{
  background:#020617;
  border-color:#4b5563;
  color:#e5e7eb;
}
body.dark-mode .quiz-question-card{
  background:#020617;
  border-color:#1f2937;
}
body.dark-mode #quizCanvas{
  background:#020617;
  border-color:#1f2937;
}
body.dark-mode #quizImage{
  background:#020617;
}
body.dark-mode .quiz-images{
  background:transparent;
}
body.dark-mode .quiz-footer button{
  background:#020617;
  border-color:#4b5563;
  color:#e5e7eb;
}
body.dark-mode .btn-ghost{
  background:#020617;
  border-color:#4b5563;
  color:#e5e7eb;
}
body.dark-mode .icon-toggle-btn,
body.dark-mode .icon-read-btn{
  background:#1f2937;
  color:#e5e7eb;
}