/* UK Driving Theory Mastery — public styles. */
.ukdtm-app {
	--green: #2f7d4f;
	--green-d: #246340;
	--blue: #3a6ea5;
	--ink: #1f2a37;
	--muted: #6b7280;
	--bg: #f6f8f7;
	--card: #ffffff;
	--line: #e3e8e5;
	--warn: #b8860b;
	--red: #c0392b;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hind Siliguri", sans-serif;
	color: var(--ink);
	max-width: 980px;
	margin: 0 auto;
	line-height: 1.5;
}
.ukdtm-app *, .ukdtm-app *::before, .ukdtm-app *::after { box-sizing: border-box; }
.ukdtm-bn { font-family: "Hind Siliguri", "Noto Sans Bengali", sans-serif; color: #475569; font-size: .95em; }
.ukdtm-en { color: var(--ink); }
.ukdtm-muted { color: var(--muted); font-size: .92rem; }
.ukdtm-h { font-size: 1.5rem; margin: 0 0 14px; color: var(--green-d); }
.ukdtm-h3 { font-size: 1.1rem; margin: 22px 0 10px; color: var(--ink); }
.ukdtm-intro { background: #eef5f0; border-left: 4px solid var(--green); padding: 10px 14px; border-radius: 6px; }

/* nav */
.ukdtm-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; border-bottom: 2px solid var(--line); padding-bottom: 8px; }
.ukdtm-nav-btn { background: none; border: none; padding: 8px 12px; border-radius: 8px 8px 0 0; cursor: pointer; font-size: .95rem; color: var(--muted); }
.ukdtm-nav-btn:hover { background: #eef2f0; color: var(--ink); }
.ukdtm-nav-btn.active { background: var(--green); color: #fff; font-weight: 600; }

/* buttons */
.ukdtm-btn { background: var(--green); color: #fff; border: none; border-radius: 8px; padding: 11px 20px; font-size: 1rem; cursor: pointer; transition: background .2s; }
.ukdtm-btn:hover { background: var(--green-d); }
.ukdtm-btn.small { padding: 8px 14px; font-size: .9rem; }
.ukdtm-btn.ghost { background: #fff; color: var(--green-d); border: 2px solid var(--green); }
.ukdtm-btn.ghost:hover { background: #eef5f0; }
.ukdtm-btn.warn { background: var(--warn); }
.ukdtm-btn.warn:hover { background: #946d09; }
.ukdtm-btn.disabled, .ukdtm-btn:disabled { opacity: .5; cursor: not-allowed; }

/* stat grid */
.ukdtm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 16px 0; }
.ukdtm-stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; text-align: center; }
.ukdtm-stat .num { display: block; font-size: 1.6rem; font-weight: 700; color: var(--green-d); }
.ukdtm-stat .lbl { display: block; font-size: .82rem; color: var(--muted); margin-top: 4px; }

.ukdtm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.ukdtm-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.ukdtm-select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }

/* progress bar */
.ukdtm-progressbar { background: #e6ece9; border-radius: 99px; height: 12px; overflow: hidden; margin: 8px 0; }
.ukdtm-progressbar.small { height: 7px; }
.ukdtm-progressbar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #4caf72); border-radius: 99px; }

/* cards / topics */
.ukdtm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ukdtm-topic { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.ukdtm-topic-name { font-weight: 600; }
.ukdtm-topic-meta { font-size: .85rem; color: var(--muted); }
.ukdtm-topic .ukdtm-btn { margin-top: auto; }

/* quiz */
.ukdtm-quiz-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ukdtm-quiz-progress { font-weight: 600; color: var(--green-d); }
.ukdtm-timer { font-variant-numeric: tabular-nums; background: #eef2f0; padding: 6px 12px; border-radius: 8px; font-weight: 600; }
.ukdtm-stage { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.ukdtm-qimg { display: block; max-width: 100%; max-height: 280px; margin: 12px 0; border-radius: 10px; }
.ukdtm-qimg.small { max-height: 130px; }
.ukdtm-bi .ukdtm-en { font-size: 1.15rem; font-weight: 600; }

.ukdtm-options { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ukdtm-opt { display: flex; align-items: center; gap: 12px; text-align: left; background: #f7faf8; border: 2px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; font-size: 1rem; transition: border-color .15s, background .15s; }
.ukdtm-opt:hover { border-color: var(--green); background: #eef5f0; }
.ukdtm-opt-letter { flex: 0 0 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: #e2e8e4; font-weight: 700; }
.ukdtm-opt-body { display: flex; flex-direction: column; gap: 2px; }
.ukdtm-optimg { max-height: 90px; border-radius: 6px; }
.ukdtm-opt.chosen { border-color: var(--blue); background: #eaf1f8; }
.ukdtm-opt.correct { border-color: var(--green); background: #e3f4e9; }
.ukdtm-opt.correct .ukdtm-opt-letter { background: var(--green); color: #fff; }
.ukdtm-opt.wrong { border-color: var(--red); background: #fdeceb; }
.ukdtm-opt.wrong .ukdtm-opt-letter { background: var(--red); color: #fff; }
.ukdtm-opt:disabled { cursor: default; }

.ukdtm-feedback { margin-top: 14px; }
.ukdtm-result { font-weight: 700; padding: 8px 0; }
.ukdtm-result.ok { color: var(--green); }
.ukdtm-result.no { color: var(--red); }
.ukdtm-expl { background: #f4f7f5; border-left: 4px solid var(--green); padding: 10px 14px; border-radius: 6px; margin-top: 6px; }
.ukdtm-quiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }

/* result cards */
.ukdtm-result-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px; text-align: center; }
.ukdtm-result-card.pass { border-color: var(--green); background: #eafaef; }
.ukdtm-result-card.fail { border-color: var(--warn); background: #fdf6e8; }
.ukdtm-bigscore { font-size: 2.6rem; font-weight: 800; color: var(--green-d); margin: 8px 0; }

/* review */
.ukdtm-review { display: flex; flex-direction: column; gap: 12px; }
.ukdtm-review-row { border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: 10px; padding: 12px 14px; background: var(--card); }
.ukdtm-review-row.no { border-left-color: var(--red); }
.ukdtm-correct-ans { color: var(--green-d); font-weight: 600; }
.ukdtm-your-ans { color: var(--red); }

/* flashcards */
.ukdtm-flash { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; text-align: center; }
.ukdtm-flash-img { min-height: 180px; display: flex; align-items: center; justify-content: center; font-size: 64px; }
.ukdtm-flash-img img { max-height: 240px; max-width: 100%; }
.ukdtm-flash-back { margin-top: 14px; font-size: 1.25rem; font-weight: 600; }

/* badges */
.ukdtm-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ukdtm-badge { background: #eef2f0; color: #9aa3ab; border-radius: 99px; padding: 6px 12px; font-size: .85rem; }
.ukdtm-badge.earned { background: #fdf3d6; color: #8a6d1a; font-weight: 600; }

/* certificates */
.ukdtm-cert { background: linear-gradient(160deg,#fffef8,#f3f7f3); border: 2px solid #d8c98b; border-radius: 14px; padding: 18px; text-align: center; }
.ukdtm-cert-icon { font-size: 40px; }
.ukdtm-cert-name { font-weight: 700; color: var(--green-d); margin: 6px 0; }

/* table */
.ukdtm-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 12px; overflow: hidden; }
.ukdtm-table th, .ukdtm-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); font-size: .92rem; }
.ukdtm-table thead th { background: var(--green); color: #fff; }
.ukdtm-table tbody tr:nth-child(odd) { background: #fafdfb; }

/* charts */
.ukdtm-chart { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; }

/* register / cards / forms */
.ukdtm-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; max-width: 640px; margin: 0 auto; }
.ukdtm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ukdtm-grid-2 label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--ink); }
.ukdtm-grid-2 input, .ukdtm-grid-2 select { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; }
.ukdtm-register-form .ukdtm-btn { margin-top: 16px; }
.ukdtm-form-msg { margin: 12px 0; font-size: .92rem; }
.ukdtm-form-msg.ok { color: var(--green); }
.ukdtm-form-msg.err { color: var(--red); }
.ukdtm-notice { background: #f4f7f5; border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.ukdtm-error { border-color: #f0c4c0; background: #fdeceb; color: var(--red); }

/* language selector */
.ukdtm-langbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: #eef5f0; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; }
.ukdtm-lang-label { font-weight: 600; color: var(--green-d); margin-right: 4px; }
.ukdtm-lang-btn { background: #fff; border: 2px solid var(--line); border-radius: 99px; padding: 6px 16px; cursor: pointer; font-size: .92rem; color: var(--ink); }
.ukdtm-lang-btn:hover { border-color: var(--green); }
.ukdtm-lang-btn.active { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }

/* free / paid */
.ukdtm-upgrade { display: flex; align-items: center; gap: 12px; background: #fff7e6; border: 1px solid #f0d79a; border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; }
.ukdtm-lock { font-size: 22px; }
.ukdtm-lock-note { font-size: .82rem; color: var(--warn); font-weight: 600; }
.ukdtm-topic.locked { background: #faf7f0; border-style: dashed; }
.ukdtm-topic.locked .ukdtm-topic-name { color: var(--muted); }

/* loading */
.ukdtm-loading { display: flex; align-items: center; gap: 8px; color: var(--muted); padding: 20px; }
.ukdtm-spinner { width: 18px; height: 18px; border: 3px solid #d6e0da; border-top-color: var(--green); border-radius: 50%; display: inline-block; animation: ukdtm-spin .8s linear infinite; }
@keyframes ukdtm-spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
	.ukdtm-grid-2 { grid-template-columns: 1fr; }
	.ukdtm-nav { overflow-x: auto; flex-wrap: nowrap; }
	.ukdtm-h { font-size: 1.3rem; }
}

/* --- My Subscription (v1.6.0) --- */
.ukdtm-sub-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.ukdtm-sub-table th, .ukdtm-sub-table td { padding: 12px 16px; border: 1px solid var(--line); font-size: .95rem; text-align: left; }
.ukdtm-sub-table th { width: 40%; background: #e8f3ec; color: var(--green-d); font-weight: 700; }
.ukdtm-sub-active { color: var(--green); font-weight: 600; }
.ukdtm-sub-warning { color: var(--warn); font-weight: 600; }
.ukdtm-sub-expired { color: var(--red); font-weight: 600; }