/* Vocabulary access preview. No course content is fetched until verification. */
body.study-access-locked { overflow: hidden; }
body.study-access-locked > .shell,
body.study-access-locked > #auth-root { visibility: hidden !important; }
.study-access-root { position: fixed; inset: 0; z-index: 10000; color: #172b4d; }
.access-preview { position: absolute; inset: 0; overflow: hidden; background: #f6f8fc; pointer-events: none; user-select: none; }
.access-preview-sidebar { position: absolute; inset: 0 auto 0 0; width: 216px; padding: 30px 20px; background: white; border-right: 1px solid #e8edf5; }
.access-preview-brand { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 650; }
.access-preview-brand img { width: 43px; height: 43px; border-radius: 10px; }
.access-preview-brand small { display: block; margin-top: 3px; color: #8b97ab; font-size: 10px; letter-spacing: 1px; font-weight: 400; }
.access-preview-nav { margin-top: 48px; display: grid; gap: 10px; color: #71809a; }
.access-preview-nav > div { border-radius: 7px; padding: 14px; display: flex; align-items: center; gap: 13px; }
.access-preview-nav > div:first-child { background: #edf3ff; color: #2563eb; }
.access-preview-main { margin-left: 216px; }
.access-preview-topbar { height: 68px; padding: 22px 38px; border-bottom: 1px solid #e8edf5; background: white; color: #7a879e; font-size: 12px; }
.access-preview-content { padding: 32px 38px; max-width: 1230px; margin: auto; }
.access-preview-content h2 { margin: 0 0 8px; font-size: 27px; font-weight: 650; }
.access-preview-content > p { color: #8391a6; margin: 0 0 24px; }
.access-preview-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; margin-bottom: 23px; }
.access-preview-stat { background: white; border: 1px solid #e8edf5; border-radius: 8px; padding: 20px; display: flex; align-items: center; gap: 14px; }
.access-preview-stat i { width: 40px; height: 44px; background: #edf3ff; color: #5683da; border-radius: 6px; display: grid; place-items: center; }
.access-preview-stat:nth-child(2) i { background: #eafaf4; color: #60a690; }
.access-preview-stat:nth-child(3) i { background: #fff3e8; color: #d89a52; }
.access-preview-stat small { display: block; color: #8794a9; font-size: 12px; }
.access-preview-stat b { font-size: 25px; font-weight: 600; }
.access-preview-panel { padding: 24px; background: white; border: 1px solid #e8edf5; border-radius: 8px; margin-bottom: 20px; }
.access-preview-panel h3 { margin: 0 0 20px; font-size: 15px; font-weight: 600; }
.access-preview-panel h3 span { margin-right: 10px; color: #7890b2; background: #eef3fb; padding: 5px; font-size: 11px; }
.access-preview-filters { display: flex; gap: 12px; margin-bottom: 18px; }
.access-preview-filters span { padding: 12px; border: 1px solid #e0e6f0; border-radius: 6px; color: #8391a6; flex: 1; font-size: 12px; }
.access-preview-file { display: flex; align-items: center; gap: 16px; padding: 15px; margin: 10px 0; border: 1px solid #e5eaf3; border-radius: 6px; }
.access-preview-file svg { color: #497bda; width: 32px; height: 36px; }
.access-preview-file span { flex: 1; }
.access-preview-file small { display: block; color: #8c99af; margin-top: 5px; }
.access-preview-file b { color: #6d89b6; font-weight: 400; }
.access-preview-modes { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.access-preview-modes div { padding: 22px; border: 1px solid #e4eaf3; border-radius: 7px; text-align: center; }
.access-preview-modes b { display: block; color: #3469c8; font-size: 22px; margin-bottom: 10px; }
.access-overlay { position: absolute; inset: 0; padding: 28px 16px; display: flex; align-items: center; justify-content: center; overflow-y: auto; overscroll-behavior: contain; background: rgba(63,91,133,.18); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
.access-card { width: 480px; max-width: 100%; flex: none; margin: auto; padding: 30px; border: 1px solid rgba(255,255,255,.8); border-radius: 18px; background: #fff; box-shadow: 0 22px 70px #203b6422; text-align: center; }
.access-lock { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 18px; display: grid; place-items: center; background: #eaf1ff; color: #2563eb; }
.access-lock svg { width: 38px; height: 38px; stroke-width: 1.9; }
.access-badge { display: inline-block; padding: 3px 13px; border-radius: 20px; background: #edf3ff; color: #2563eb; font-size: 12px; line-height: 1.6; font-weight: 600; }
.access-card h1 { font-size: 28px; line-height: 1.4; margin: 15px 0 10px; letter-spacing: .5px; color: #142949; font-weight: 700; }
.access-description { color: #536884; font-size: 15px; line-height: 1.7; margin: 0; }
.access-subtitle { color: #8796ae; font-size: 13px; margin: 5px 0 24px; }
.access-form { text-align: left; }
.access-form label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.access-password-field { height: 52px; display: flex; gap: 12px; align-items: center; border: 1px solid #ccd8e9; border-radius: 8px; padding-left: 16px; color: #8293ab; }
.access-password-field:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px #2563eb15; }
.access-password-field input { padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; color: #24334d; flex: 1; width: 0; min-width: 0; height: 100%; font-size: 16px; }
.access-password-field input::placeholder { color: #9baac0; font-size: 14px; }
.access-password-field input:focus-visible { outline: 0; }
.access-password-field button { display: grid; place-items: center; height: 48px; min-width: 46px; color: #8193ad; border-radius: 6px; }
.access-message { color: #b44047; font-size: 12px; line-height: 1.6; margin: 7px 0 0; }
.access-message:empty { display: none; }
.access-submit { margin-top: 14px; display: flex; justify-content: center; align-items: center; gap: 14px; width: 100%; height: 51px; border-radius: 8px; background: #2563eb; color: white; font-size: 16px; font-weight: 600; }
.access-submit:hover { background: #1d56d7; }
.access-submit:disabled { opacity: .65; cursor: wait; }
.access-help { color: #8796ae; margin: 16px 0 24px; font-size: 12px; }
.access-back { display: inline-flex; align-items: center; gap: 8px; color: #2563eb; font-size: 14px; padding: 4px; border-radius: 4px; }
.access-back svg { width: 18px; height: 18px; }
.access-card button:focus-visible, .access-card a:focus-visible { outline: 3px solid #94b8ff; outline-offset: 3px; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .access-preview { filter: blur(9px); } }
@media(max-width:900px) { .access-preview-sidebar { width: 180px; } .access-preview-main { margin-left: 180px; } .access-preview-content { padding: 28px 22px; } .access-preview-stat { padding: 15px; } .access-preview-stat i { display: none; } }
@media(max-width:680px) {
  .access-preview-sidebar { inset: 0 0 auto; width: 100%; height: 125px; padding: 15px 18px; }
  .access-preview-brand { font-size: 18px; }.access-preview-brand img { width: 35px; height: 35px; }
  .access-preview-nav { margin-top: 12px; display: flex; overflow: hidden; gap: 5px; }
  .access-preview-nav>div { padding: 8px; font-size: 11px; white-space: nowrap; gap: 4px; }
  .access-preview-nav svg { width: 14px; }.access-preview-nav>div:nth-child(n+4) { display: none; }
  .access-preview-main { margin: 125px 0 0; }.access-preview-topbar { display: none; }
  .access-preview-content { padding: 22px 16px; }.access-preview-content h2 { font-size: 22px; }
  .access-preview-stats { grid-template-columns: repeat(2,1fr); gap: 10px; }.access-preview-panel { padding: 16px; }
  .access-preview-filters span:last-child { display: none; }.access-preview-file { padding: 12px; font-size: 12px; }
  .access-card { width: 420px; padding: 26px 22px; border-radius: 17px; }.access-card h1 { font-size: 25px; }
  .access-lock { width: 62px; height: 62px; border-radius: 15px; }.access-lock svg { width: 33px; height: 33px; }
  .access-description { font-size: 13px; }.access-subtitle { font-size: 12px; margin-bottom: 22px; }
  .access-help { margin-bottom: 20px; }
}
@media(max-height:600px) { .access-overlay { padding-top: 16px; padding-bottom: 16px; }.access-card { margin: auto; }.access-lock { width: 48px; height: 48px; }.access-lock svg { width: 28px; height: 28px; } }

.access-account { margin: 16px 0; padding: 9px 12px; border-radius: 8px; background: #f4f7ff; color: #647b9b; font-size: 12px; overflow-wrap: anywhere; }
.access-switch { margin: 14px 0 0; padding: 8px; border: 0; background: transparent; color: #426ec2; font: inherit; font-size: 12px; cursor: pointer; }