/* Tələbə kabineti və test səhifəsi */

.kabinet main.narrow { max-width: 560px; }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem; margin-top: 1.5rem; }
.auth-card h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: .5rem; }
.auth-card .form-control, .auth-card .form-select { background: var(--surface-2); border-color: var(--border); }
@media (max-width: 575px) { .auth-card { padding: 1.4rem 1.1rem; } }
.start-card .rules { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; }
.start-card .rules li { padding: .55rem 0; border-top: 1px dashed var(--border); }

.nav-user { display: flex; align-items: center; gap: .5rem; color: #e2e8f0; text-decoration: none; font-weight: 600; }
.avatar-sm, .avatar-lg { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.avatar-sm { width: 34px; height: 34px; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.6rem; flex: none; }

.k-hello { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.k-hello h1 { font-size: 1.6rem; font-weight: 800; margin: 0; }
.k-notice { display: flex; gap: 1rem; align-items: center; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--warn); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.k-section { font-size: 1.2rem; font-weight: 800; margin: 2rem 0 1rem; }
.k-details summary { cursor: pointer; font-weight: 600; color: var(--muted); }

.test-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.test-card { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: transform .15s, border-color .15s; }
.test-card.open { border-top: 4px solid var(--ok); }
a.test-card:hover { transform: translateY(-2px); border-color: var(--brand); color: var(--text); }
.tc-title { font-weight: 700; font-size: 1.1rem; }
.tc-meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; color: var(--muted); font-size: .88rem; }

/* ---------- Test ---------- */
.test-bar {
  position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); z-index: 10;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
  padding: .6rem .9rem; margin-bottom: 1rem;
}
.tb-title { font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-progress { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.tb-timer { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; padding: .15rem .6rem; border-radius: 8px; background: var(--surface-2); }
.tb-timer.warn { color: var(--warn); }
.tb-timer.danger { color: #fff; background: var(--bad); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .65; } }
.tb-save { font-size: .8rem; color: var(--muted); min-width: 0; }
.tb-save.error { color: var(--bad); font-weight: 600; }
.tb-save.ok { color: var(--ok); }
@media (max-width: 575px) { .tb-title { flex-basis: 100%; } .tb-save { flex: 1; } }

.test-layout { display: grid; grid-template-columns: 1fr 220px; gap: 1.25rem; align-items: start; }
.test-nav { position: sticky; top: calc(var(--nav-h) + 80px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.tn-title { font-weight: 700; margin-bottom: .6rem; }
.tn-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.tn-grid a { display: grid; place-items: center; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-decoration: none; font-weight: 600; font-size: .85rem; }
.tn-grid a.done { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (max-width: 991px) { .test-layout { grid-template-columns: 1fr; } .test-nav { display: none; } }

.q-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow); scroll-margin-top: calc(var(--nav-h) + 90px); }
.q-card.unsaved { border-color: var(--bad); }
.q-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.q-num { display: inline-grid; place-items: center; min-width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); font-weight: 800; }
.q-card.answered .q-num { background: var(--brand); color: #fff; }
.q-points { font-size: .8rem; color: var(--muted); }
.q-text { font-size: 1.05rem; font-weight: 500; margin-bottom: 1rem; white-space: normal; }
.q-img { display: block; max-width: 100%; max-height: 420px; border-radius: 12px; margin: 0 0 1rem; border: 1px solid var(--border); background: #fff; }
.q-options { display: grid; gap: .5rem; }
.q-opt { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .12s, background .12s; margin: 0; }
.q-opt:hover { border-color: var(--brand); }
.q-opt input { position: absolute; opacity: 0; pointer-events: none; }
.q-letter { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1.5px solid var(--border); font-weight: 700; font-size: .85rem; }
.q-opt:has(input:checked) { border-color: var(--brand); background: rgba(37, 99, 235, .08); }
.q-opt:has(input:checked) .q-letter { background: var(--brand); border-color: var(--brand); color: #fff; }
.q-opt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.q-clear { color: var(--muted); margin-top: .5rem; text-decoration: none; font-size: .82rem; }
.q-open { background: var(--surface-2); border-color: var(--border); max-width: 420px; }

/* Nəticə */
.result-hero { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; }
.ring { --c: var(--brand); width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(closest-side, var(--surface) 78%, transparent 80% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-2) 0); }
.ring.hi { --c: var(--ok); } .ring.mid { --c: var(--warn); } .ring.lo { --c: var(--bad); }
.ring b { font-size: 1.9rem; font-weight: 800; }
.result-stats { display: flex; gap: .6rem; flex-wrap: wrap; }
.result-stats div { background: var(--surface-2); border-radius: 12px; padding: .5rem .9rem; text-align: center; min-width: 70px; }
.result-stats b { display: block; font-size: 1.2rem; }
.result-stats span { font-size: .78rem; color: var(--muted); }
.result-stats .ok b, .open-review .ok { color: var(--ok); }
.result-stats .bad b, .open-review .bad { color: var(--bad); }
.result-stats .blank b { color: var(--warn); }
.q-card.review { border-left: 4px solid var(--border); }
.q-card.review.ok { border-left-color: var(--ok); }
.q-card.review.bad { border-left-color: var(--bad); }
.q-card.review.blank { border-left-color: var(--warn); }
.q-verdict { font-weight: 700; font-size: .9rem; }
.review.ok .q-verdict { color: var(--ok); } .review.bad .q-verdict { color: var(--bad); } .review.blank .q-verdict { color: var(--warn); }
.review .q-opt { cursor: default; }
.review .q-opt.correct { border-color: var(--ok); background: rgba(22, 163, 74, .1); }
.review .q-opt.correct .q-letter { background: var(--ok); border-color: var(--ok); color: #fff; }
.review .q-opt.wrong { border-color: var(--bad); background: rgba(220, 38, 38, .08); }
.review .q-opt.wrong .q-letter { background: var(--bad); border-color: var(--bad); color: #fff; }
.q-mine { margin-left: auto; font-size: .75rem; color: var(--muted); white-space: nowrap; }
.open-review { display: grid; gap: .3rem; }