/* ===== COMMON CSS FOR QUIZ REPO ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Roboto,sans-serif;background:#f5f9fe;color:#1a2639;line-height:1.6;padding:0 20px}
a{color:#1a4f8a;text-decoration:none}
a:hover{color:#0d2f5a;text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 15px}

/* HEADER */
header{background:linear-gradient(135deg,#0a2a4a,#1a4f8a);color:#fff;padding:18px 0;border-radius:0 0 20px 20px;margin-bottom:25px;box-shadow:0 4px 20px rgba(0,0,0,0.15)}
header .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
header .logo{font-size:26px;font-weight:800;letter-spacing:-0.5px}
header .logo span{color:#ffd966}
header nav{display:flex;gap:20px;flex-wrap:wrap}
header nav a{color:#fff;font-weight:600;padding:6px 14px;border-radius:8px;transition:background 0.2s}
header nav a:hover{background:rgba(255,255,255,0.2);text-decoration:none}

/* BREADCRUMB */
.breadcrumb{background:#e9f0f9;padding:10px 18px;border-radius:10px;margin-bottom:20px;font-size:14px;color:#2c3e50;box-shadow:inset 0 1px 3px rgba(0,0,0,0.05)}
.breadcrumb a{color:#1a4f8a;font-weight:600}
.breadcrumb a:hover{text-decoration:underline}

/* FOOTER */
footer{background:#0a1f33;color:#b0cce5;padding:28px 0 18px;border-radius:20px 20px 0 0;margin-top:40px;text-align:center}
footer a{color:#8bb3e0}
footer a:hover{color:#ffd966;text-decoration:none}
footer .footer-links{display:flex;justify-content:center;gap:25px;flex-wrap:wrap;margin-bottom:12px}
footer .footer-links a{color:#b0cce5;font-weight:500}

/* CARDS */
.card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 4px 18px rgba(26,79,138,0.08);margin-bottom:20px;border:1px solid #e5edf6}
.card h2,.card h3{color:#0a2a4a;margin-bottom:12px}

/* BUTTONS */
.btn{display:inline-block;padding:10px 28px;border-radius:10px;font-weight:700;cursor:pointer;border:none;transition:all 0.2s}
.btn-primary{background:#1a4f8a;color:#fff}
.btn-primary:hover{background:#0d2f5a;transform:translateY(-2px)}
.btn-secondary{background:#e9f0f9;color:#1a4f8a}
.btn-secondary:hover{background:#d4e0ed}

/* RESPONSIVE */
@media(max-width:768px){header .container{flex-direction:column;gap:12px;text-align:center}header nav{justify-content:center}body{padding:0 10px}.breadcrumb{font-size:13px;padding:8px 12px}}

/* =========================================================
   PREMIUM QUIZ UI — COMMON LAYER
   Existing quiz engine/data preserved
   ========================================================= */

:root{
  --quiz-primary:#2563eb;
  --quiz-primary-dark:#1d4ed8;
  --quiz-primary-soft:#eff6ff;
  --quiz-text:#172033;
  --quiz-muted:#64748b;
  --quiz-border:#e2e8f0;
  --quiz-surface:#ffffff;
  --quiz-bg:#f6f8fc;
  --quiz-success:#16a34a;
  --quiz-danger:#dc2626;
  --quiz-warning:#f59e0b;
}

/* ---------- PAGE ---------- */
body{
  background:
    radial-gradient(circle at 15% 0%,rgba(37,99,235,.07),transparent 28%),
    radial-gradient(circle at 90% 10%,rgba(14,165,233,.06),transparent 25%),
    var(--quiz-bg);
  color:var(--quiz-text);
}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(15,47,87,.96)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:0 0 18px 18px!important;
  margin-bottom:14px!important;
  box-shadow:0 6px 24px rgba(15,23,42,.16)!important;
}

.site-header .header-inner{
  min-height:62px;
}

.brand{
  font-size:21px!important;
  font-weight:800!important;
  letter-spacing:-.3px;
}

.top-nav{
  gap:5px!important;
}

.top-nav a{
  padding:7px 11px!important;
  border-radius:9px!important;
  font-size:13px;
}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{
  background:rgba(255,255,255,.82)!important;
  border:1px solid var(--quiz-border);
  box-shadow:0 2px 10px rgba(15,23,42,.04)!important;
  margin-bottom:12px!important;
}

/* ---------- MAIN QUIZ AREA ---------- */
#quiz-container{
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(226,232,240,.95)!important;
  border-radius:20px!important;
  box-shadow:
    0 10px 35px rgba(15,23,42,.08),
    0 2px 8px rgba(15,23,42,.04)!important;
  min-height:0!important;
}

/* ---------- QUIZ TOP BAR ---------- */
#question-number{
  color:var(--quiz-primary)!important;
  font-weight:800!important;
}

#timer{
  background:var(--quiz-primary)!important;
  color:#fff!important;
  border-radius:999px!important;
  padding:6px 13px!important;
  font-weight:800!important;
  box-shadow:0 3px 10px rgba(37,99,235,.22);
}

/* ---------- QUESTION ---------- */
#question-content{
  margin-top:8px;
}

#q-text-container{
  background:linear-gradient(135deg,#f8fbff,#f1f5ff)!important;
  border:1px solid #dbeafe!important;
  border-radius:16px!important;
  padding:18px!important;
  margin-bottom:14px!important;
}

#question-text{
  color:var(--quiz-text)!important;
  line-height:1.75!important;
  font-weight:700!important;
}

/* ---------- OPTIONS ---------- */
#options-container{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

#options-list{
  display:flex;
  flex-direction:column;
  gap:10px!important;
}

#options-list label,
#options-list button,
#options-list .option{
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease!important;
}

#options-list label:hover,
#options-list button:hover,
#options-list .option:hover{
  transform:translateY(-1px);
}

/* Common option-card patterns */
#options-list > div{
  border-radius:13px!important;
}

/* ---------- EXPLANATION ---------- */
#explanation-container{
  border-radius:14px!important;
  margin-top:14px!important;
}

/* ---------- NAVIGATION ---------- */
#prev-btn,
#submit-btn,
#next-btn{
  min-height:44px;
  border-radius:11px!important;
  font-weight:800!important;
  transition:all .18s ease!important;
}

#prev-btn:hover,
#submit-btn:hover,
#next-btn:hover{
  transform:translateY(-1px);
}

#submit-btn{
  box-shadow:0 5px 14px rgba(37,99,235,.18);
}

/* ---------- QUESTION PALETTE ---------- */
#question-palette{
  background:#fff;
  border:1px solid var(--quiz-border);
  border-radius:18px;
  box-shadow:0 6px 22px rgba(15,23,42,.05);
}

