/* Тренажери, сторінка тренажерів і сторінка команди — у мові головного сайту
   (раунд 42): та сама шапка зі знаком, кнопки-«таблетки» (помаранчева головна дія,
   контурна друга), вкладки як у карти знань. Підключається ПІСЛЯ вбудованих стилів
   сторінки, тож перекриває їх без !important. */

/* ── шапка ── */
header.top{position:sticky;top:0;z-index:50;background:rgba(237,233,225,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(17,17,17,.14)}
header.top .wrap{display:flex;align-items:center;justify-content:flex-start;gap:24px;height:72px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;color:var(--ink);text-decoration:none}
.brand .mark{display:block;width:132px;height:auto}
.brand .mark path{fill:none;stroke:currentColor;stroke-width:20;stroke-linecap:butt;stroke-linejoin:miter}
.brand .badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--fog);border:1px solid rgba(17,17,17,.3);padding:3px 6px;white-space:nowrap}
nav.sp-nav{display:flex;gap:22px;align-items:center;margin-left:auto}
nav.sp-nav a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:6px 0;position:relative;white-space:nowrap}
nav.sp-nav a:not(.nav-tests):not(.btn)::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--terra);transition:width .3s}
nav.sp-nav a:not(.nav-tests):not(.btn):hover::after,nav.sp-nav a.cur::after{width:100%}
nav.sp-nav a.nav-tests{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1.5px solid var(--terra);border-radius:999px;color:var(--terra-ink);transition:.22s}
nav.sp-nav a.nav-tests::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--terra);flex-shrink:0;transition:.22s}
nav.sp-nav a.nav-tests:hover,nav.sp-nav a.nav-tests:focus-visible{background:var(--terra);color:#F7F5F0}
nav.sp-nav a.nav-tests:hover::before{background:#F7F5F0}
nav.sp-nav a.btn.top{padding:10px 18px;font-size:13.5px;letter-spacing:0;text-transform:none}
@media(max-width:860px){nav.sp-nav .hide-m{display:none}}
@media(max-width:560px){
  header.top .wrap{gap:12px;height:64px}
  .brand .mark{width:104px}.brand .badge{display:none}
  nav.sp-nav{gap:10px}nav.sp-nav .hide-s{display:none}
  nav.sp-nav a.nav-tests{padding:7px 11px}
  nav.sp-nav a.btn.top{padding:9px 14px;font-size:13px}
}

/* ── кнопки-«таблетки», як на головній ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;
  font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:14.5px;letter-spacing:0;text-transform:none;
  padding:13px 22px;background:var(--terra);border:1.5px solid var(--terra);color:#1A0A05;cursor:pointer;text-decoration:none;
  transition:background .22s,border-color .22s,color .22s,transform .22s,box-shadow .22s}
.btn:hover,.btn:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(17,17,17,.38)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.btn.sm{padding:8px 16px;font-size:13.5px}
.btn[disabled]{opacity:.5;cursor:default;transform:none;box-shadow:none}
.btn[disabled]:hover{background:var(--terra);border-color:var(--terra);color:#1A0A05}
.btn.ghost[disabled]:hover{background:transparent;color:var(--ink);border-color:rgba(17,17,17,.38)}
@media(prefers-reduced-motion:no-preference){
  .btn:not([disabled]):hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(17,17,17,.45)}
  .btn:not([disabled]):active{transform:translateY(0) scale(.97);box-shadow:none}
}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px}

/* ── вкладки сертифікацій — як у карти знань ── */
.tabs{gap:2px;padding:18px 0 0;border-bottom:1.5px solid rgba(17,17,17,.3)}
.tabs a{padding:10px 14px;border:0;border-bottom:2px solid transparent;margin-bottom:-1.5px;font-size:12px;letter-spacing:.14em;background:transparent}
.tabs a.on{border-color:transparent;border-bottom-color:var(--terra);background:transparent;color:var(--ink);font-weight:500}

/* ── варіанти, чипи, дрібні кнопки ── */
.opt .l{color:var(--terra-ink)}
.tr-chip{border-radius:999px;padding:3px 9px}
.mono-btn{border-bottom-color:var(--terra)}
input[type=date],input[type=number],select{border-radius:0}
@media(max-width:700px){
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -16px;padding:12px 16px 0}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{flex:none;padding:10px 12px}
}

/* Застосунок Google Play (раунд 50): клас html.sp-app ставить скрипт у <head> (без миготіння) і sim-auth.js.
   У застосунку нічого не продаємо й не показуємо цін; посилання на маркетинг головного сайту ховаємо, юридичні лишаємо. */
html.sp-app #ciny,html.sp-app #komandy,html.sp-app a[href$="#ciny"],html.sp-app a[href$="#komandy"],html.sp-app a[href$="#kupyty"],html.sp-app .sp-noapp,
html.sp-app .sp-nav a[href^="https://sproba.education"]:not(.sp-keep),
html.sp-app footer a[href^="https://sproba.education"]:not(.sp-keep):not([href*="/oferta"]):not([href*="/polityka"]):not([href*="/pryvatnist"]):not([href*="/povernennya"]):not([href*="/kontakty"]){display:none!important}
html.sp-app a.brand{pointer-events:none}