:root{
  --od-green:#2b3320;
  --od-green-dk:#1c2216;
  --od-green-dker:#12160d;
  --khaki:#c7b787;
  --khaki-lt:#eee7d3;
  --sand:#f4efdf;
  --gold:#c9a227;
  --gold-lt:#e2c14f;
  --rust:#8a3324;
  --green-ok:#4c7a3d;
  --ink:#171712;
  --line:rgba(238,231,211,0.18);
  --line-dk:rgba(23,23,18,0.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--sand);
  color:var(--ink);
  font-family:'Barlow', sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
}
button{font-family:inherit; cursor:pointer;}
.hidden{display:none !important;}

/* ============ TOP BAR ============ */
.topbar{
  background:var(--od-green-dker);
  color:var(--sand);
  padding:14px 0;
  border-bottom:3px solid var(--gold);
}
.topbar .wrap{
  max-width:960px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{width:36px; height:36px;}
.brand-text .name{font-family:'Oswald'; font-weight:700; font-size:1.05rem; letter-spacing:0.05em;}
.brand-text .sub{font-family:'Barlow Condensed'; font-size:0.68rem; letter-spacing:0.14em; color:var(--khaki); text-transform:uppercase;}
.session-tag{
  font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:0.1em;
  font-size:0.78rem; color:var(--gold-lt); border:1px solid var(--line); padding:6px 12px;
}

/* ============ SHELL ============ */
.shell{max-width:760px; margin:0 auto; padding:40px 20px 90px;}
.card{
  background:#fff; border:1px solid var(--line-dk); padding:34px;
  box-shadow:0 4px 18px rgba(18,22,13,0.06);
}

/* ============ START SCREEN ============ */
.start-hero{
  background:var(--od-green); color:var(--sand); padding:44px 34px;
  position:relative; overflow:hidden; margin-bottom:26px;
}
.start-hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 300px 200px at 90% 10%, rgba(201,162,39,0.15), transparent 60%),
    radial-gradient(ellipse 260px 200px at 5% 90%, rgba(18,22,13,0.5), transparent 60%);
  pointer-events:none;
}
.start-hero .eyebrow{
  font-family:'Barlow Condensed'; letter-spacing:0.24em; text-transform:uppercase;
  font-size:0.78rem; color:var(--gold-lt); margin-bottom:12px; position:relative; z-index:1;
}
.start-hero h1{font-size:clamp(1.6rem,4vw,2.3rem); margin-bottom:14px; position:relative; z-index:1;}
.start-hero p{color:var(--khaki-lt); line-height:1.6; max-width:520px; position:relative; z-index:1;}

.info-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:24px 0;}
.info-box{
  border:1px solid var(--line-dk); padding:16px 18px; background:var(--khaki-lt);
}
.info-box b{
  display:block; font-family:'Oswald'; font-size:1.4rem; color:var(--od-green-dker);
}
.info-box span{
  font-family:'Barlow Condensed'; font-size:0.75rem; text-transform:uppercase;
  letter-spacing:0.06em; color:#5a5a48;
}

.field{margin-bottom:18px;}
.field label{
  display:block; font-family:'Barlow Condensed'; font-weight:600; text-transform:uppercase;
  letter-spacing:0.08em; font-size:0.8rem; color:#5a5a48; margin-bottom:6px;
}
.field input{
  width:100%; padding:12px 14px; border:1px solid var(--line-dk); font-size:1rem;
  font-family:'Barlow'; background:#fbf9f2;
}
.field input:focus{outline:2px solid var(--gold); outline-offset:1px;}

.section-list{list-style:none; display:grid; gap:10px; margin:20px 0 26px;}
.section-list li{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border:1px solid var(--line-dk); font-size:0.94rem;
}
.section-list li .n{
  font-family:'Barlow Condensed'; color:var(--gold); font-weight:700; margin-right:10px;
}
.section-list li .t{
  font-family:'Barlow Condensed'; font-size:0.8rem; color:#5a5a48; text-transform:uppercase;
}

.btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 30px;
  font-family:'Barlow Condensed'; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
  font-size:0.95rem; border-radius:2px; border:2px solid transparent; transition:transform .15s, background .2s;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--gold); color:var(--od-green-dker);}
.btn-primary:hover{background:var(--gold-lt);}
.btn-outline{background:transparent; border-color:var(--od-green); color:var(--od-green);}
.btn-outline:hover{background:var(--od-green); color:var(--sand);}
.btn-block{width:100%; justify-content:center;}
.btn:disabled{opacity:0.45; cursor:not-allowed; transform:none;}