#question-palette button{
  min-width:34px;
  min-height:34px;
  border-radius:9px!important;
  font-weight:700;
  transition:all .15s ease;
}

#question-palette button:hover{
  transform:scale(1.04);
}

/* ---------- MODE BUTTONS ---------- */
button[onclick="openFlashcardMode()"],
button[onclick="openQuestionList()"]{
  border-radius:11px!important;
  font-weight:700!important;
}

/* ---------- MODALS ---------- */
#result-modal,
#analysis-modal,
#list-modal,
#flashcard-modal{
  z-index:2000;
}

#result-modal > div,
#analysis-modal > div,
#list-modal > div,
#flashcard-modal > div{
  border-radius:20px!important;
  box-shadow:0 20px 60px rgba(15,23,42,.22)!important;
  border:1px solid rgba(226,232,240,.9);
}

/* ---------- RESULT ---------- */
#result-title{
  font-weight:900!important;
}

#result-score{
  font-weight:900!important;
}

/* ---------- FOOTER ---------- */
footer{
  border-radius:18px 18px 0 0!important;
  margin-top:30px!important;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media(max-width:768px){

  body{
    padding:0 7px!important;
  }

  .site-header{
    margin-left:-7px!important;
    margin-right:-7px!important;
    border-radius:0 0 15px 15px!important;
  }

  .site-header .header-inner{
    min-height:56px;
    padding:8px 12px!important;
  }

  .brand{
    font-size:18px!important;
  }

  .top-nav{
    width:100%;
    justify-content:center;
    overflow-x:auto;
    flex-wrap:nowrap!important;
    scrollbar-width:none;
  }

  .top-nav::-webkit-scrollbar{
    display:none;
  }

  .top-nav a{
    white-space:nowrap;
    font-size:12px!important;
    padding:6px 9px!important;
  }

  .breadcrumb{
    margin-top:8px!important;
    padding:7px 10px!important;
    border-radius:10px!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  main{
    padding-left:4px!important;
    padding-right:4px!important;
  }

  #quiz-container{
    padding:12px!important;
    border-radius:16px!important;
  }

  #q-text-container{
    padding:14px!important;
    border-radius:13px!important;
  }

  #question-text{
    font-size:16px!important;
    line-height:1.7!important;
  }

  #options-list{
    gap:8px!important;
  }

  #options-list > div{
    padding:11px!important;
  }

  #prev-btn,
  #submit-btn,
  #next-btn{
    min-height:43px!important;
    padding:9px 12px!important;
    font-size:13px!important;
  }

  #question-palette{
    padding:12px!important;
    border-radius:15px!important;
  }

  #question-palette button{
    min-width:32px!important;
    min-height:32px!important;
    font-size:12px!important;
  }

  footer{
    margin-left:-7px!important;
    margin-right:-7px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
}

