/* includes/css/otest.css: online test series pages (otest.php). Uses site buttons .btn-mark / .btn-line from nb.css. */
.ot { max-width: 860px; margin: 0 auto; padding: 18px 16px 48px; }
.ot h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 6px 0 12px; text-wrap: balance; }
.ot .eyebrow { display: inline-block; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: #6a5a2a; background: #fff3cf; padding: 3px 10px; border-radius: 99px; }
.ot-lead { font-size: 1.04rem; line-height: 1.6; color: #333; }
.ot-own { display: inline-block; color: #1d7a45; font-weight: 700; }
.ot .row-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.ot-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; border: 2px solid #14306b; border-radius: 14px; padding: 16px 18px; margin: 18px 0; background: #f4f7ff; }
.ot-bt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 320px; }
.ot-bt b { font-size: 1.1rem; color: #14306b; }
.ot-bt span { color: #444; font-size: .95rem; }
.ot-bt .price { margin-top: 4px; }
.ot-bt .now { font-size: 1.4rem; font-weight: 800; color: #14306b; }
.ot-bt .was { margin-left: 8px; color: #888; text-decoration: line-through; }
.ot-bt em { color: #b4451f; font-style: normal; font-weight: 700; margin-left: 6px; }
.ot-lockbox { border: 1px dashed #b9a46a; background: #fffaf0; border-radius: 12px; padding: 16px 18px; margin: 14px 0; }
.ot-lockbox > i { color: #b4451f; font-size: 1.3rem; }
.ot-chs { margin: 22px 0; }
.ot-ch { border: 1px solid #e3e7f0; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: #fff; }
.ot-ch h2 { font-size: 1.1rem; margin: 0 0 10px; display: flex; gap: 10px; align-items: center; }
.ot-ch h2 span { background: #14306b; color: #fff; border-radius: 8px; min-width: 30px; text-align: center; padding: 2px 6px; font-size: .9rem; }
.ot-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.ot-full { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.ot-set { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid #c9d3ea; border-radius: 10px; text-decoration: none; color: #14306b; background: #f7f9ff; font-variant-numeric: tabular-nums; }
.ot-set:hover { border-color: #14306b; background: #eef2ff; }
.ot-set small { font-size: .75rem; color: #1d7a45; font-weight: 600; }
.ot-lk { background: #fafafa; color: #666; border-color: #e2e2e2; }
.ot-lk small { color: #999; }
.ot-dn { background: #e9f8ef; border-color: #8fd1a8; }
.ot-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 18px 0; }
.ot-sub { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid #c9d3ea; border-radius: 12px; text-decoration: none; color: #14306b; background: #f7f9ff; }
.ot-sub span { color: #555; font-size: .9rem; }
.ot-sub em { font-style: normal; font-weight: 700; color: #b4451f; }
.ot-rules { line-height: 1.8; padding-left: 20px; }
.ot-best { color: #1d7a45; font-weight: 700; }
.ot-go { font-size: 1.1rem; padding: 10px 26px; }
.ot-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #14306b; color: #fff; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 14px rgba(0,0,0,.15); font-variant-numeric: tabular-nums; }
body.ot-on { padding-bottom: 70px; }
body.ot-on a.wa { display: none !important; }
.ot-bar #otTime { font-size: 1.25rem; font-weight: 800; }
.ot-bar .ot-warn { color: #ffcf5a; }
.ot-qs { display: flex; flex-direction: column; gap: 14px; }
.ot-q { border: 1px solid #e3e7f0; border-radius: 12px; padding: 14px 16px; background: #fff; }
.ot-case .ot-passage { background: #f6f8fc; border-left: 4px solid #14306b; padding: 10px 12px; border-radius: 6px; margin-bottom: 10px; line-height: 1.6; }
.ot-case .ot-part { border-top: 1px dashed #e3e7f0; padding-top: 10px; margin-top: 10px; }
.ot-case .ot-part:first-of-type { border-top: 0; }
.ot-tag { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; font-size: .78rem; color: #555; }
.ot-tag span { background: #f0f2f7; padding: 2px 8px; border-radius: 99px; }
.ot-tag .ot-pyq { background: #fff1d6; color: #8a5a00; font-weight: 700; }
.ot-n { background: #14306b !important; color: #fff; font-weight: 700; }
.ot-t { line-height: 1.6; }
.ot-t .ot-n { display: inline-block; border-radius: 99px; padding: 0 8px; margin-right: 6px; font-size: .8rem; }
.ot-t p, .ot-passage p { margin: 0 0 6px; }
.ot img { max-width: 100%; height: auto; border-radius: 6px; }
.ot-o { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ot-o label { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid #e3e7f0; border-radius: 8px; cursor: pointer; line-height: 1.45; }
.ot-o label:hover { background: #f7f9ff; }
.ot-o input { margin-top: 4px; flex: 0 0 auto; }
.ot-o span { min-width: 0; }
.ot-o label:has(input:checked) { border-color: #14306b; background: #eef2ff; }
.ot-o .ot-right { border-color: #1d7a45 !important; background: #e9f8ef !important; }
.ot-o .ot-wrong { border-color: #c0392b !important; background: #fdecea !important; }
.ot-fb { margin-top: 8px; padding: 8px 12px; background: #fbfbf6; border-radius: 8px; line-height: 1.6; }
.ot-a { font-weight: 700; margin: 0 0 4px; }
.ot-e p { display: inline; }
.ot-score { text-align: center; border: 2px solid #14306b; border-radius: 14px; padding: 18px; margin: 10px 0 18px; background: #f4f7ff; }
.ot-big { font-size: 2.6rem; font-weight: 800; color: #14306b; font-variant-numeric: tabular-nums; }
.ot-sum { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 10px 0; }
.ot-verdict { font-weight: 600; }
.ot-score .row-btns { justify-content: center; }
.ot-chap table { width: 100%; border-collapse: collapse; }
.ot-chap td { padding: 6px 8px; border-bottom: 1px solid #eee; }
.ot-weak td { color: #b4451f; }
@media (max-width: 480px) { .ot-q { padding: 12px; } .ot-buy { padding: 14px; } }