/* ============ TEST SCREEN ============ */
.test-header{
  display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px;
  flex-wrap:wrap;
}
.test-header .sec-title{
  font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:0.08em;
  font-size:0.85rem; color:#5a5a48;
}
.timer{
  font-family:'Oswald'; font-size:1.3rem; color:var(--od-green-dker);
  background:var(--khaki-lt); border:1px solid var(--line-dk); padding:6px 16px;
  display:flex; align-items:center; gap:8px;
}
.timer.warn{color:var(--rust); border-color:var(--rust); animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.55;}}

.progress-track{
  height:6px; background:var(--khaki-lt); margin-bottom:26px; position:relative; overflow:hidden;
}
.progress-fill{
  height:100%; background:var(--gold); transition:width .3s ease;
}

.q-number{
  font-family:'Barlow Condensed'; color:var(--gold); font-weight:700; letter-spacing:0.06em;
  font-size:0.85rem; text-transform:uppercase; margin-bottom:10px;
}
.q-text{font-size:1.18rem; line-height:1.55; margin-bottom:26px; color:var(--ink);}

.options{display:grid; gap:12px; margin-bottom:30px;}
.option{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  border:1.5px solid var(--line-dk); cursor:pointer; transition:border-color .15s, background .15s;
}
.option:hover{border-color:var(--gold);}
.option.selected{border-color:var(--gold); background:#fdf7e6;}
.option .letter{
  width:30px; height:30px; flex-shrink:0; border-radius:50%; border:1.5px solid var(--od-green);
  display:flex; align-items:center; justify-content:center; font-family:'Oswald'; font-weight:600; font-size:0.9rem;
  color:var(--od-green);
}
.option.selected .letter{background:var(--gold); border-color:var(--gold); color:var(--od-green-dker);}
.option .txt{font-size:0.98rem; line-height:1.45;}

.nav-row{display:flex; justify-content:space-between; align-items:center; gap:12px;}
.nav-row .hint{font-family:'Barlow Condensed'; font-size:0.78rem; color:#8a8a72; text-transform:uppercase; letter-spacing:0.05em;}

/* ============ RESULT SCREEN ============ */
.result-hero{
  text-align:center; background:var(--od-green); color:var(--sand); padding:44px 30px; margin-bottom:24px;
  position:relative; overflow:hidden;
}
.result-hero .eyebrow{
  font-family:'Barlow Condensed'; letter-spacing:0.24em; text-transform:uppercase;
  font-size:0.78rem; color:var(--gold-lt); margin-bottom:14px;
}
.big-score{font-family:'Oswald'; font-size:clamp(3rem,10vw,4.6rem); line-height:1; color:var(--gold-lt);}
.big-score span{font-size:0.4em; color:var(--khaki-lt);}
.status-pill{
  display:inline-block; margin-top:14px; padding:8px 20px; font-family:'Barlow Condensed';
  text-transform:uppercase; letter-spacing:0.1em; font-size:0.85rem; font-weight:700;
}
.status-pill.pass{background:var(--green-ok); color:#fff;}
.status-pill.fail{background:var(--rust); color:#fff;}

.breakdown{display:grid; gap:10px; margin-bottom:26px;}
.bd-item{
  display:flex; justify-content:space-between; align-items:center; padding:14px 18px;
  border:1px solid var(--line-dk); background:#fff;
}
.bd-item .label{font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:0.04em; font-size:0.9rem;}
.bd-item .score{font-family:'Oswald'; font-size:1.2rem; color:var(--od-green-dker);}
.bd-bar-track{flex:1; height:8px; background:var(--khaki-lt); margin:0 16px; position:relative; overflow:hidden;}
.bd-bar-fill{height:100%; background:var(--gold);}

.review-item{
  border:1px solid var(--line-dk); padding:18px 20px; margin-bottom:12px; background:#fff;
}
.review-item .rq{font-size:1rem; margin-bottom:12px; font-weight:600;}
.review-item .ra{
  display:flex; gap:10px; align-items:flex-start; font-size:0.92rem; padding:8px 10px; margin-bottom:6px;
}
.review-item .ra.correct{background:#e9f3e4; color:#2c4a20;}
.review-item .ra.wrong{background:#f7e6e2; color:#7a2b1a;}
.review-item .expl{
  margin-top:10px; padding-top:10px; border-top:1px dashed var(--line-dk);
  font-size:0.88rem; color:#5a5a48; line-height:1.5;
}
.review-item .tag-cat{
  font-family:'Barlow Condensed'; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-bottom:6px; display:block;
}

.footer-note{
  text-align:center; font-family:'Barlow Condensed'; font-size:0.8rem; color:#8a8a72;
  letter-spacing:0.04em; margin-top:40px;
}

@media (max-width:600px){
  .info-grid{grid-template-columns:1fr;}
  .card{padding:22px;}
  .start-hero{padding:30px 22px;}
}