/* ---------- SMALL PHONES ---------- */
@media(max-width:380px){

  .brand{
    font-size:16px!important;
  }

  #question-text{
    font-size:15px!important;
  }

  #prev-btn,
  #submit-btn,
  #next-btn{
    font-size:12px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
}

/* ---------- ACCESSIBILITY ---------- */
button:focus-visible,
a:focus-visible,
input:focus-visible{
  outline:3px solid rgba(37,99,235,.35)!important;
  outline-offset:2px;
}

/* ---------- REDUCE MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}


/* =========================================================
   PREMIUM QUIZ OVERRIDE v2
   Overrides Tailwind + inline quiz styles
   ========================================================= */

/* QUIZ SHELL */
#quiz-container{
  min-height:0!important;
  height:auto!important;
  padding:20px!important;
  background:rgba(255,255,255,.96)!important;
  border:1px solid #e2e8f0!important;
  border-radius:20px!important;
  box-shadow:0 12px 40px rgba(15,23,42,.09)!important;
}

/* QUESTION HEADER */
#q-text-container{
  min-height:0!important;
  height:auto!important;
  padding:16px!important;
  margin-bottom:16px!important;
  border:1px solid #dbeafe!important;
  border-bottom:1px solid #dbeafe!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,#f8fbff,#f1f5ff)!important;
  overflow:visible!important;
}

#question-text{
  font-size:17px!important;
  font-weight:700!important;
  line-height:1.75!important;
  color:#172033!important;
}

/* OPTIONS — REMOVE OLD 380PX BOX */
#options-container{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  padding-right:0!important;
}

#options-list{
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  gap:11px!important;
}

/* OPTION BUTTON/LABEL UNIVERSAL OVERRIDE */
#options-list label,
#options-list button,
#options-list > div{
  border-radius:14px!important;
  transition:all .18s ease!important;
}

/* Tailwind option backgrounds should not dominate */
#options-list label:hover,
#options-list button:hover,
#options-list > div:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 5px 16px rgba(37,99,235,.10)!important;
}

/* NAVIGATION BUTTONS */
#prev-btn,
#submit-btn,
#next-btn{
  width:auto!important;
  min-width:110px!important;
  min-height:44px!important;
  padding:10px 18px!important;
  border-radius:12px!important;
  font-weight:800!important;
  box-shadow:none!important;
}

/* Keep semantic button colors, but make them premium */
#prev-btn{
  background:#f1f5f9!important;
  color:#334155!important;
}

#submit-btn{
  background:#dc2626!important;
  color:#fff!important;
}

#next-btn{
  background:#2563eb!important;
  color:#fff!important;
}

/* PALETTE */
#question-palette{
  max-height:300px!important;
  padding:12px!important;
  border-radius:15px!important;
  background:#f8fafc!important;
}

/* TIMER */
#timer{
  font-size:13px!important;
  font-weight:800!important;
  border-radius:999px!important;
  padding:6px 13px!important;
}

