:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #18334d;
  background: #f5f7fa;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.study-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: max(12px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 12px max(24px, env(safe-area-inset-left));
  background: #fff;
  border-bottom: 1px solid #dce3eb;
}
.brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 120px; }
.brand-icon { width: 32px; height: 32px; color: #0e3a66; }
.brand strong { display: block; font-size: 18px; letter-spacing: -.4px; }
.brand span { display: block; margin-top: 2px; font-size: 12px; color: #637489; }
.study-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: #eef2f7; }
.study-tab { min-height: 44px; min-width: 96px; padding: 10px 20px; border: 0; border-radius: 9px; background: transparent; color: #526479; font-size: 14px; font-weight: 600; }
.study-tab:hover { color: #0e3a66; background: #e2e9f1; }
.study-tab[aria-selected="true"] { background: #0e3a66; color: #fff; box-shadow: 0 2px 5px #0e3a661a; }
.visibility-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 9px 12px; color: #526479; background: #fff; border: 1px solid #dce3eb; border-radius: 9px; font-size: 13px; white-space: nowrap; }
#hide-tabs { margin-left: auto; }
.visibility-button:hover { background: #eef2f7; color: #0e3a66; }
.visibility-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
button:focus-visible { outline: 3px solid #d79b23; outline-offset: 3px; }
.trainers { flex: 1; min-height: 0; position: relative; }
.trainer-panel { height: 100%; position: relative; }
.trainer-panel iframe { display: block; border: 0; width: 100%; height: 100%; background: #f5f7fa; }
.loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; text-align: center; background: #f5f7fa; color: #637489; pointer-events: none; }
.loading::before { content: ""; width: 24px; height: 24px; margin: auto; border: 3px solid #dce3eb; border-top-color: #0e3a66; border-radius: 50%; animation: spin 1s linear infinite; }
.show-tabs { position: fixed; bottom: max(16px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); z-index: 10; box-shadow: 0 3px 16px #18334d26; }
.no-script { position: fixed; top: 100px; left: 20px; right: 20px; text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) {
  .study-header { flex-wrap: wrap; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 12px 8px; }
  .brand-icon { width: 26px; height: 26px; }
  .brand strong { font-size: 16px; }
  .brand span { display: none; }
  .study-tabs { order: 3; width: 100%; }
  .study-tab { flex: 1; min-width: 0; padding: 9px 8px; }
  .visibility-button { font-size: 12px; }
}
@media (prefers-color-scheme: dark) {
  :root { color: #e2eaf3; background: #141b24; }
  .study-header { background: #172330; border-color: #304051; }
  .brand-icon { color: #a4c5e8; }
  .brand span { color: #a4b2c2; }
  .study-tabs { background: #233242; }
  .study-tab { color: #b6c5d6; }
  .study-tab:hover { background: #30465c; color: #fff; }
  .study-tab[aria-selected="true"] { background: #366a9d; }
  .visibility-button { background: #172330; border-color: #405267; color: #bdcad9; }
  .visibility-button:hover { background: #30465c; color: #fff; }
  .loading, .trainer-panel iframe { background: #141b24; }
}
@media (prefers-reduced-motion: reduce) { .loading::before { animation: none; } }