/* Daily test page (uses the tokens and buttons from /learn/learn.css) */
.dt-top-board { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .88rem; text-decoration: none; color: var(--ink); border: 1.5px solid var(--line-2); border-radius: 999px; padding: 6px 12px; background: var(--surface); }
.dt-top-board:hover { border-color: var(--trick); }
@media (max-width: 560px) { .dt-top-board span { display: none; } }

.dt-head { margin-bottom: 22px; }
.dt-head .lx-lead strong { color: var(--ink); }
.dt-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.dt-card-title { font-size: 1.05rem; margin: 0 0 12px; }
.dt-start { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 860px) { .dt-start { grid-template-columns: 1fr; } }
.dt-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.dt-facts > div { background: var(--surface-2); border-radius: 12px; padding: 12px; text-align: center; }
.dt-facts strong { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.dt-facts strong small { font-size: .8rem; color: var(--muted); font-weight: 700; }
.dt-facts span { color: var(--muted); font-size: .8rem; font-weight: 700; }
@media (max-width: 520px) { .dt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dt-rules { margin: 0 0 16px; padding-left: 20px; color: var(--ink-2); line-height: 1.6; }
.dt-rules li + li { margin-top: 6px; }
.dt-start-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.lx-empty .dt-start-actions { justify-content: center; }
.dt-small { color: var(--muted); font-size: .85rem; margin: 10px 0 0; }
.dt-note { margin: 16px 0 0; }
.dt-more { display: inline-block; margin-top: 12px; font-weight: 700; }

/* leaderboard */
.dt-board { list-style: none; margin: 0; padding: 0; }
.dt-board li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.dt-board.compact li { grid-template-columns: 36px minmax(0, 1fr) auto auto; padding: 8px 4px; }
.dt-board li:last-child { border-bottom: 0; }
.dt-board li.you { background: var(--good-soft); border-radius: 10px; }
.dt-board li.gap { display: block; text-align: center; color: var(--muted); padding: 4px; border: 0; }
.dt-board .rk { font-weight: 800; font-size: 1.05rem; text-align: center; }
.dt-board .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-board .nm em { font-style: normal; font-size: .72rem; font-weight: 800; background: var(--good); color: #fff; border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.dt-board .sc strong { font-size: 1.05rem; }
.dt-board .sc small { color: var(--muted); }
.dt-board .cw { font-size: .85rem; white-space: nowrap; }
.dt-board .cw .ok { color: var(--good); } .dt-board .cw .no { color: var(--bad); }
.dt-board .tm { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.dt-board-empty { color: var(--muted); margin: 6px 0; }
.dt-board-few { margin: 6px 0; color: var(--ink-2); font-weight: 600; line-height: 1.55; }
.dt-board-you { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--good-soft); font-size: .92rem; }
@media (max-width: 560px) { .dt-board li { grid-template-columns: 34px minmax(0, 1fr) auto auto; } .dt-board .cw { display: none; } }
.dt-daynav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }

/* the exam */
.dt-exam.busy { opacity: .6; pointer-events: none; }
.dt-bar { position: sticky; top: 64px; z-index: 20; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 8px 10px; box-shadow: var(--shadow); margin-bottom: 16px; }
.dt-tabs { display: flex; gap: 6px; flex: 1; overflow-x: auto; }
.dt-tab { border: 1.5px solid var(--line-2); background: var(--surface); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; white-space: nowrap; color: var(--ink); }
.dt-tab small { color: var(--muted); font-weight: 700; margin-left: 4px; }
.dt-tab.on.phy { border-color: var(--phy); background: var(--phy-soft); }
.dt-tab.on.chem { border-color: var(--chem); background: var(--chem-soft); }
.dt-tab.on.math { border-color: var(--math); background: var(--math-soft); }
.dt-timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.2rem; padding: 6px 12px; border-radius: 10px; background: var(--surface-2); }
.dt-timer.low { background: var(--warn-soft); color: var(--warn); }
.dt-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .dt-body { grid-template-columns: 1fr; } .dt-bar { top: 60px; } }
@media (max-width: 600px) { .dt-bar { flex-wrap: wrap; } .dt-tabs { order: 3; flex-basis: 100%; } .dt-tab { font-size: .82rem; padding: 5px 8px; } .dt-timer { margin-left: auto; } }
.dt-q, .dt-palette, .dt-rq { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 20px; }
.dt-q { scroll-margin-top: 150px; }
.dt-palette { position: sticky; top: 140px; }
@media (max-width: 900px) { .dt-palette { position: static; } }
.dt-q-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.dt-q-n { font-weight: 800; font-size: 1.05rem; }
.dt-subj { font-size: .75rem; font-weight: 800; border-radius: 999px; padding: 3px 10px; }
.dt-subj.phy { background: var(--phy-soft); color: var(--phy); } .dt-subj.chem { background: var(--chem-soft); color: var(--chem); } .dt-subj.math { background: var(--math-soft); color: var(--math); }
.dt-type { color: var(--muted); font-size: .82rem; font-weight: 600; }
.dt-q-text { font-size: var(--read); line-height: 1.7; white-space: pre-wrap; overflow-x: auto; margin-bottom: 16px; }
.dt-options { display: grid; gap: 10px; }
.dt-opt { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 12px 14px; font: inherit; cursor: pointer; }
.dt-opt:hover { border-color: var(--math); }
.dt-opt .l { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--surface-2); }
.dt-opt .t { padding-top: 2px; overflow-x: auto; white-space: pre-wrap; }
.dt-opt.on { border-color: var(--math); background: var(--math-soft); }
.dt-opt.on .l { background: var(--math); color: #fff; }
.dt-num { display: grid; gap: 8px; font-weight: 700; max-width: 260px; }
.dt-num input { font: inherit; font-size: 1.2rem; padding: 10px 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink); }
.dt-num input:focus { outline: none; border-color: var(--math); }
.dt-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.dt-actions [data-act="next"] { margin-left: auto; }
.dt-actions button:disabled { opacity: .45; cursor: default; }