/* MOBILE */
@media(max-width:768px){

  #quiz-container{
    padding:12px!important;
    border-radius:16px!important;
  }

  #q-text-container{
    padding:13px!important;
    border-radius:13px!important;
  }

  #question-text{
    font-size:16px!important;
    line-height:1.7!important;
  }

  #options-container{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  #options-list{
    gap:9px!important;
  }

  #prev-btn,
  #submit-btn,
  #next-btn{
    min-width:0!important;
    flex:1!important;
    padding:9px 10px!important;
    font-size:13px!important;
  }

}

/* SMALL MOBILE */
@media(max-width:400px){

  #quiz-container{
    padding:10px!important;
  }

  #question-text{
    font-size:15px!important;
  }

  #prev-btn,
  #submit-btn,
  #next-btn{
    font-size:12px!important;
    padding:8px 7px!important;
  }

}


/* =========================================================
   PREMIUM QUIZ V3 — COMPACT CONTENT-DRIVEN LAYOUT
   ========================================================= */

/* Never allow the question area to stretch into empty space */
#quiz-container{
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  display:block!important;
}

/* Remove Tailwind flex-grow behavior */
#question-content{
  flex:none!important;
  flex-grow:0!important;
  height:auto!important;
  min-height:0!important;
}

/* Question itself should occupy only required space */
#q-text-container{
  flex:none!important;
  min-height:0!important;
  height:auto!important;
  margin-bottom:14px!important;
}

/* Options must be content-driven */
#options-container{
  flex:none!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  display:block!important;
}

#options-list{
  height:auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
}

/* Make option rows feel like real exam answer cards */
#options-list > div,
#options-list label,
#options-list button{
  min-height:54px!important;
  padding:13px 15px!important;
  border:1px solid #e2e8f0!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 2px 6px rgba(15,23,42,.035)!important;
  display:flex;
  align-items:center;
}

/* Hover */
#options-list > div:hover,
#options-list label:hover,
#options-list button:hover{
  border-color:#93c5fd!important;
  background:#f8fbff!important;
  box-shadow:0 5px 15px rgba(37,99,235,.08)!important;
}

/* Navigation should immediately follow content */
#prev-btn,
#submit-btn,
#next-btn{
  margin-top:0!important;
}

/* Reduce excessive spacing around navigation */
#quiz-container > div:last-child{
  margin-top:14px!important;
}

/* ---------- COMPACT MOBILE HEADER ---------- */
@media(max-width:768px){

  .site-header .header-inner{
    min-height:52px!important;
    padding-top:6px!important;
    padding-bottom:6px!important;
  }

  .brand{
    font-size:18px!important;
  }

  #quiz-container{
    margin-bottom:14px!important;
  }

  #question-content{
    flex:none!important;
  }

  #options-container{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  #options-list > div,
  #options-list label,
  #options-list button{
    min-height:50px!important;
    padding:11px 13px!important;
    border-radius:13px!important;
  }

}

/* ---------- VERY SMALL SCREENS ---------- */
@media(max-width:400px){

  #options-list > div,
  #options-list label,
  #options-list button{
    min-height:48px!important;
    padding:10px 11px!important;
  }

}



/* ARTIFACT QUIZ ADAPTER V1 */

/* =========================================================
   ARTIFACT QUIZ UI V1
   Production engine preserved — presentation layer only
   ========================================================= */

.artifact-quiz-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:18px;
  align-items:start;
  margin-bottom:18px;
}

.artifact-quiz-main{
  min-width:0;
}

.artifact-card{
  background:#fff;
  border:1px solid #e2eaf3;
  border-radius:22px;
  box-shadow:0 8px 25px rgba(49,88,120,.07);
}

.artifact-meta-card{
  padding:17px 20px;
  margin-bottom:18px;
}

.artifact-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.artifact-question-count{
  background:#e3f1ff;
  color:#0878d1;
  font-size:19px;
  font-weight:800;
  padding:8px 16px;
  border-radius:999px;
  white-space:nowrap;
}

.artifact-timer{
  background:#fff0f2;
  color:#f52e3d;
  border:1px solid #ffd5da;
  border-radius:13px;
  padding:7px 14px;
  font-weight:800;
  font-size:17px;
  white-space:nowrap;
}

