*{box-sizing:border-box}
:root{
  --brand:#236a4b;
  --brand-dark:#154832;
  --brand-soft:#eaf4ee;
  --navy:#103c63;
  --blue:#2e78b8;
  --green:#37a64a;
  --orange:#ee8a22;
  --red:#d83b20;
  --purple:#6f39ac;
  --ink:#25313c;
  --muted:#65717d;
  --line:#d7dde2;
  --panel:#f7f9fa;
  --shadow:0 10px 30px rgba(25,39,52,.08);
}
html,body{margin:0;padding:0;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
body{min-height:100vh}
button,input,select{font:inherit}
a{text-decoration:none}
.top-strip{height:28px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:flex-end;padding:0 24px;font-size:12px}
.top-home{display:flex;gap:6px;align-items:center}
.site-header{min-height:112px;display:flex;align-items:center;justify-content:space-between;padding:16px 38px;border-bottom:1px solid #edf0f2;background:white}
.brand{display:flex;align-items:center;min-width:0}
.brand img{display:block;width:300px;max-width:32vw;height:auto;object-fit:contain}
.header-note{display:flex;align-items:center;gap:18px;color:#52606c}
.header-note-badge{border-left:1px solid #d6dcdf;padding-left:18px}
.header-note strong{display:block;color:#25313c;font-size:16px}
.header-note span{font-size:12px}
.language-pill{display:flex;align-items:center;gap:10px;border:0;border-radius:999px;background:linear-gradient(135deg,#445ecf,#8253b9);color:white;padding:11px 16px;box-shadow:0 7px 18px rgba(66,71,155,.22)}
.candidate-band{background:linear-gradient(120deg,#fafafa,#eef3ef);border-bottom:1px solid #e4e9e5;padding:9px 0}
.candidate-inner{max-width:1260px;margin:auto;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.candidate-card{display:flex;align-items:center;gap:12px}
.avatar{width:70px;height:70px;border:2px solid #616b72;background:#fff;display:grid;place-items:center}
.avatar-icon{width:37px;height:37px;border-radius:50%;background:#616161;position:relative;margin-top:-12px}
.avatar-icon:after{content:"";position:absolute;width:52px;height:30px;background:#616161;left:50%;transform:translateX(-50%);top:30px;border-radius:26px 26px 8px 8px}
.candidate-lines{font-size:14px;line-height:1.28}
.candidate-lines b{color:var(--orange)}
.timer-badge{background:#0796cf;color:white;border-radius:16px;padding:2px 10px;font-weight:700;letter-spacing:.3px}
.language-select{min-width:250px;background:#fff;border:1px solid #cdd4d8;padding:10px 12px;color:#3d4852}
.section-tabs{max-width:1260px;margin:10px auto 0;padding:0 18px;display:flex;gap:6px;overflow:auto;scrollbar-width:thin}
.section-tab{white-space:nowrap;border:1px solid #cbd4da;background:#f8fafb;padding:9px 14px;border-radius:6px 6px 0 0;color:#44505b;font-weight:700;font-size:13px;cursor:pointer}
.section-tab.active{background:var(--brand);color:white;border-color:var(--brand)}
.exam-shell{max-width:1260px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;padding:14px 18px 30px}
.question-panel{min-width:0}
.question-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #67727a;padding:16px 0 10px}
.question-title{font-size:18px;font-weight:700}
.question-jump{border:0;background:#0b67df;color:#fff;width:32px;height:32px;border-radius:50%;font-size:20px;display:grid;place-items:center;cursor:pointer}
.question-body{min-height:290px;padding:14px 6px 22px}
.question-text{font-size:17px;line-height:1.5;margin-bottom:18px;font-weight:600}
.option-text-list{display:grid;grid-template-columns:1fr 1fr;gap:9px 24px;margin:0 0 22px}
.option-text-line{font-size:15px;line-height:1.45;padding:7px 4px;color:#2f3942}
.option-text-line strong{color:#1d252c;margin-right:4px}
.answer-selector-title{font-size:12px;color:#65717d;margin:4px 0 10px;font-weight:700}
.answer-choice-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;border-top:1px solid #d9dee1;border-bottom:1px solid #d9dee1;padding:15px 7px}
.answer-choice{display:flex;align-items:center;gap:7px;cursor:pointer;min-height:32px;font-size:14px;border-radius:5px;padding:5px 7px}
.answer-choice:hover{background:#f5f8f6}
.answer-choice.selected{background:#e9f4ed;box-shadow:0 0 0 1px #8ab99b inset}
.answer-choice input{margin:0;width:15px;height:15px}
.question-footer{border-top:1px solid #808990;padding-top:10px}
.primary-actions{display:flex;flex-wrap:wrap;gap:6px}
.btn{border:1px solid transparent;padding:10px 14px;font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;cursor:pointer;transition:.15s}
.btn:hover{filter:brightness(.97)}
.btn-save{background:#51af56;color:#fff}
.btn-clear{background:#fff;border-color:#c9d0d4;color:#37414a}
.btn-review-save{background:#f1a33b;color:#fff}
.btn-review{background:#3679b6;color:#fff}
.navigation-row{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#f4f5f5;padding:10px 12px;margin-top:12px}
.nav-left{display:flex;gap:4px}
.btn-nav{background:#fff;border-color:#cdd4d8;color:#3f474f;padding:9px 14px}
.btn-submit{background:#4eb157;color:white;padding:10px 18px}
.side-panel{position:relative}
.legend{border:2px dotted #606b73;padding:15px 15px 11px;background:#fff}
.legend-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 12px}
.legend-item{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.35}
.legend-item.wide{grid-column:1/-1}
.status-icon{width:34px;height:34px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#222;flex:0 0 auto}
.s-not-visited{border:1px solid #aeb6bb;border-radius:6px;background:linear-gradient(#fafafa,#e3e3e3)}
.s-not-answered{background:var(--red);color:white;clip-path:polygon(0 15%,100% 0,100% 84%,0 100%)}
.s-answered{background:#20ad16;color:white;clip-path:polygon(0 15%,100% 0,100% 84%,0 100%)}
.s-review{background:radial-gradient(circle at 35% 35%,#8555cf,var(--purple) 65%,#4d1b82);color:white;border-radius:50%}
.s-answer-review{position:relative;background:radial-gradient(circle at 35% 35%,#8555cf,var(--purple) 65%,#4d1b82);color:white;border-radius:50%}
.s-answer-review:after{content:"✓";position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;background:#1acb48;color:white;font-size:10px;display:grid;place-items:center;border:1px solid white}
.palette-wrap{margin-top:18px}
.palette-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px;color:#5b6771}
.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;max-height:285px;overflow:auto;padding:2px}
.q-btn{height:34px;border:1px solid #aeb7bd;border-radius:6px;background:linear-gradient(#fff,#e3e5e6);font-size:12px;cursor:pointer;color:#26313a;position:relative}
.q-btn.current{outline:3px solid #222;outline-offset:1px}
.q-btn.status-not_answered{background:var(--red);color:#fff;border-color:#b72c15;clip-path:polygon(0 10%,100% 0,100% 90%,0 100%);border-radius:0}
.q-btn.status-answered{background:#20ad16;color:#fff;border-color:#17930e;clip-path:polygon(0 10%,100% 0,100% 90%,0 100%);border-radius:0}
.q-btn.status-review{background:radial-gradient(circle at 35% 35%,#8a5cce,var(--purple) 68%,#4d1b82);border-radius:50%;color:#fff;border:0}
.q-btn.status-answered_review{background:radial-gradient(circle at 35% 35%,#8a5cce,var(--purple) 68%,#4d1b82);border-radius:50%;color:#fff;border:0}
.q-btn.status-answered_review:after{content:"✓";position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;background:#21c84b;color:#fff;display:grid;place-items:center;font-size:9px;border:1px solid #fff}
.sidebar-collapse{position:absolute;left:-20px;top:207px;width:22px;height:40px;background:#111;color:#fff;border:0;font-size:22px;cursor:pointer}
.exam-shell.sidebar-hidden{grid-template-columns:minmax(0,1fr) 26px;gap:0}
.exam-shell.sidebar-hidden .side-panel{display:block;min-width:26px;width:26px}
.exam-shell.sidebar-hidden .side-panel > :not(.sidebar-collapse){display:none}
.exam-shell.sidebar-hidden .sidebar-collapse{left:2px;top:207px}
.exam-shell.sidebar-hidden .question-body{min-height:350px}
.instructions-wrap{max-width:1080px;margin:26px auto 42px;padding:0 18px}
.instruction-card{background:#fff;border:1px solid #dbe2e6;box-shadow:var(--shadow);padding:28px;border-radius:10px}
.instruction-card h2{text-align:center;margin:0 0 25px;color:#25313c}
.instruction-card h3{font-size:18px;text-decoration:underline;margin:26px 0 10px}
.instruction-card li{margin:8px 0;line-height:1.55}
.legend-inline{display:inline-flex;vertical-align:middle;margin:0 5px}
.notice{color:#c73434;font-weight:700;border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:14px 0;margin:18px 0}
.agree-box{background:#fafcfa;border:1px solid #d8e1dc;padding:15px;border-radius:8px;display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.proceed-wrap{text-align:center;margin-top:22px}
.proceed-btn{display:inline-block;min-width:230px;background:var(--brand);color:#fff;padding:13px 18px;border-radius:5px;font-weight:800;border:0;cursor:pointer}
.proceed-btn:disabled{opacity:.45;cursor:not-allowed}
.footer{background:#0d3558;color:white;text-align:center;padding:17px 10px;font-size:11px}
.modal-backdrop{position:fixed;inset:0;background:rgba(12,22,31,.6);display:none;align-items:center;justify-content:center;padding:20px;z-index:20}
.modal-backdrop.show{display:flex}
.modal{width:min(520px,100%);background:#fff;border-radius:10px;box-shadow:0 20px 70px rgba(0,0,0,.22);overflow:hidden}
.modal h3{margin:0;padding:18px 20px;background:var(--brand);color:white}
.modal-body{padding:22px;line-height:1.55}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 22px 20px}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:15px 0}
.summary-card{background:#f5f7f8;border:1px solid #dbe1e4;padding:12px;border-radius:8px;text-align:center}
.summary-card strong{display:block;font-size:22px;margin-bottom:3px}
.mobile-palette-toggle{display:none;position:fixed;right:14px;bottom:18px;z-index:15;border:0;background:var(--brand);color:#fff;border-radius:999px;padding:12px 15px;box-shadow:0 6px 18px rgba(0,0,0,.2);font-weight:700}
.result-wrap{max-width:760px;margin:48px auto;padding:0 18px}
.result-card{border:1px solid #d8e0e4;border-radius:12px;box-shadow:var(--shadow);padding:32px}
.result-card h1{margin-top:0;color:var(--brand-dark)}
.result-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0}
.result-meta div{background:#f6f9f7;padding:14px;border-radius:8px}
@media (max-width:900px){
  .site-header{padding:13px 18px;min-height:90px}
  .brand img{width:240px;max-width:42vw;height:auto}
  .header-note{display:none}
  .exam-shell{grid-template-columns:1fr;padding:10px 12px 90px}
  .side-panel{display:none;position:fixed;z-index:14;inset:100px 12px 72px;background:#fff;padding:12px;border:1px solid #d3dbdf;box-shadow:0 15px 50px rgba(0,0,0,.18);overflow:auto}
  .side-panel.mobile-open{display:block}
  .sidebar-collapse{display:none}
  .mobile-palette-toggle{display:block}
  .palette{max-height:none}
  .candidate-inner{padding:0 12px}
  .language-select{min-width:150px}
}
@media (max-width:620px){
  .top-strip{padding:0 12px}
  .site-header{align-items:flex-start}
  .brand img{width:190px;max-width:48vw;height:auto}
  .language-pill{padding:9px 12px;font-size:12px}
  .candidate-inner{align-items:flex-start}
  .candidate-card{gap:8px}
  .avatar{width:54px;height:54px}
  .avatar-icon{transform:scale(.75)}
  .candidate-lines{font-size:12px}
  .language-select{display:none}
  .option-text-list{grid-template-columns:1fr}
  .answer-choice-row{grid-template-columns:repeat(4,1fr);gap:6px;padding-left:0;padding-right:0}
  .answer-choice{justify-content:center;padding:7px 3px}
  .question-body{min-height:250px}
  .primary-actions .btn{flex:1 1 45%}
  .navigation-row{align-items:stretch}
  .btn-nav,.btn-submit{font-size:11px;padding:9px 10px}
  .instruction-card{padding:18px 15px}
  .instruction-card h2{font-size:21px}
  .result-meta{grid-template-columns:1fr}
}
/* Database/result version additions */
@media (max-width:700px){
  .result-meta[style]{grid-template-columns:repeat(2,1fr)!important}
}