.dt-palette h3 { font-size: .85rem; margin: 14px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.dt-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
@media (max-width: 900px) { .dt-grid { grid-template-columns: repeat(auto-fill, 44px); } }
.dt-grid button { aspect-ratio: 1; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 800; cursor: pointer; position: relative; }
.dt-grid button.answered { background: var(--good); border-color: var(--good); color: #fff; }
.dt-grid button.skipped { border-color: var(--bad); color: var(--bad); }
.dt-grid button.marked { background: var(--key); border-color: var(--key); color: #fff; }
.dt-grid button.answered.marked::after { content: ''; position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 2px #fff; }
.dt-grid button.current { outline: 3px solid var(--ink); outline-offset: 1px; }
.dt-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: .75rem; color: var(--muted); font-weight: 600; }
.dt-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; border: 1.5px solid var(--line-2); vertical-align: -1px; }
.dt-legend .answered::before { background: var(--good); border-color: var(--good); }
.dt-legend .skipped::before { border-color: var(--bad); }
.dt-legend .marked::before { background: var(--key); border-color: var(--key); }

.dt-dialog { border: 0; border-radius: var(--radius); padding: 22px; max-width: 420px; width: calc(100% - 32px); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lift); }
.dt-dialog::backdrop { background: rgba(10, 12, 18, .45); }
.dt-dialog h2 { margin: 0 0 8px; }

/* results and review */
.dt-result { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.dt-split { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: .95rem; }
.dt-split th, .dt-split td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.dt-split th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.dt-strip { display: flex; flex-wrap: wrap; gap: 5px; }
.dt-strip span { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: #fff; }
.dt-strip .correct, .dot.correct { background: var(--good); }
.dt-strip .wrong, .dot.wrong { background: var(--bad); }
.dt-strip .skipped, .dot.skipped { background: var(--line-2); color: var(--ink-2); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 10px; vertical-align: -1px; }
.dt-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.dt-filter button { border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 14px; font-weight: 700; cursor: pointer; }
.dt-filter button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dt-filter a { margin-left: auto; }
.dt-review { display: grid; gap: 14px; }
.dt-rq.correct { border-left: 5px solid var(--good); } .dt-rq.wrong { border-left: 5px solid var(--bad); } .dt-rq.skipped { border-left: 5px solid var(--line-2); }
.dt-verdict { margin-left: auto; font-size: .78rem; font-weight: 800; }
.dt-verdict.correct { color: var(--good); } .dt-verdict.wrong { color: var(--bad); } .dt-verdict.skipped { color: var(--muted); }
.dt-options.review .dt-opt { cursor: default; }
.dt-options.review .dt-opt.right { border-color: var(--good); background: var(--good-soft); }
.dt-options.review .dt-opt.right .l { background: var(--good); color: #fff; }
.dt-options.review .dt-opt.chosen-wrong { border-color: var(--bad); background: var(--warn-soft); }
.dt-options.review .dt-opt.chosen-wrong .l { background: var(--bad); color: #fff; }
.dt-numans { font-size: 1.05rem; }
.dt-sol { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.dt-sol summary { font-weight: 800; cursor: pointer; }
.dt-sol div { white-space: pre-wrap; line-height: 1.7; margin-top: 8px; overflow-x: auto; }
.dt-revise { margin: 12px 0 0; font-size: .9rem; color: var(--muted); }
.dt-revise a { font-weight: 700; }
.dt-video { white-space: nowrap; }

/* share your score */
.dt-share { margin-top: 16px; }
.dt-share-copy { margin: 0 0 12px; color: var(--ink-2); line-height: 1.55; }
.dt-share-link { display: block; width: 100%; margin-top: 12px; font: inherit; font-size: .9rem; padding: 10px 12px; border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface-2); color: var(--ink); }
@media (max-width: 520px) { .dt-share .dt-start-actions .lx-btn { flex: 1 1 100%; } }

/* Sunday mock */
.dt-login-box { background: var(--trick-soft); border: 1.5px solid color-mix(in srgb, var(--trick) 35%, transparent); border-radius: 12px; padding: 14px; }
.dt-login-box p { margin: 0 0 10px; }
.dt-mock-promo { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-2); }
.dt-past { list-style: none; margin: 0; padding: 0; }
.dt-past li { display: flex; gap: 12px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.dt-past li:last-child { border-bottom: 0; }
.dt-past li span { color: var(--muted); font-weight: 700; min-width: 64px; }
.dt-past li strong small { color: var(--muted); }
.dt-past li a, .dt-past li > small { margin-left: auto; }
.dt-past li > small { color: var(--muted); }

.dt-q-head .dt-report { margin-left: auto; }
.dt-q-head .dt-verdict + .dt-report { margin-left: 0; }