.artifact-auto-next{
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid #d9e5f1;
  border-radius:13px;
  padding:8px 12px;
  font-weight:700;
  white-space:nowrap;
}

.artifact-auto-next input{
  display:none;
}

.artifact-check{
  background:#1675e5;
  color:#fff;
  border-radius:5px;
  width:21px;
  height:21px;
  text-align:center;
  line-height:21px;
}

.artifact-progress-track{
  height:9px;
  background:#dbe7f3;
  border-radius:99px;
  margin-top:15px;
  overflow:hidden;
}

#artifact-progress-bar{
  height:100%;
  width:2%;
  background:linear-gradient(90deg,#0878d1,#2675ed);
  border-radius:inherit;
  transition:.25s;
}

.artifact-progress-percent{
  text-align:right;
  font-weight:700;
  color:#173e72;
  margin-top:3px;
}

.artifact-question-card{
  padding:21px 22px;
}

.artifact-question-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.artifact-q-label{
  background:#dff0ff;
  color:#1474ca;
  border-radius:13px;
  padding:7px 15px;
  font-weight:800;
}

.artifact-question-tools{
  display:flex;
  gap:9px;
  color:#58718d;
  font-size:27px;
}

.artifact-question-tools span:last-child{
  color:#ff6572;
}

#q-text-container{
  border:0!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  margin:20px 0!important;
  overflow:visible!important;
}

#question-text{
  font-size:25px!important;
  line-height:1.55!important;
  font-weight:700!important;
  color:#17233d!important;
}

#options-container{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  padding:0!important;
}

#options-list{
  display:grid!important;
  gap:11px!important;
  width:100%!important;
}

#options-list > *{
  width:100%!important;
  min-height:70px!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  text-align:left!important;
  border:2px solid #e2e9f0!important;
  background:#fff!important;
  border-radius:17px!important;
  padding:14px 16px!important;
  color:#17233d!important;
  transition:.16s!important;
}

#options-list > *:hover{
  border-color:#91c8f6!important;
  background:#f8fcff!important;
  transform:translateY(-1px);
}

#options-list input{
  accent-color:#0878d1;
}



#explanation-container{
  margin-top:14px!important;
  padding:15px!important;
  background:#eff8ff!important;
  border-left:4px solid #0878d1!important;
  border-radius:0 12px 12px 0!important;
}

.artifact-explanation-title{
  margin:0 0 5px;
  font-weight:800;
  color:#075ca4;
}

.artifact-bottom-actions{
  display:grid;
  grid-template-columns:1fr 1.15fr 1fr;
  gap:10px;
  margin-top:15px;
}

.artifact-bottom-actions button{
  border:0;
  border-radius:15px;
  min-height:56px;
  font-weight:800;
  font-size:17px;
}

#prev-btn{
  background:#e8edf4!important;
  color:#75859a!important;
}

#submit-btn{
  background:#ff3444!important;
  color:#fff!important;
}

#next-btn{
  background:#0878d1!important;
  color:#fff!important;
}

.artifact-side-panel{
  padding:18px;
  position:sticky;
  top:92px;
}

.artifact-palette-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:20px;
  font-weight:800;
  color:#17233d;
  padding:4px 3px 14px;
}

.artifact-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:12px;
  color:#61728b;
  padding:6px 3px 14px;
}

.artifact-legend span{
  display:flex;
  align-items:center;
  gap:5px;
}

.artifact-legend i{
  width:14px;
  height:14px;
  border-radius:3px;
  background:#dfe6ef;
}

.artifact-legend .done{background:#1477df}
.artifact-legend .current{background:#fff;border:2px solid #f5b800}
.artifact-legend .skipped{background:#ff7180}

#question-palette{
  display:grid!important;
  grid-template-columns:repeat(5,1fr)!important;
  gap:8px!important;
  max-height:360px!important;
  overflow-y:auto!important;
  padding:2px!important;
}

#question-palette button{
  height:42px!important;
  border:0!important;
  border-radius:7px!important;
  background:#e8edf3!important;
  color:#263b55!important;
  font-size:16px!important;
}

#question-palette button.current{
  outline:2px solid #f5b800!important;
  outline-offset:1px;
  background:#fff!important;
}

