/* N5 mock exams (2026-10-19): exam bar and part dialog on the set pages, exam list/detail pages. N4 design colours. */
:root{--n5x-ink:#16354b;--n5x-muted:#607588;--n5x-line:#e4dcd3;--n5x-accent:#9a632d;--n5x-accent-dark:#7f5225;--n5x-bg:#fbf8f5;--n5x-good:#2f7d4f;--n5x-bad:#b4483f}
/* Exam bar: fixed at the bottom of the screen while a part runs (the site header and the set pages' sticky tools stay
   at the top). The page keeps room for it. */
.n5x-bar{position:fixed;left:0;right:0;bottom:0;z-index:1035;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));background:#fff7ee;border-top:1px solid #ecd9c4;color:var(--n5x-ink);font:14px/1.4 "Segoe UI",Arial,sans-serif;box-shadow:0 -2px 10px rgba(80,50,30,.1)}
html.n5x-active body{padding-bottom:64px}
html.n5x-active a.back-to-top.vnjp-back-to-top{bottom:84px!important}
.n5x-bar__title{font-weight:700}
.n5x-bar__timer{font-variant-numeric:tabular-nums;font-weight:700;font-size:16px;color:var(--n5x-accent-dark)}
.n5x-bar__timer.is-low{color:var(--n5x-bad)}
.n5x-bar__note{color:var(--n5x-muted);font-size:13px;flex:1 1 220px}
.n5x-bar [hidden],.n5x-button[hidden]{display:none!important}
.n5x-bar__submit{min-height:36px;padding:6px 14px;font-size:14px}
.n5x-bar__home{color:var(--n5x-accent-dark)!important;font-weight:600;text-decoration:underline}
/* While a part runs, the page's own timer, restart and review controls are hidden (the exam owns them). */
.n5x-active #k5-timer-start,.n5x-active #k5-countdown,.n5x-active #r5-exam-start,.n5x-active #r5-exam-timer,
.n5x-active #n5-timed,.n5x-active label[for="n5-timed"],.n5x-active #l5-exam-start{display:none!important}
.n5x-section-listening #l5-replay,.n5x-section-listening #l5-seek,.n5x-section-listening #l5-speed,.n5x-section-listening #l5-reload-audio{display:none!important}
.n5x-section-listening #l5-play-hd:disabled{opacity:.45;cursor:not-allowed}
/* Part dialog */
.n5x-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(22,53,75,.45)}
.n5x-modal__card{width:min(480px,100%);padding:24px;background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.2);color:var(--n5x-ink);font:15px/1.55 "Segoe UI",Arial,sans-serif}
.n5x-modal__title{margin:0 0 8px;font-size:20px;line-height:1.3}
.n5x-modal__text{margin:0 0 18px;color:#3b4d5c}
.n5x-modal__actions{display:flex;flex-wrap:wrap;gap:10px}
.n5x-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid #d8c9b8;border-radius:8px;background:#fff;color:var(--n5x-ink)!important;font-weight:600;text-decoration:none!important;cursor:pointer;font-size:15px}
.n5x-button:hover{background:#f8f2ec}
.n5x-button--primary{background:var(--n5x-accent);border-color:var(--n5x-accent);color:#fff!important}
.n5x-button--primary:hover{background:var(--n5x-accent-dark)}
.n5x-button:focus-visible{outline:3px solid #f0b46c;outline-offset:2px}
/* Exam list and exam page */
.n5x-page{max-width:1080px;margin:0 auto;padding:18px 16px 40px;color:var(--n5x-ink);font:15px/1.6 "Segoe UI",Arial,sans-serif}
.n5x-page--blank{min-height:calc(100vh - 105px);padding:0}
.n5x-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;margin:4px 0 16px;font-size:13px;color:var(--n5x-muted)}
.n5x-breadcrumb a{color:#6f4b31!important;text-decoration:none!important}
.n5x-breadcrumb a:hover{text-decoration:underline!important}
.n5x-breadcrumb svg{width:18px;height:18px;vertical-align:-3px}
.n5x-hero{position:relative;min-height:220px;margin:0 0 8px;padding:6px 0 20px}
.n5x-hero>*:not(.n4ui-hero-art){position:relative;z-index:1;max-width:58%}
.n5x-hero h1{margin:8px 0 10px;padding:2px 0 2px 18px;border-left:7px solid #cd2f39;font:600 36px/1.25 "Noto Serif","Times New Roman",Georgia,serif;color:#151515}
.n5x-hero p{margin:0;color:#3b4d5c}
.n5x-eyebrow{display:block;margin:0;color:#9a6243;font-size:12px;font-weight:750;letter-spacing:1.6px;text-transform:uppercase}
.n5x-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:20px 0 0;padding:0;list-style:none}
.n5x-card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:#fff;border:1px solid var(--n5x-line);border-radius:12px;box-shadow:0 1px 2px rgba(80,50,30,.04),0 6px 18px rgba(80,50,30,.05)}
.n5x-card h2{margin:0;font-size:18px}
.n5x-card h2 a{color:var(--n5x-ink)!important;text-decoration:none!important}
.n5x-card h2 a:hover{text-decoration:underline!important}
.n5x-card__state{color:var(--n5x-muted);font-size:14px}
.n5x-card__state.is-done{color:var(--n5x-good);font-weight:600}
.n5x-card__state.is-fail{color:var(--n5x-bad);font-weight:600}
.n5x-parts{width:100%;margin:18px 0 0;border-collapse:collapse;background:#fff;border:1px solid var(--n5x-line);border-radius:12px;overflow:hidden}
.n5x-parts th,.n5x-parts td{padding:10px 12px;border-bottom:1px solid var(--n5x-line);text-align:left;vertical-align:top}
.n5x-parts th{background:var(--n5x-bg);font-size:13px;color:var(--n5x-muted)}
.n5x-parts tr:last-child td{border-bottom:0}
.n5x-parts .n5x-done{color:var(--n5x-good);font-weight:600}
.n5x-rules{margin:18px 0 0;padding:14px 18px 14px 34px;background:#fff;border:1px solid var(--n5x-line);border-radius:12px}
.n5x-rules li{margin:4px 0}
.n5x-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0}
.n5x-result{margin:22px 0 0;padding:20px 22px;background:#fff;border:1px solid var(--n5x-line);border-radius:14px}
.n5x-result h2{margin:0 0 4px;font-size:22px}
.n5x-score{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:14px 0}
.n5x-score div{padding:12px 14px;background:var(--n5x-bg);border-radius:10px}
.n5x-score strong{display:block;font-size:26px;line-height:1.2}
.n5x-score span{color:var(--n5x-muted);font-size:13px}
.n5x-verdict{font-weight:700}
.n5x-verdict.is-pass{color:var(--n5x-good)}
.n5x-verdict.is-fail{color:var(--n5x-bad)}
.n5x-note{color:var(--n5x-muted);font-size:13px}
@media (max-width:720px){
  .n5x-hero{min-height:0;padding-bottom:12px}.n5x-hero>*:not(.n4ui-hero-art){max-width:none}.n5x-hero h1{padding-left:12px;border-left-width:5px;font-size:26px}
  .n5x-bar{padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px));font-size:13px;gap:2px 10px}.n5x-bar__note{display:none}
  .n5x-bar__title{flex:1 1 100%}html.n5x-active body{padding-bottom:84px}
  .n5x-parts .n5x-col-time{display:none}
}