/* TypingTestExam unified Pro visual system — presentation only. */
:root{
  --pro-black:#111510;
  --pro-black-2:#1c211a;
  --pro-black-3:#292d24;
  --pro-gold:#f6c95d;
  --pro-gold-soft:#ffe59d;
  --pro-gold-deep:#d8a928;
  --pro-cream:#f7f4eb;
  --pro-line:rgba(216,169,40,.34);
  --pro-shadow:0 12px 30px rgba(17,21,16,.12);
}

/* Consistent desktop logo-to-menu distance on every standard page. */
@media(min-width:961px){
  header.bar .wrap{
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    align-items:center;
    gap:20px;
    width:100%;
    max-width:1240px;
  }
  header.bar nav.top{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
  }
}

/* Main masthead and menus. */
.promo-strip{background:#0b0e0b;color:#d8ded9;border-bottom:1px solid rgba(246,201,93,.16)}
.promo-strip b,.promo-strip a{color:var(--pro-gold)}
header.bar{background:linear-gradient(135deg,rgba(14,18,14,.98),rgba(31,36,29,.98));border-bottom:1px solid rgba(246,201,93,.34);box-shadow:0 8px 24px rgba(11,14,11,.14)}
.logo{color:#fff!important}
.logo img{
  width:38px;
  height:38px;
  padding:3px;
  object-fit:contain;
  background:#fff9e9;
  border:1px solid var(--pro-gold-deep);
  border-radius:9px;
  box-shadow:0 5px 14px rgba(0,0,0,.28)
}
nav.top a,nav.top button,.nav-link{color:#e7ebe7}
nav.top>a:not(.pro-nav-link):hover,nav.top>button:hover,.nav-item>.drop-btn:hover,nav.top a.active{background:rgba(246,201,93,.12);color:var(--pro-gold-soft)}
.nav-drop,nav.top .nav-drop,.top .nav-drop{background:linear-gradient(160deg,#141914,#20251d);border:1px solid var(--pro-line);box-shadow:0 18px 44px rgba(0,0,0,.28)}
nav.top .nav-drop a,.top .nav-drop a{color:#e9edea;background:transparent;border-color:rgba(246,201,93,.1)}
nav.top .nav-drop a:hover,.top .nav-drop a:hover{padding-left:16px;background:rgba(246,201,93,.13);color:var(--pro-gold-soft)}

/* Secondary menu. */
.subnav{background:linear-gradient(90deg,#121612,#22271f);border-bottom:1px solid rgba(246,201,93,.28);box-shadow:0 7px 18px rgba(12,15,12,.11)}
.subnav-label{color:#c7cec8}
.subnav-scroll a{border-color:rgba(246,201,93,.3);background:rgba(255,255,255,.045);color:#e9edea}
.subnav-scroll a:hover,.subnav-scroll a:focus-visible{border-color:var(--pro-gold);background:rgba(246,201,93,.12);color:var(--pro-gold-soft);outline:none}
.subnav-scroll a.certificate-nav-link{background:var(--pro-black)!important;border-color:var(--pro-gold)!important;color:var(--pro-gold)!important}

/* Server-verified certificate eligibility reminders. */
.certificate-eligible-reminder{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;margin:0 0 18px;padding:24px;border:1px solid var(--pro-gold);border-radius:16px;background:linear-gradient(135deg,#10120f,#232016);color:#fff;box-shadow:0 18px 42px rgba(12,15,12,.18)}
.certificate-eligible-reminder h2{margin:7px 0;color:#fff;font-size:clamp(20px,2.5vw,28px)}.certificate-eligible-reminder p{margin:0;color:#e3ded0}.certificate-eligible-reminder small{display:block;margin-top:8px;color:#bdb6a5}.certificate-reminder-kicker{color:var(--pro-gold);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.certificate-reminder-action{border-color:var(--pro-gold)!important;background:var(--pro-gold)!important;color:#151712!important;font-weight:900!important;white-space:nowrap}
.certificate-reminder-modal{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px;background:rgba(5,8,6,.72);backdrop-filter:blur(4px)}.certificate-reminder-modal[hidden]{display:none}.certificate-reminder-dialog{position:relative;width:min(520px,100%);padding:30px;border:1px solid var(--pro-gold);border-radius:18px;background:linear-gradient(145deg,#12150f,#262116);color:#fff;box-shadow:0 28px 90px rgba(0,0,0,.45)}.certificate-reminder-dialog h2{margin:10px 34px 10px 0;color:#fff;font-size:clamp(24px,4vw,34px)}.certificate-reminder-dialog p{color:#ddd6c6}.certificate-reminder-expiry{margin:15px 0;padding:11px 13px;border:1px solid rgba(246,201,93,.35);border-radius:10px;background:rgba(246,201,93,.08);color:#f5d87f!important;font-weight:700}.certificate-reminder-close{position:absolute;right:14px;top:12px;width:36px;height:36px;border:1px solid rgba(246,201,93,.35);border-radius:50%;background:transparent;color:#f6c95d;font-size:24px;cursor:pointer}
@media(max-width:700px){.certificate-eligible-reminder{grid-template-columns:1fr}.certificate-eligible-reminder .btn{width:100%;justify-content:center}.certificate-reminder-dialog{padding:24px}}

/* Shared buttons, pills, quick access and prominent links. */
.btn.primary,.practice-now,.setup-actions .btn.primary,.result-motivation-account a{
  border:1px solid var(--pro-gold-deep)!important;
  background:linear-gradient(135deg,var(--pro-gold),var(--pro-gold-deep))!important;
  color:#151712!important;
  box-shadow:0 8px 20px rgba(183,137,19,.16);
}
.btn.primary:hover,.practice-now:hover,.setup-actions .btn.primary:hover,.result-motivation-account a:hover{background:var(--pro-gold-soft)!important;color:#111510!important;transform:translateY(-1px)}
.btn.ghost{border-color:rgba(28,33,26,.36);background:#fffdf8;color:var(--pro-black)}
.btn.ghost:hover{border-color:var(--pro-gold-deep);background:#fff9e8;color:#5d460a}
.btn.wa{border:1px solid var(--pro-gold)!important;background:var(--pro-black)!important;color:var(--pro-gold)!important}
.academy .acts .btn.ghost{
  border:1px solid var(--pro-gold)!important;
  background:#20251d!important;
  color:var(--pro-gold-soft)!important;
}
.academy .acts .btn.ghost:hover{
  background:#30362a!important;
  color:#fff4c8!important;
}
.quick-tests a,.exam-marquee a,.related a,.trust-row span,.exam-directory-filters button{
  border-color:var(--pro-line);background:#fffdf8;color:var(--pro-black-2);box-shadow:0 3px 10px rgba(17,21,16,.04)
}
.quick-tests a:hover,.exam-marquee a:hover,.related a:hover,.exam-directory-filters button:hover,.exam-directory-filters button.active{
  border-color:var(--pro-gold-deep);background:var(--pro-black);color:var(--pro-gold)
}
.card-guide,.feature-pill .fp-link,.blog-read,.breadcrumb a{color:#8b6506}

/* Cards and dashboard surfaces. */
.feature-pill,.testi-card,.exam-card,.tip,.pathway,.util-start,.practice-set,.faq-item,.auth-card,
.dash-card,.dash-stats>div,.dash-promo,.dash-offer,.progress-graph,.achievement,.leader-list li,.exam-best-list div{
  border-color:rgba(216,169,40,.25);box-shadow:0 7px 22px rgba(17,21,16,.055)
}
.feature-pill:hover,.exam-card:hover,.blog-tile:hover,.pathway:hover,.dash-offer:hover{border-color:var(--pro-gold-deep);box-shadow:var(--pro-shadow)}
.testi-check,.achievement.unlocked b{background:var(--pro-black);color:var(--pro-gold)}
.testi-tag,.blog-cat,.feedback-badge{background:rgba(216,169,40,.13);color:#805d07}
.dash-top{background:linear-gradient(135deg,#0e120e,#22271f);border-bottom-color:rgba(246,201,93,.32);box-shadow:0 8px 24px rgba(11,14,11,.15)}
.dash-top nav a{color:#e7ebe7}.dash-top nav a:hover{background:rgba(246,201,93,.12);color:var(--pro-gold-soft)}
.dash-hero{background:radial-gradient(circle at 92% 8%,rgba(246,201,93,.18),transparent 30%),linear-gradient(135deg,#fffdf8,#f7f0d8);border-color:rgba(216,169,40,.38)}
.dash-stats b,.exam-best-list b{color:#8d6709}
.daily-target{border-color:rgba(216,169,40,.42);border-left-color:var(--pro-gold-deep);background:#fff9e9}
.target-progress span,.graph-bar,.graph-day.today .graph-bar{background:linear-gradient(90deg,var(--pro-gold-deep),var(--pro-gold-soft))}
.dash-table th,.practice-table th{background:var(--pro-black);color:var(--pro-gold-soft)}
.dash-pill.ok{background:rgba(216,169,40,.16);color:#755400}
.special-practice-strip,.academy{background:radial-gradient(circle at 85% 5%,rgba(246,201,93,.15),transparent 27%),linear-gradient(135deg,#101510,#242a20);border-color:var(--pro-line)}

/* Practice setup, live-test dashboard and result area. */
.modal{border:1px solid rgba(246,201,93,.3)}
.modal-head,.cfg-bar{background:linear-gradient(135deg,#121612,#252a21)!important;border-color:var(--pro-line)!important;color:#fff}
.modal-head .tag,.cfg-bar-right{color:var(--pro-gold)}
.modal-head .x{color:#d8ded9}.modal-head .x:hover{background:rgba(246,201,93,.12);color:var(--pro-gold)}
.cfg{border-color:rgba(216,169,40,.3)}
.chip.on{background:var(--pro-black);border-color:var(--pro-gold-deep);color:var(--pro-gold)}
.tgl input{accent-color:var(--pro-gold-deep)}
.stat{border-color:rgba(216,169,40,.32);background:#fffdf8}.stat .v.live{color:#8a650a}
.exam-topbar{background:radial-gradient(circle at 50% 0,rgba(246,201,93,.12),transparent 35%),linear-gradient(90deg,#101410,#252a21);border-bottom:4px solid var(--pro-gold-deep);font-family:'Sora',sans-serif}
.exam-tools button{background:var(--pro-gold);border-color:var(--pro-gold-deep);color:#151712;box-shadow:0 2px 0 #8b690f}
.exam-candidate b{color:var(--pro-gold-soft)}
.exam-medal{border-color:var(--pro-gold);background:#fff9e4}
.practice-actual{background:#efede6}.practice-actual .modal{background:#efede6}
.practice-actual .passage{border-color:#353a31;box-shadow:0 5px 16px rgba(17,21,16,.12)}
.practice-actual #inputArea{background:#fff9df;border-color:var(--pro-gold-deep);box-shadow:0 0 0 3px rgba(246,201,93,.12),0 5px 16px rgba(17,21,16,.1)}
.practice-actual .run-row .btn.primary{background:linear-gradient(135deg,var(--pro-gold),var(--pro-gold-deep))!important;border-color:#775a0e!important;border-bottom-color:#4d3a08!important;color:#151712!important}
.practice-actual .exam-back-btn,.practice-actual .exam-change-passage-btn{border:1px solid var(--pro-gold-deep);background:var(--pro-black);color:var(--pro-gold)}
.practice-actual .exam-back-btn:hover,.practice-actual .exam-change-passage-btn:hover{background:var(--pro-black-3);color:var(--pro-gold-soft)}
.result-motivation,.result-share,.result-cert-promo{border-color:rgba(216,169,40,.34);background:linear-gradient(135deg,#fffdf8,#fff8df)}
.verdict.pass{background:rgba(216,169,40,.18);color:#755400}

/* Sharing box and icons use one coherent black/gold treatment. */
.site-share-inner{border-color:rgba(216,169,40,.38);background:linear-gradient(135deg,#141914,#242a20);box-shadow:0 9px 24px rgba(17,21,16,.14)}
.site-share-inner b{color:var(--pro-gold-soft)}.site-share-inner span{color:#c3cbc4}
.site-share-actions button,.share-btn{border-color:rgba(246,201,93,.5);background:#20251d;color:var(--pro-gold)}
.site-share-actions button:first-child,.share-native,.social-x-button,.share-x{border-color:var(--pro-gold-deep)!important;background:var(--pro-black)!important;color:var(--pro-gold)!important}
.site-share-actions button:hover,.share-btn:hover,.share-btn:focus-visible{border-color:var(--pro-gold);background:#30362a;color:var(--pro-gold-soft)}

/* Promotional rails and footer. */
.promo-rail .pr-card{border-color:var(--pro-line)!important;background:radial-gradient(circle at 100% 0,rgba(246,201,93,.12),transparent 34%),linear-gradient(145deg,#0f130f,#1c211a)!important;color:var(--pro-gold)!important}
.promo-rail .pr-title{color:var(--pro-gold)!important}.promo-rail .pr-sub,.promo-rail .pr-sub-light{color:#c8cec9!important}
.promo-rail .pr-link{border-color:rgba(246,201,93,.24)!important;background:rgba(255,255,255,.045)!important;color:var(--pro-gold)!important}
.promo-rail .pr-btn{border:1px solid var(--pro-gold)!important;background:var(--pro-gold)!important;color:#151712!important}
footer{background:radial-gradient(circle at 75% 0,rgba(246,201,93,.08),transparent 28%),linear-gradient(135deg,#0b0f0c,#161b15);border-top:1px solid rgba(246,201,93,.25)}
footer h4,footer .foot-logo span{color:var(--pro-gold-soft)}footer a{color:#c7cec8}footer a:hover{color:var(--pro-gold)}
footer .fine,.footer-legal-links{border-color:rgba(246,201,93,.16)!important}

/* Mobile menu keeps the same theme and remains touch-friendly. */
@media(max-width:960px){
  header.bar .wrap{display:flex;justify-content:space-between}
  .nav.top,.top{background:linear-gradient(160deg,#101410,#22271f);border-color:var(--pro-line)}
  .nav.top a,.nav.top button,.top a,.top button{color:#e9edea}
  .nav-item.has-drop,.top>.nav-link,.nav-drop a{border-color:rgba(246,201,93,.14)}
  .nav-drop,nav.top .nav-drop,.top .nav-drop{background:#181d17}
  nav.top .nav-drop a,.top .nav-drop a{color:#dce2dd}
}

@media(prefers-reduced-motion:reduce){.btn.primary:hover{transform:none}}