.artifact-stats{
  margin-top:18px;
  background:#fbfdff;
  border:1px solid #e2eaf2;
  border-radius:17px;
  padding:15px;
}

.artifact-stats-title{
  display:flex;
  justify-content:space-between;
  font-size:17px;
  font-weight:800;
}

.artifact-stats-title b{
  color:#0878d1;
}

.artifact-stats-track{
  height:9px;
  background:#e0e8f1;
  border-radius:99px;
  margin:12px 0;
  overflow:hidden;
}

#artifact-stats-bar{
  width:0;
  height:100%;
  background:linear-gradient(90deg,#0878d1,#2675ed);
}

.artifact-stats-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.artifact-stats-cards > div{
  border-radius:12px;
  padding:9px;
  text-align:center;
  display:grid;
  gap:2px;
}

.artifact-stats-cards > div:nth-child(1){
  background:#e8faef;
  color:#15955a;
}

.artifact-stats-cards > div:nth-child(2){
  background:#fff0f2;
  color:#e83f50;
}

.artifact-stats-cards > div:nth-child(3){
  background:#fff8e5;
  color:#c48c00;
}

.artifact-stats-cards b{font-size:20px}
.artifact-stats-cards small{font-size:11px}
.artifact-stats-cards strong{font-size:18px}

.artifact-extra-actions{
  display:flex;
  gap:10px;
  margin:18px 0 0;
}

.artifact-extra-actions button{
  flex:1;
  min-height:50px;
  border:0;
  border-radius:14px;
  color:#fff;
  font-weight:800;
}

.artifact-extra-actions button:first-child{background:#4f46e5}
.artifact-extra-actions button:last-child{background:#059669}

@media(max-width:850px){

  .artifact-quiz-layout{
    grid-template-columns:1fr;
  }

  .artifact-side-panel{
    position:static;
  }

}

@media(max-width:560px){

  .artifact-meta-card{
    padding:12px;
    margin-bottom:12px;
  }

  .artifact-meta-row{
    gap:7px;
  }

  .artifact-question-count{
    font-size:15px;
    padding:7px 10px;
  }

  .artifact-timer{
    font-size:14px;
    padding:7px 9px;
  }

  .artifact-auto-next{
    font-size:12px;
    padding:7px 8px;
  }

  .artifact-question-card{
    padding:16px;
  }

  #question-text{
    font-size:20px!important;
    line-height:1.55!important;
  }

  #options-list{
    gap:10px!important;
  }

  #options-list > *{
    min-height:62px!important;
    padding:11px 12px!important;
    border-radius:14px!important;
  }

  #options-list > *::before{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    font-size:17px!important;
  }

  .artifact-bottom-actions{
    position:sticky;
    bottom:0;
    z-index:20;
    background:linear-gradient(transparent,#edf4fb 22%);
    padding:12px 0 5px;
    margin-top:8px;
  }

  .artifact-bottom-actions button{
    min-height:51px;
    font-size:15px;
  }

  .artifact-side-panel{
    padding:14px;
  }

  #question-palette{
    grid-template-columns:repeat(5,1fr)!important;
  }

  .artifact-extra-actions{
    margin-top:10px;
  }

}

@media(max-width:400px){

  .artifact-auto-next span:last-child{
    display:none;
  }

  .artifact-question-tools{
    font-size:24px;
  }

}


/* =========================================================
   ARTIFACT QUIZ UI V4 — TEST PAGE
   Presentation-only override.
   Existing quiz engine / IDs / JS untouched.
   ========================================================= */

.artifact-quiz-layout{
  width:100% !important;
  max-width:1180px !important;
  margin:18px auto 30px !important;
  padding:0 14px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 300px !important;
  gap:18px !important;
  align-items:start !important;
  background:transparent !important;
  box-sizing:border-box !important;
}

.artifact-quiz-main{
  min-width:0 !important;
  width:100% !important;
}

.artifact-card{
  box-sizing:border-box !important;
  width:100% !important;
  border-radius:18px !important;
  border:1px solid #dbe5f0 !important;
  background:#fff !important;
  box-shadow:0 5px 18px rgba(15,23,42,.07) !important;
}

