@charset "utf-8";

.jl-app{
  margin:20px 0 30px 0;
  font-size:16px;
  line-height:1.6;
  color:#222;
}

.jl-panel{
  background:#fff;
  border:1px solid #d9d9d9;
  border-radius:10px;
  padding:22px;
  margin:0 0 20px 0;
}

.jl-intro{
  margin:0 0 14px 0;
}

.jl-intro-text{
  margin:0 0 4px 0;
  font-size:14px;
  color:#666;
}

.jl-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(180px, 1fr));
  gap:16px;
  margin:0 0 16px 0;
}

.jl-field label{
  display:block;
  margin:0 0 6px 0;
  font-weight:700;
}

.jl-field select{
  width:100%;
  padding:10px 12px;
  border:1px solid #cfcfcf;
  border-radius:8px;
  font-size:15px;
  background:#fff;
  box-sizing:border-box;
}

.jl-options-row{
  margin:4px 0 0 0;
}

.jl-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#333;
  cursor:pointer;
}

.jl-check input{
  margin:0;
}

.jl-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}

.jl-btn{
  display:inline-block;
  padding:11px 18px;
  border-radius:8px;
  border:1px solid #111;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
}

.jl-btn-primary{
  background:#111;
  color:#fff;
}

.jl-btn-primary:hover{
  background:#000;
}

.jl-btn-secondary{
  background:#fff;
  color:#111;
}

.jl-btn-secondary:hover{
  background:#f6f6f6;
}

.jl-note{
  margin:14px 0 0 0;
  font-size:14px;
  color:#666;
}

.jl-best-score{
  margin:14px 0 0 0;
  padding:10px 12px;
  background:#f8f5ef;
  border:1px solid #ddd4c7;
  border-radius:8px;
  font-size:14px;
  color:#444;
}

.jl-new-best{
  margin:0 0 10px 0;
  font-weight:700;
  color:#2f7d32;
}

.jl-topbar{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  margin:0 0 14px 0;
}

.jl-topbar-item{
  padding:10px 12px;
  background:#f7f7f7;
  border:1px solid #e1e1e1;
  border-radius:8px;
  font-size:14px;
}

.jl-topbar-item strong{
  font-weight:700;
}

.logic-progress{
  width:100%;
  height:8px;
  background:#eee;
  border-radius:4px;
  margin:10px 0 18px 0;
  overflow:hidden;
}

#logic-progress-bar{
  height:100%;
  width:0%;
  background:#2f6fb5;
  transition:width .25s ease;
}

.jl-timer-wrap{
  margin:0 0 16px 0;
}

.jl-timer-label{
  margin:0 0 6px 0;
  font-size:14px;
  font-weight:700;
  color:#333;
}

.jl-timer-bar{
  width:100%;
  height:8px;
  background:#eee;
  border-radius:4px;
  overflow:hidden;
}

#jlTimerBar{
  height:100%;
  width:100%;
  background:#111;
  transition:width 1s linear;
}

#jlTimerBar.is-warning{
  background:#b42318;
}

.jl-question-card{
  padding:18px;
  background:#fcfcfc;
  border:1px solid #e6e6e6;
  border-radius:10px;
  margin:0 0 18px 0;
}

.jl-question-label{
  margin:0 0 10px 0;
  font-weight:700;
}

.jl-series{
  font-size:30px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:.2px;
}

.jl-series-item{
  display:inline-block;
}

.jl-choices{
  display:grid;
  grid-template-columns:repeat(2, minmax(220px, 1fr));
  gap:12px;
}

.jl-choice{
  min-height:54px;
  padding:14px 16px;
  border:1px solid #d6d6d6;
  background:#fff;
  border-radius:10px;
  text-align:left;
  cursor:pointer;
  font-size:16px;
  font-weight:600;
  transition:all .2s ease;
}

.jl-choice:hover{
  border-color:#999;
  background:#fafafa;
}

.jl-choice:disabled{
  cursor:default;
  opacity:1;
}

.jl-choice.is-correct{
  border-color:#2f7d32;
  background:#edf8ee;
}

.jl-choice.is-wrong{
  border-color:#b42318;
  background:#fff1f1;
}

.jl-feedback{
  margin:18px 0 0 0;
  padding:16px 18px;
  border-radius:10px;
  border:1px solid #dedede;
  background:#fafafa;
}

.jl-feedback-title{
  margin:0 0 8px 0;
  font-weight:700;
  font-size:18px;
}

.jl-explanation{
  margin:0;
}

.jl-explanation strong{
  display:inline-block;
  margin:0 0 6px 0;
}

.jl-result h3{
  margin-top:0;
}

.jl-result-score{
  font-size:20px;
  margin-bottom:8px;
}

@media screen and (max-width: 860px){
  .jl-grid{
    grid-template-columns:1fr;
  }

  .jl-topbar{
    grid-template-columns:1fr 1fr;
  }

  .jl-choices{
    grid-template-columns:1fr;
  }

  .jl-series{
    font-size:24px;
  }
}

@media screen and (max-width: 520px){
  .jl-panel{
    padding:16px;
  }

  .jl-topbar{
    grid-template-columns:1fr;
  }

  .jl-series{
    font-size:21px;
  }
}