/* WBGK Mock Tests – front-end. Everything is scoped under .wbmt-* so it never fights the theme. */
.wbmt-app, .wbmt-exam {
	--ink: #16202e; --muted: #5d6b7c; --line: #dfe5ec; --soft: #f4f6f9; --paper: #fff;
	--ok: #12805c; --bad: #c8362f; --mark: #6b4fbb; --warn: #b7791f; --skip: #cbd3dc;
	--accent: var(--wbmt-accent, #1f4fd8);
	--accent-soft: color-mix(in srgb, var(--accent) 9%, #fff);
	font-family: "Hind Siliguri", system-ui, -apple-system, "Segoe UI", "Noto Sans Bengali", sans-serif;
	color: var(--ink); font-size: 16px; line-height: 1.6; box-sizing: border-box;
}
.wbmt-app *, .wbmt-exam *, .wbmt-app *::before, .wbmt-exam *::before, .wbmt-app *::after, .wbmt-exam *::after { box-sizing: border-box; }
.wbmt-app button, .wbmt-exam button, .wbmt-app input { font: inherit; color: inherit; }
.wbmt-app a { color: var(--accent); }
.wbmt-app :focus-visible, .wbmt-exam :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, #fff); outline-offset: 2px; }
.wbmt-h { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.25; margin: 0 0 .5rem; font-weight: 700; letter-spacing: -.01em; }
.wbmt-h3 { font-size: 1.05rem; margin: 1.6rem 0 .6rem; font-weight: 600; }
.wbmt-kicker { margin: 0 0 .25rem; color: var(--accent); font-weight: 600; font-size: .95rem; }
.wbmt-hint, .wbmt-note { color: var(--muted); font-size: .9rem; margin: .75rem 0 0; }
.wbmt-note { background: var(--soft); border-left: 3px solid var(--warn); padding: .6rem .8rem; border-radius: 0 6px 6px 0; color: var(--ink); }
.wbmt-empty, .wbmt-boot { color: var(--muted); padding: 1rem 0; }
.wbmt-err { color: var(--bad); font-size: .92rem; min-height: 1.4em; margin: .5rem 0; }
.wbmt-link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }
.wbmt-rich img { max-width: 100%; height: auto; }
.wbmt-rich table { border-collapse: collapse; margin: .5rem 0; max-width: 100%; display: block; overflow-x: auto; }
.wbmt-rich th, .wbmt-rich td { border: 1px solid var(--line); padding: .35rem .6rem; text-align: left; }
.wbmt-rich th { background: var(--soft); }
.wbmt-rich p { margin: 0 0 .6rem; }
.wbmt-rich p:last-child { margin-bottom: 0; }

/* buttons */
.wbmt-btn { border: 1px solid var(--line); background: var(--paper); border-radius: 6px; padding: .55rem 1rem; cursor: pointer; font-weight: 500; line-height: 1.3; transition: background .15s, border-color .15s; }
.wbmt-btn:hover:not(:disabled) { border-color: var(--accent); }
.wbmt-btn:disabled { opacity: .5; cursor: not-allowed; }
.wbmt-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff !important; }
.wbmt-btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, #000); }
.wbmt-btn-wa { background: #1c8a4e; border-color: #1c8a4e; color: #fff !important; }
.wbmt-btn-wa:hover:not(:disabled) { background: #176f3f; }
.wbmt-btn-mark { border-color: var(--mark); color: var(--mark); }
.wbmt-btn-lg { padding: .8rem 1.2rem; font-size: 1.05rem; width: 100%; }
.wbmt-lang { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.wbmt-lang button { border: 0; background: var(--paper); padding: .35rem .8rem; cursor: pointer; font-size: .9rem; }
.wbmt-lang button.on { background: var(--ink); color: #fff; }

/* tables */
.wbmt-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.wbmt-table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 0; }
.wbmt-table th, .wbmt-table td { padding: .55rem .8rem; text-align: left; border: 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.wbmt-table th { font-size: .82rem; font-weight: 600; color: var(--muted); background: var(--soft); }
.wbmt-table tbody tr:last-child td { border-bottom: 0; }
.wbmt-table tr.me td { background: var(--accent-soft); }
.wbmt-table em { font-style: normal; font-size: .78rem; background: var(--accent); color: #fff; padding: 0 .4rem; border-radius: 3px; margin-left: .3rem; }

/* ---------- listing ---------- */
.wbmt-filters { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.2rem; }
.wbmt-search { width: 100%; max-width: 420px; border: 1px solid var(--line); border-radius: 6px; padding: .6rem .8rem; background: var(--paper); }
.wbmt-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.wbmt-chips button { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: .25rem .85rem; cursor: pointer; font-size: .92rem; }
.wbmt-chips button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.wbmt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.wbmt-card { display: flex; flex-direction: column; gap: .5rem; border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.15rem; text-decoration: none !important; color: var(--ink) !important; background: var(--paper); transition: border-color .15s; }
.wbmt-card:hover { border-color: var(--accent); }
.wbmt-card[hidden] { display: none; }
.wbmt-card-kicker { font-size: .85rem; color: var(--accent); font-weight: 600; }
.wbmt-card-title { font-size: 1.15rem; font-weight: 600; line-height: 1.35; }
.wbmt-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .55rem; color: var(--muted); font-size: .92rem; }
.wbmt-card-meta b { color: var(--ink); font-weight: 600; }
.wbmt-card-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--skip); }
.wbmt-card-foot { margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: .5rem; align-items: center; font-size: .85rem; color: var(--muted); }
.wbmt-card-go { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* ---------- start screen ---------- */
.wbmt-start { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .wbmt-start { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); } }
.wbmt-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: 1rem 0; }
@media (min-width: 560px) { .wbmt-facts { grid-template-columns: repeat(4, 1fr); } }
.wbmt-facts div { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; }
.wbmt-facts dt { font-size: .8rem; color: var(--muted); }
.wbmt-facts dd { margin: 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wbmt-seclist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; }
.wbmt-seclist li { display: flex; justify-content: space-between; padding: .5rem .8rem; border-bottom: 1px solid var(--line); }
.wbmt-seclist li:last-child { border-bottom: 0; }
.wbmt-ins { color: #2b3645; }
.wbmt-ins ul, .wbmt-ins ol { padding-left: 1.2rem; }
.wbmt-startbox { border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; background: var(--soft); position: sticky; top: 1rem; }
.wbmt-startbox .wbmt-h3 { margin-top: 0; }
.wbmt-startbox label, .wbmt-lbl { display: block; font-weight: 600; font-size: .92rem; margin: .8rem 0 .3rem; }
.wbmt-startbox input[type=text] { width: 100%; border: 1px solid #b9c3cf; border-radius: 6px; padding: .7rem .8rem; background: #fff; font-size: 1rem; }
.wbmt-below { margin-top: 1rem; display: grid; gap: 1rem; }

/* ---------- exam: full-screen so theme chrome never distracts ---------- */
html.wbmt-lock, html.wbmt-lock body { overflow: hidden !important; }
.wbmt-exam { position: fixed; inset: 0; z-index: 999999; background: var(--paper); display: flex; flex-direction: column; }
.wbmt-bar { display: flex; align-items: center; gap: .75rem; padding: .55rem .9rem; border-bottom: 1px solid var(--line); background: var(--paper); flex-wrap: wrap; }
.wbmt-leave { border: 1px solid var(--line); background: var(--paper); border-radius: 6px; width: 34px; height: 34px; cursor: pointer; line-height: 1; flex: none; }
.wbmt-bar-title { flex: 1 1 140px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wbmt-timer { display: flex; align-items: baseline; gap: .45rem; padding: .25rem .75rem; border: 1px solid var(--line); border-radius: 6px; font-variant-numeric: tabular-nums; }
.wbmt-timer b { font-size: 1.3rem; font-weight: 700; min-width: 3.6ch; text-align: right; }
.wbmt-timer-l { font-size: .8rem; color: var(--muted); }
.wbmt-timer.warn { border-color: var(--warn); background: #fdf6e7; }
.wbmt-timer.crit { border-color: var(--bad); background: #fdeceb; color: var(--bad); }
.wbmt-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; background: var(--soft); }
.wbmt-tabs[hidden] { display: none; }
.wbmt-tabs button { border: 0; border-bottom: 3px solid transparent; background: none; padding: .6rem 1.1rem; cursor: pointer; white-space: nowrap; font-weight: 500; }
.wbmt-tabs button small { margin-left: .4rem; color: var(--muted); font-size: .8rem; }
.wbmt-tabs button.on { border-bottom-color: var(--accent); color: var(--accent); background: var(--paper); font-weight: 600; }
.wbmt-body { flex: 1; display: flex; min-height: 0; }
.wbmt-qpane { flex: 1; overflow-y: auto; padding: 1.1rem 1.2rem 2rem; outline: 0; min-width: 0; }
.wbmt-qpane.has-passage { display: grid; gap: 1.4rem; grid-template-columns: 1fr; align-content: start; }
@media (min-width: 1000px) { .wbmt-qpane.has-passage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .wbmt-passage { position: sticky; top: 0; max-height: calc(100vh - 220px); overflow-y: auto; } }
.wbmt-passage { border: 1px solid var(--line); background: var(--soft); border-radius: 8px; padding: .9rem 1rem; align-self: start; }
.wbmt-passage-h { font-weight: 600; margin-bottom: .4rem; }
.wbmt-qcol { max-width: 820px; min-width: 0; }
.wbmt-qmeta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-bottom: .8rem; }
.wbmt-qno { font-weight: 700; font-size: 1.1rem; }
.wbmt-qno small { font-weight: 400; color: var(--muted); font-size: .85rem; }
.wbmt-qmarks b { color: var(--ok); }
.wbmt-qmarks em { font-style: normal; color: var(--bad); margin-left: .4rem; }
.wbmt-tag { background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 0 .5rem; font-size: .82rem; color: var(--muted); }
.wbmt-bm { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--muted); }
.wbmt-bm.on { color: var(--warn); font-weight: 600; }
.wbmt-q { font-size: 1.15rem; line-height: 1.65; margin-bottom: 1rem; }
.wbmt-opts { display: grid; gap: .6rem; }
.wbmt-opt { display: flex; align-items: flex-start; gap: .8rem; text-align: left; width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem; cursor: pointer; transition: border-color .12s, background .12s; }
.wbmt-opt:hover { border-color: #9fb0c4; }
.wbmt-opt-k { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-weight: 600; font-size: .9rem; background: var(--soft); }
.wbmt-opt-t { padding-top: .1rem; min-width: 0; font-size: 1.05rem; }
.wbmt-opt.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.wbmt-opt.on .wbmt-opt-k { background: var(--accent); border-color: var(--accent); color: #fff; }
.wbmt-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.wbmt-actions .wbmt-btn-primary { margin-left: auto; }

/* palette */
.wbmt-palette { width: 290px; flex: none; border-left: 1px solid var(--line); background: var(--soft); padding: 1rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
.wbmt-pal-head { display: flex; flex-direction: column; font-size: .9rem; }
.wbmt-pal-head span { color: var(--muted); }
.wbmt-pal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.wbmt-pb { position: relative; aspect-ratio: 1; border-radius: 6px; border: 1px solid transparent; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.s-nv { background: var(--paper); border: 1px solid var(--skip) !important; color: var(--ink); }
.s-na { background: #fbe4e2; border: 1px solid #efb3ae !important; color: #8f231d; }
.s-ans { background: var(--ok); color: #fff; }
.s-mk { background: var(--mark); color: #fff; border-radius: 50% !important; }
.s-mk-ans { background: var(--mark); color: #fff; border-radius: 50% !important; box-shadow: inset 0 -6px 0 -2px #4fd39f; }
.wbmt-pb.cur { outline: 3px solid var(--ink); outline-offset: 1px; }
.wbmt-pb.bm::after { content: "★"; position: absolute; top: -6px; right: -3px; font-size: .75rem; color: var(--warn); text-shadow: 0 0 2px #fff; }
.wbmt-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .6rem; font-size: .85rem; }
.wbmt-legend li { display: flex; align-items: center; gap: .4rem; }
.wbmt-legend i { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.wbmt-legend li:nth-child(3) i { border-radius: 50%; }
.wbmt-pal-submit { margin-top: auto; }
.wbmt-pal-toggle { display: none; }

@media (max-width: 859px) {
	.wbmt-bar-title { flex-basis: 100px; font-size: .95rem; }
	.wbmt-timer-l { display: none; }
	.wbmt-submit { display: none; }
	.wbmt-palette { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 72vh; border-left: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; transform: translateY(105%); transition: transform .22s ease; z-index: 5; box-shadow: 0 -10px 30px rgba(22, 32, 46, .15); }
	.wbmt-exam.pal-open .wbmt-palette { transform: none; }
	.wbmt-pal-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 0; border-top: 1px solid var(--line); background: var(--ink); color: #fff !important; padding: .75rem 1rem; font-weight: 600; cursor: pointer; }
	.wbmt-pal-toggle span { font-weight: 400; font-size: .85rem; opacity: .8; }
	.wbmt-qpane { padding: .9rem .9rem 1.5rem; }
	.wbmt-actions .wbmt-btn { flex: 1 1 calc(50% - .3rem); }
	.wbmt-actions .wbmt-btn-primary { margin-left: 0; }
	.wbmt-q { font-size: 1.08rem; }
}
@media (prefers-reduced-motion: reduce) { .wbmt-palette { transition: none; } }

/* modal + toast */
.wbmt-modal { position: absolute; inset: 0; background: rgba(22, 32, 46, .55); display: grid; place-items: center; padding: 1rem; z-index: 20; }
.wbmt-modal-box { background: var(--paper); border-radius: 12px; padding: 1.3rem; max-width: 640px; width: 100%; max-height: 90vh; overflow: auto; }
.wbmt-modal-box h3 { margin: 0 0 .6rem; font-size: 1.2rem; }
.wbmt-modal-act { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1rem; }
.wbmt-toast { position: absolute; left: 50%; bottom: 4.5rem; transform: translateX(-50%); background: var(--ink); color: #fff; padding: .55rem 1rem; border-radius: 6px; z-index: 30; }

/* ---------- result ---------- */
.wbmt-res-hero { border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem; background: var(--paper); }
.wbmt-back { margin-bottom: .6rem; display: block; }
.wbmt-res-name { color: var(--muted); margin: 0 0 .6rem; }
.wbmt-score { display: flex; align-items: baseline; gap: .6rem; margin: .4rem 0 .9rem; }
.wbmt-score b { font-size: clamp(3.2rem, 11vw, 5.2rem); line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.wbmt-score span { color: var(--muted); font-size: 1.1rem; }
.wbmt-strip { display: flex; flex-wrap: wrap; gap: 4px; }
.wbmt-strip i, .wbmt-strip-key i { width: 16px; height: 16px; border-radius: 3px; background: var(--skip); display: inline-block; }
.wbmt-strip i.c, .wbmt-strip-key i.c { background: var(--ok); }
.wbmt-strip i.w, .wbmt-strip-key i.w { background: var(--bad); }
.wbmt-strip-key { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); margin: .5rem 0 1.1rem; }
.wbmt-strip-key i { width: 11px; height: 11px; margin-left: .6rem; }
.wbmt-strip-key i:first-child { margin-left: 0; }
.wbmt-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: 0; }
@media (min-width: 640px) { .wbmt-kpis { grid-template-columns: repeat(4, 1fr); } }
.wbmt-kpis div { border: 1px solid var(--line); border-radius: 8px; padding: .55rem .8rem; }
.wbmt-kpis dt { font-size: .8rem; color: var(--muted); }
.wbmt-kpis dd { margin: 0; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wbmt-kpis dd small { font-size: .78rem; font-weight: 400; color: var(--muted); margin-left: .35rem; }
.wbmt-res-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.wbmt-rtabs { display: flex; gap: .2rem; margin: 1.4rem 0 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.wbmt-rtabs button { border: 0; background: none; padding: .65rem 1rem; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; font-weight: 500; }
.wbmt-rtabs button.on { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }
.wbmt-rbody { padding-top: .4rem; }
.wbmt-topics { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.wbmt-topic-h { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.wbmt-topic-h em { font-style: normal; color: var(--muted); font-size: .85rem; margin-left: .3rem; }
.wbmt-lv { font-size: .8rem; padding: 0 .55rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.wbmt-lv.weak { color: var(--bad); border-color: #efb3ae; background: #fdeceb; }
.wbmt-lv.avg { color: var(--warn); border-color: #ecd49c; background: #fdf6e7; }
.wbmt-lv.strong { color: var(--ok); border-color: #a9dcc8; background: #eaf7f1; }
.wbmt-bar-track { height: 8px; background: var(--soft); border-radius: 4px; overflow: hidden; margin: .35rem 0 .2rem; border: 1px solid var(--line); }
.wbmt-bar-track i { display: block; height: 100%; }
.wbmt-bar-track i.weak { background: var(--bad); }
.wbmt-bar-track i.avg { background: var(--warn); }
.wbmt-bar-track i.strong { background: var(--ok); }
.wbmt-topic-f { font-size: .85rem; color: var(--muted); }

/* solutions */
.wbmt-solbar { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; align-items: center; margin: 1rem 0; }
.wbmt-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.wbmt-pills button { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: .25rem .8rem; cursor: pointer; font-size: .9rem; }
.wbmt-pills button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.wbmt-pills small { opacity: .7; }
.wbmt-sol { border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1rem; background: var(--paper); }
.wbmt-sol-h { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-bottom: .7rem; }
.wbmt-sol-t { margin-left: auto; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.wbmt-bd { font-size: .85rem; font-weight: 600; padding: 0 .6rem; border-radius: 999px; }
.wbmt-bd.c { background: #eaf7f1; color: var(--ok); }
.wbmt-bd.w { background: #fdeceb; color: var(--bad); }
.wbmt-bd.s { background: var(--soft); color: var(--muted); }
.wbmt-passage-d { background: var(--soft); border-radius: 8px; padding: .5rem .8rem; margin-bottom: .8rem; }
.wbmt-passage-d summary { cursor: pointer; font-weight: 600; }
.wbmt-sopts { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .45rem; }
.wbmt-sopts li { display: flex; gap: .7rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .8rem; position: relative; }
.wbmt-sopts li > span.wbmt-rich { flex: 1; min-width: 0; }
.wbmt-sopts li em { font-style: normal; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.wbmt-sopts li.ok { border-color: var(--ok); background: #eaf7f1; }
.wbmt-sopts li.ok em, .wbmt-sopts li.ok .wbmt-opt-k { color: var(--ok); }
.wbmt-sopts li.ok .wbmt-opt-k { background: var(--ok); color: #fff; border-color: var(--ok); }
.wbmt-sopts li.bad { border-color: var(--bad); background: #fdeceb; }
.wbmt-sopts li.bad em { color: var(--bad); }
.wbmt-sopts li.bad .wbmt-opt-k { background: var(--bad); color: #fff; border-color: var(--bad); }
.wbmt-expl { margin-top: .9rem; padding: .8rem 1rem; background: var(--soft); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; }
.wbmt-expl > b { display: block; font-size: .85rem; margin-bottom: .2rem; }
.wbmt-me .wbmt-h { margin-bottom: .2rem; }
.wbmt-lb td:first-child { font-weight: 700; }

@media print { .wbmt-exam { display: none; } }

/* ---------- pass / paywall ---------- */
.wbmt-badge { display: inline-block; font-size: .78rem; font-weight: 600; line-height: 1.5; padding: 0 .55rem; border-radius: 999px; border: 1px solid; vertical-align: middle; }
.wbmt-badge.free { color: var(--ok); border-color: #a9dcc8; background: #eaf7f1; }
.wbmt-badge.pro { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, #fff); background: var(--accent-soft); }
.wbmt-card-kicker .wbmt-badge { margin-right: .35rem; }
.wbmt-gate .wbmt-badge, .wbmt-startbox > .wbmt-badge { margin-bottom: .5rem; }
.wbmt-gate-p { margin: .2rem 0 1rem; color: #2b3645; }
.wbmt-plans { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.wbmt-plans li { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: .7rem .85rem; background: var(--paper); }
.wbmt-plans li b { display: block; line-height: 1.3; }
.wbmt-plans li small { color: var(--muted); font-size: .82rem; }
.wbmt-price { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.wbmt-plans .wbmt-btn { text-decoration: none; text-align: center; }
@media (max-width: 420px) { .wbmt-plans li { grid-template-columns: 1fr auto; } .wbmt-plans li .wbmt-btn { grid-column: 1 / -1; } }
.wbmt-pass { display: inline-block; margin: 0 0 .6rem; padding: .2rem .75rem; border-radius: 999px; background: #eaf7f1; color: var(--ok); font-size: .88rem; font-weight: 600; border: 1px solid #a9dcc8; }
[data-me=pass] { margin: .6rem 0 1rem; }

/* ---------- account / auth ---------- */
.wbmt-h4 { font-size: .95rem; font-weight: 600; margin: 1.2rem 0 .5rem; }
.wbmt-auth-tabs { display: flex; gap: 0; margin-bottom: .9rem; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--paper); }
.wbmt-auth-tabs button { flex: 1; border: 0; background: none; padding: .5rem; cursor: pointer; font-weight: 500; }
.wbmt-auth-tabs button.on { background: var(--ink); color: #fff; }
.wbmt-fl { display: block; margin-bottom: .7rem; }
.wbmt-fl span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.wbmt-fl input { width: 100%; border: 1px solid #b9c3cf; border-radius: 6px; padding: .65rem .8rem; background: #fff; font-size: 1rem; }
.wbmt-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.wbmt-err.ok { color: var(--ok); }
.wbmt-auth form[hidden] { display: none; }
.wbmt-plans-ro li { grid-template-columns: 1fr auto; }
.wbmt-pn { display: inline-block; margin-left: .5rem; font-style: normal; font-size: .75rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 0 .5rem; }
.wbmt-who { margin-top: 0; }
.wbmt-me-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.wbmt-me-out { max-width: 520px; }
.wbmt-reset { max-width: 420px; }
.wbmt-me .wbmt-gate { padding: 0; background: none; border: 0; }