.artifact-meta-card{
  padding:16px 18px !important;
  margin:0 0 14px !important;
  background:#f8fbff !important;
}

.artifact-meta-top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}

.artifact-question-count,
#question-number{
  display:inline-flex !important;
  align-items:center !important;
  min-height:36px !important;
  padding:7px 13px !important;
  border-radius:10px !important;
  background:#eaf2ff !important;
  color:#1769d2 !important;
  font-size:16px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
}

#timer{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:76px !important;
  min-height:36px !important;
  padding:6px 12px !important;
  border-radius:10px !important;
  background:#fff0f3 !important;
  color:#dc4964 !important;
  font-size:15px !important;
  font-weight:800 !important;
}

.artifact-auto-next{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  color:#334155 !important;
  font-size:14px !important;
  font-weight:700 !important;
}

#autoNextToggle{
  width:19px !important;
  height:19px !important;
  margin:0 !important;
  accent-color:#2563eb !important;
}

.artifact-progress-row{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:14px !important;
}

.artifact-progress-track{
  flex:1 !important;
  height:9px !important;
  overflow:hidden !important;
  border-radius:999px !important;
  background:#e7eef7 !important;
}

#artifact-progress-bar{
  display:block !important;
  height:100% !important;
  width:2% !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#2563eb,#38bdf8) !important;
  transition:width .25s ease !important;
}

#artifact-progress-percent{
  min-width:34px !important;
  text-align:right !important;
  color:#2563eb !important;
  font-size:13px !important;
  font-weight:800 !important;
}

/* Main question */
.artifact-question-card{
  padding:20px !important;
  margin:0 !important;
  background:#fff !important;
  border:1px solid #dbe5f0 !important;
  border-radius:18px !important;
  box-shadow:0 6px 22px rgba(15,23,42,.08) !important;
  min-height:0 !important;
}

.artifact-question-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-bottom:15px !important;
}

#artifact-q-label{
  display:inline-flex !important;
  align-items:center !important;
  padding:6px 11px !important;
  border-radius:9px !important;
  background:#eaf2ff !important;
  color:#1769d2 !important;
  font-size:13px !important;
  font-weight:800 !important;
}

.artifact-question-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

.artifact-question-actions button{
  width:34px !important;
  height:34px !important;
  padding:0 !important;
  border:1px solid #dbe5f0 !important;
  border-radius:9px !important;
  background:#f8fafc !important;
  color:#64748b !important;
  box-shadow:none !important;
}

#question-content{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  min-height:0 !important;
}

#q-text-container{
  min-height:0 !important;
  height:auto !important;
  margin:0 0 18px !important;
  padding:0 !important;
}

#question-text{
  margin:0 !important;
  padding:0 !important;
  font-size:20px !important;
  line-height:1.65 !important;
  font-weight:750 !important;
  color:#172033 !important;
  text-align:left !important;
}

#options-container{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

#options-list{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  gap:11px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

/* Existing JS-generated option elements */
#options-list > *,
#options-list button,
#options-list label,
#options-list .option,
#options-list .option-btn{
  box-sizing:border-box !important;
  width:100% !important;
  min-height:58px !important;
  margin:0 !important;
  padding:14px 16px !important;
  border:1px solid #e2e8f0 !important;
  border-radius:15px !important;
  background:#fff !important;
  color:#263247 !important;
  font-size:16px !important;
  line-height:1.45 !important;
  font-weight:500 !important;
  text-align:left !important;
  box-shadow:0 2px 7px rgba(15,23,42,.035) !important;
  cursor:pointer !important;
  transition:transform .12s ease, border-color .12s ease,
             background .12s ease, box-shadow .12s ease !important;
}

#options-list > *:hover,
#options-list button:hover,
#options-list label:hover,
#options-list .option:hover,
#options-list .option-btn:hover{
  border-color:#93c5fd !important;
  background:#f8fbff !important;
  transform:translateY(-1px) !important;
  box-shadow:0 5px 13px rgba(37,99,235,.09) !important;
}

/* Preserve selected/correct/wrong states when JS adds classes */
#options-list .selected,
#options-list .active,
#options-list [aria-selected="true"]{
  border-color:#2563eb !important;
  background:#eff6ff !important;
  color:#1d4ed8 !important;
}

#options-list .correct{
  border-color:#22c55e !important;
  background:#f0fdf4 !important;
  color:#166534 !important;
}

#options-list .wrong,
#options-list .incorrect{
  border-color:#ef4444 !important;
  background:#fef2f2 !important;
  color:#991b1b !important;
}

#explanation-container{
  margin:16px 0 0 !important;
  padding:14px 16px !important;
  border-radius:13px !important;
  border:1px solid #bfdbfe !important;
  background:#eff6ff !important;
}

#explanation-text{
  color:#334155 !important;
  font-size:15px !important;
  line-height:1.65 !important;
}

/* Navigation */
.artifact-nav{
  display:flex !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-top:16px !important;
}

.artifact-nav button,
#prev-btn,
#submit-btn,
#next-btn{
  min-height:45px !important;
  padding:10px 18px !important;
  border-radius:11px !important;
  border:1px solid #d7e1ec !important;
  font-size:14px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  box-shadow:none !important;
}

#prev-btn{
  background:#f8fafc !important;
  color:#475569 !important;
}

#submit-btn{
  background:#2563eb !important;
  color:#fff !important;
  border-color:#2563eb !important;
}

#next-btn{
  background:#0f9f6e !important;
  color:#fff !important;
  border-color:#0f9f6e !important;
}

/* Right panel */
.artifact-side-panel{
  position:sticky !important;
  top:15px !important;
  padding:16px !important;
  background:#fff !important;
  border:1px solid #dbe5f0 !important;
  border-radius:18px !important;
  box-shadow:0 6px 22px rgba(15,23,42,.07) !important;
}

.artifact-side-title{
  margin:0 0 12px !important;
  color:#172033 !important;
  font-size:16px !important;
  font-weight:800 !important;
}

#question-palette{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:7px !important;
  margin:0 !important;
  padding:0 !important;
}

#question-palette > *,
#question-palette button{
  min-width:0 !important;
  min-height:34px !important;
  padding:5px 3px !important;
  border:1px solid #dbe5f0 !important;
  border-radius:8px !important;
  background:#f8fafc !important;
  color:#475569 !important;
  font-size:12px !important;
  font-weight:700 !important;
}

.artifact-stats{
  margin-top:15px !important;
  padding-top:14px !important;
  border-top:1px solid #e5eaf1 !important;
}

.artifact-stat-row{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  padding:6px 0 !important;
  color:#475569 !important;
  font-size:13px !important;
}

.artifact-stat-row strong{
  color:#172033 !important;
}

.artifact-side-actions{
  display:grid !important;
  gap:8px !important;
  margin-top:14px !important;
}

.artifact-side-actions button{
  width:100% !important;
  min-height:40px !important;
  border:1px solid #dbe5f0 !important;
  border-radius:10px !important;
  background:#f8fafc !important;
  color:#334155 !important;
  font-size:13px !important;
  font-weight:750 !important;
}

/* Mobile */
@media (max-width: 820px){
  .artifact-quiz-layout{
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin-top:12px !important;
    padding:0 10px !important;
  }

  .artifact-side-panel{
    position:static !important;
    order:2 !important;
  }

  .artifact-quiz-main{
    order:1 !important;
  }

  .artifact-meta-card{
    padding:13px !important;
    border-radius:15px !important;
  }

  .artifact-question-card{
    padding:15px !important;
    border-radius:15px !important;
  }

  #question-text{
    font-size:18px !important;
    line-height:1.6 !important;
  }

  #options-list > *,
  #options-list button,
  #options-list label,
  #options-list .option,
  #options-list .option-btn{
    min-height:54px !important;
    padding:13px 14px !important;
    font-size:15px !important;
    border-radius:13px !important;
  }

  .artifact-nav{
    gap:7px !important;
  }

  .artifact-nav button,
  #prev-btn,
  #submit-btn,
  #next-btn{
    flex:1 !important;
    min-width:0 !important;
    padding:9px 8px !important;
    font-size:13px !important;
  }

  #question-palette{
    grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  }
}