/*----------------------------------------------------------
	002 — APP SHELL + TOOLBAR
----------------------------------------------------------*/

/*----------------------------------------------------------
	YAHAN SIRF IS MODULE KA APNA HISSA HAI

	Template ka design aur theme — hero, badges, pills, steps,
	features, ads, cards, tables, toast aur poora app shell —
	assets/global-custom-web.css me hai (sections 001-013 aur
	101-122). Wo global pehle load hoti hai.

	Pehle har module un rules ki apni naql rakhta tha. Wo naqlein
	yahan se nikal di gayi hain: har wo rule jo global wale se
	hu-ba-hu ek tha, hata diya gaya, aur jo alag tha wo waisa hi
	chhora gaya — kyunke module ki CSS global ke BAAD load hoti
	hai aur us ka apna faisla jeetta hai.

	Naya rule likhne se pehle global me dekh len. Agar wahan
	pehle se hai, to yahan dobara na likhen.
----------------------------------------------------------*/
.tm-app{
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface);
	box-shadow: var(--wiz-shadow-sm);
	overflow: hidden;
	margin-bottom: 1.25rem;
}

.tm-bar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .85rem 1.1rem;
	border-bottom: 1px solid var(--wiz-border);
	background: var(--wiz-surface-2);
}

.tm-bar-brand{
	display: flex;
	align-items: center;
	gap: .7rem;
	min-width: 0;
}

.tm-bar-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: var(--wiz-radius-btn);
	font-size: 1.1rem;
	color: #fff;
	background: linear-gradient(135deg, var(--wiz-primary) 0%, #4f46e5 100%);
}

.tm-bar-title{
	font-family: var(--wiz-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wiz-text);
	line-height: 1.25;
}

.tm-bar-sub{
	font-size: .74rem;
	color: var(--wiz-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tm-bar-actions{
	display: flex;
	align-items: center;
	gap: .4rem;
	flex-shrink: 0;
}

.tm-bar-best{
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .28rem .6rem;
	border-radius: 999px;
	font-size: .74rem;
	color: #b45309;
	background: rgba(245, 158, 11, .12);
	border: 1px solid rgba(245, 158, 11, .28);
}

[data-bs-theme="dark"] .tm-bar-best{
	color: #fbbf24;
}

.tm-icon-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
	color: var(--wiz-text-muted);
	font-size: .9rem;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.tm-icon-btn:hover{
	color: var(--wiz-primary);
	border-color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 8%, transparent);
}

.tm-icon-btn:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: 2px;
}


/*----------------------------------------------------------
	003 — TABS

	Chhoti screen par ye qatar side me scroll hoti hai. Wrap karne se
	toolbar teen qataron ka ho jata tha aur typing area neeche chala
	jata tha.
----------------------------------------------------------*/

.tm-tabs-wrap{
	border-bottom: 1px solid var(--wiz-border);
	background: var(--wiz-surface);
}

.tm-tabs{
	display: flex;
	gap: .15rem;
	padding: .4rem .6rem 0;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.tm-tabs::-webkit-scrollbar{
	height: 4px;
}

.tm-tabs::-webkit-scrollbar-thumb{
	background: var(--wiz-border);
	border-radius: 999px;
}

.tm-tab{
	display: inline-flex;
	align-items: center;
	gap: .38rem;
	flex-shrink: 0;
	padding: .5rem .8rem;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	font-size: .82rem;
	font-weight: 600;
	color: var(--wiz-text-muted);
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.tm-tab:hover{
	color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 6%, transparent);
}

.tm-tab.is-active{
	color: var(--wiz-primary);
	border-bottom-color: var(--wiz-primary);
}

.tm-tab:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: -2px;
}

.tm-tab-emoji{
	font-size: .95rem;
	line-height: 1;
}

.tm-body{
	padding: 1.25rem;
}

.tm-view{
	display: none;
}

.tm-view.is-active{
	display: block;
}

.tm-view-intro{
	font-size: .88rem;
	line-height: 1.7;
	color: var(--wiz-text-muted);
	max-width: 46rem;
	margin-bottom: 1.1rem;
}


/*----------------------------------------------------------
	004 — TYPING TEST
----------------------------------------------------------*/

.tm-config{
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.6rem;
	padding: .9rem 1rem;
	margin-bottom: 1rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.tm-config-label{
	display: block;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wiz-text-muted);
	margin-bottom: .35rem;
}

/* segmented control — radio ki jagah, sab options ek nazar me */
.tm-seg{
	display: inline-flex;
	flex-wrap: wrap;
	gap: .25rem;
	padding: .2rem;
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
}

.tm-seg-btn{
	padding: .32rem .68rem;
	border: 0;
	border-radius: calc(var(--wiz-radius-btn) - 2px);
	background: transparent;
	font-size: .78rem;
	font-weight: 600;
	color: var(--wiz-text-muted);
	white-space: nowrap;
	transition: color .15s ease, background .15s ease;
}

.tm-seg-btn:hover{
	color: var(--wiz-primary);
}

.tm-seg-btn.is-on{
	color: #fff;
	background: linear-gradient(135deg, var(--wiz-primary) 0%, #4f46e5 100%);
}

.tm-seg-btn:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: 1px;
}

.tm-seg-sm .tm-seg-btn{
	padding: .26rem .55rem;
	font-size: .74rem;
}

/* live statistics */
.tm-stats{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: .6rem;
	margin-bottom: 1rem;
}

.tm-stat{
	padding: .7rem .5rem;
	text-align: center;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.tm-stat-value{
	display: block;
	font-family: var(--wiz-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--wiz-text);
	font-variant-numeric: tabular-nums;
}

.tm-stat-label{
	display: block;
	margin-top: .15rem;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wiz-text-muted);
}

/* jab test chal raha ho, WPM numaya ho jata hai */
.tm-app.is-running .tm-stat:first-child .tm-stat-value{
	color: var(--wiz-primary);
}

/* typing area */
.tm-type{
	position: relative;
	padding: 1.4rem 1.5rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
	cursor: text;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.tm-type:focus,
.tm-type.is-focus{
	outline: none;
	border-color: var(--wiz-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wiz-primary) 15%, transparent);
}

/*
	Asli input nazar nahi aata magar DOM me hai — mobile keyboard isi se
	khulta hai. display:none ya visibility:hidden se focus hi nahi hota,
	is liye ise shafaf rakh kar peeche bhej dete hain.
*/
.tm-input{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: transparent;
	caret-color: transparent;
	opacity: 0;
	z-index: 2;
	cursor: text;
}

.tm-text{
	position: relative;
	z-index: 1;
	font-family: var(--tm-font, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	font-size: var(--tm-size, 20px);
	line-height: 1.85;
	letter-spacing: .01em;
	color: var(--wiz-text-muted);
	word-break: break-word;
	user-select: none;
	max-height: 11.5em;
	overflow: hidden;
}

/* har character apna span — sirf isi tarah har ek ka apna haal dikhaya ja sakta hai */
.tm-ch{
	white-space: pre-wrap;
	transition: color .06s linear;
}

.tm-ch.is-ok{
	color: var(--wiz-text);
}

.tm-ch.is-bad{
	color: #dc2626;
	background: rgba(239, 68, 68, .14);
	border-radius: 2px;
}

/* space ki ghalati warna nazar hi nahi aati */
.tm-ch.is-bad.is-space{
	background: rgba(239, 68, 68, .3);
}

[data-bs-theme="dark"] .tm-ch.is-bad{
	color: #f87171;
}

.tm-ch.is-now{
	position: relative;
	background: color-mix(in srgb, var(--wiz-primary) 16%, transparent);
	border-radius: 2px;
}

/* caret — teen shaklen, settings se */
.tm-app[data-caret="line"] .tm-ch.is-now::before{
	content: "";
	position: absolute;
	left: -1px;
	top: .12em;
	bottom: .12em;
	width: 2px;
	background: var(--wiz-primary);
	animation: tmBlink 1.1s steps(1) infinite;
}

.tm-app[data-caret="block"] .tm-ch.is-now{
	background: var(--wiz-primary);
	color: #fff;
}

.tm-app[data-caret="under"] .tm-ch.is-now::before{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--wiz-primary);
}

.tm-app[data-caret="none"] .tm-ch.is-now::before{
	display: none;
}

@keyframes tmBlink{
	50%{ opacity: 0; }
}

/* test chalte waqt highlight ki zarurat nahi rehti */
.tm-app.is-running .tm-type-hint{
	opacity: 0;
	pointer-events: none;
}

.tm-type-hint{
	display: block;
	margin-top: .9rem;
	padding-top: .7rem;
	border-top: 1px dashed var(--wiz-border);
	font-size: .76rem;
	color: var(--wiz-text-muted);
	transition: opacity .2s ease;
}

.tm-type-hint i{
	color: var(--wiz-primary);
}

/* controls */
.tm-controls{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: 1rem;
}

.tm-btn-main{
	font-weight: 700;
	padding-inline: 1.3rem;
}

.tm-btn-main i{
	margin-right: .35rem;
}

.tm-shortcut{
	margin-left: auto;
	font-size: .72rem;
	color: var(--wiz-text-muted);
}

/* result */
.tm-result{
	margin-top: 1.1rem;
	padding: 1.1rem 1.2rem;
	border: 1px solid rgba(34, 197, 94, .3);
	border-radius: var(--wiz-radius-card);
	background: rgba(34, 197, 94, .07);
}

.tm-result-head{
	margin-bottom: .85rem;
}

.tm-result-title{
	display: block;
	font-family: var(--wiz-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: #15803d;
}

[data-bs-theme="dark"] .tm-result-title{
	color: #4ade80;
}

.tm-result-note{
	display: block;
	font-size: .8rem;
	color: var(--wiz-text-muted);
}

.tm-result-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: .6rem;
	margin-bottom: .9rem;
}

.tm-result-cell{
	padding: .55rem .5rem;
	text-align: center;
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
}

.tm-result-cell b{
	display: block;
	font-family: var(--wiz-font-display);
	font-size: 1.15rem;
	color: var(--wiz-text);
	font-variant-numeric: tabular-nums;
}

.tm-result-cell span{
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wiz-text-muted);
}

.tm-result-actions{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}


/*----------------------------------------------------------
	005 — CARDS, CHIPS, GROUPS
----------------------------------------------------------*/

.tm-group{
	margin-bottom: 1.6rem;
}

.tm-group-head{
	margin-bottom: .7rem;
}

.tm-group-title{
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
	color: var(--wiz-text);
}

.tm-group-note{
	font-size: .78rem;
	color: var(--wiz-text-muted);
}

.tm-cards{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
	gap: .8rem;
}

.tm-card{
	display: flex;
	flex-direction: column;
	padding: .95rem 1rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.tm-card:hover{
	border-color: color-mix(in srgb, var(--wiz-primary) 40%, var(--wiz-border));
	box-shadow: var(--wiz-shadow-sm);
	transform: translateY(-2px);
}

.tm-card-top{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .4rem;
}

.tm-card-name{
	font-size: .92rem;
	font-weight: 700;
	color: var(--wiz-text);
}

.tm-card-name i{
	color: var(--wiz-primary);
	margin-right: .25rem;
}

.tm-card-note{
	font-size: .78rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
	margin-bottom: .7rem;
}

.tm-card-meta{
	display: flex;
	flex-wrap: wrap;
	gap: .1rem .8rem;
	margin-bottom: .8rem;
	margin-top: auto;
	font-size: .72rem;
	color: var(--wiz-text-muted);
}

.tm-card-meta i{
	color: var(--wiz-primary);
	font-size: .68rem;
}

.tm-card-done{
	color: #15803d;
	font-weight: 600;
}

[data-bs-theme="dark"] .tm-card-done{
	color: #4ade80;
}

.tm-chip{
	flex-shrink: 0;
	padding: .12rem .5rem;
	border-radius: 999px;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--wiz-text-muted);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
}

.tm-chip-beginner{	color: #15803d;	border-color: rgba(34, 197, 94, .35);	background: rgba(34, 197, 94, .1); }
.tm-chip-intermediate{	color: #b45309;	border-color: rgba(245, 158, 11, .35);	background: rgba(245, 158, 11, .1); }
.tm-chip-advanced{	color: #b91c1c;	border-color: rgba(239, 68, 68, .35);	background: rgba(239, 68, 68, .1); }

[data-bs-theme="dark"] .tm-chip-beginner{		color: #4ade80; }
[data-bs-theme="dark"] .tm-chip-intermediate{	color: #fbbf24; }
[data-bs-theme="dark"] .tm-chip-advanced{		color: #f87171; }


/*----------------------------------------------------------
	006 — SPEED TEST
----------------------------------------------------------*/

.tm-speed{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1rem;
	align-items: stretch;
}

.tm-speed-dial{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.tm-speed-value{
	font-family: var(--wiz-font-display);
	font-size: 4.5rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--wiz-primary);
	font-variant-numeric: tabular-nums;
}

.tm-speed-unit{
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wiz-text-muted);
	margin-top: .3rem;
}

.tm-speed-best{
	margin-top: .8rem;
	font-size: .8rem;
	color: var(--wiz-text-muted);
}

.tm-speed-side{
	display: flex;
	flex-direction: column;
	padding: 1.1rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.tm-mini-stats{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .5rem;
}

.tm-mini{
	padding: .5rem .6rem;
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
	font-size: .74rem;
	color: var(--wiz-text-muted);
}

.tm-mini b{
	display: block;
	font-size: 1.05rem;
	color: var(--wiz-text);
	font-variant-numeric: tabular-nums;
}


/*----------------------------------------------------------
	007 — CUSTOM TEXT
----------------------------------------------------------*/

.tm-custom{
	font-family: var(--wiz-font-sans);
	font-size: .88rem;
	line-height: 1.7;
	resize: vertical;
	min-height: 160px;
}

.tm-custom-bar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: .7rem;
}

.tm-custom-count{
	font-size: .78rem;
	color: var(--wiz-text-muted);
	font-variant-numeric: tabular-nums;
}

.tm-custom-actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .9rem;
}

.tm-custom-actions .form-check-label{
	font-size: .78rem;
	color: var(--wiz-text-muted);
}


/*----------------------------------------------------------
	008 — GAMES
----------------------------------------------------------*/

.tm-game-bar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	margin-bottom: .8rem;
}

.tm-game-title{
	font-family: var(--wiz-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wiz-text);
}

.tm-game-score{
	display: flex;
	gap: .9rem;
	font-size: .78rem;
	color: var(--wiz-text-muted);
}

.tm-game-score b{
	color: var(--wiz-text);
	font-variant-numeric: tabular-nums;
}

.tm-game-field{
	position: relative;
	min-height: 260px;
	padding: 1.1rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
	overflow: hidden;
}

/* Word / Speed / Time challenge — beech me ek bara lafz */
.tm-game-word{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	text-align: center;
	padding: 1rem;
}

.tm-game-big{
	font-family: var(--tm-font, ui-monospace, monospace);
	font-size: clamp(1.6rem, 6vw, 3rem);
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--wiz-text);
}

.tm-game-big .is-ok{	color: #16a34a; }
.tm-game-big .is-bad{	color: #dc2626; }

.tm-game-hint{
	font-size: .8rem;
	color: var(--wiz-text-muted);
}

/* Falling words */
.tm-drop{
	position: absolute;
	top: -2em;
	padding: .2rem .55rem;
	border-radius: var(--wiz-radius-btn);
	font-family: var(--tm-font, ui-monospace, monospace);
	font-size: .95rem;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, var(--wiz-primary) 0%, #4f46e5 100%);
	box-shadow: var(--wiz-shadow-sm);
	white-space: nowrap;
	will-change: transform;
}

.tm-drop.is-near{
	background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.tm-game-input{
	display: flex;
	gap: .5rem;
	margin-top: .8rem;
}

.tm-game-input .form-control{
	font-family: var(--tm-font, ui-monospace, monospace);
}

.tm-game-over{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .3rem;
	text-align: center;
	padding: 1rem;
	background: color-mix(in srgb, var(--wiz-surface) 88%, transparent);
	backdrop-filter: blur(2px);
}

.tm-game-over b{
	font-family: var(--wiz-font-display);
	font-size: 1.4rem;
	color: var(--wiz-text);
}


/*----------------------------------------------------------
	009 — STATISTICS + CHARTS

	Charts hand-drawn SVG hain — koi chart library nahi. Do line ka data
	dikhane ke liye 200KB ki library mangwana LCP par zulm hai.
----------------------------------------------------------*/

.tm-stats-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: .6rem;
	margin-bottom: 1.1rem;
}

.tm-stat-card{
	padding: .8rem .9rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.tm-stat-card b{
	display: block;
	font-family: var(--wiz-font-display);
	font-size: 1.4rem;
	line-height: 1.15;
	color: var(--wiz-text);
	font-variant-numeric: tabular-nums;
}

.tm-stat-card span{
	font-size: .7rem;
	font-weight: 600;
	color: var(--wiz-text-muted);
}

.tm-chart-row{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: .8rem;
}

.tm-chart-box{
	padding: .9rem 1rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.tm-chart-head{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .4rem;
	margin-bottom: .6rem;
}

.tm-chart-title{
	font-size: .82rem;
	font-weight: 700;
	color: var(--wiz-text);
}

.tm-chart-note{
	font-size: .72rem;
	color: var(--wiz-text-muted);
}

.tm-chart svg{
	display: block;
	width: 100%;
	height: 130px;
	overflow: visible;
}

.tm-empty{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2.4rem 1rem;
	border: 1px dashed var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.tm-empty-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: .7rem;
	border-radius: var(--wiz-radius-card);
	font-size: 1.4rem;
	color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 12%, transparent);
}

.tm-empty-title{
	font-family: var(--wiz-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wiz-text);
}

.tm-empty-note{
	font-size: .82rem;
	color: var(--wiz-text-muted);
	max-width: 26rem;
}


/*----------------------------------------------------------
	011 — SETTINGS
----------------------------------------------------------*/

.tm-settings{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: .8rem;
}

.tm-set-group{
	padding: 1rem 1.1rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.tm-set-title{
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wiz-text-muted);
	margin: 0 0 .8rem;
}

.tm-set-title i{
	color: var(--wiz-primary);
	font-size: .9rem;
}

.tm-set-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	padding: .45rem 0;
	border-bottom: 1px solid var(--wiz-border);
}

.tm-set-row:last-child{
	border-bottom: 0;
	padding-bottom: 0;
}

.tm-set-row-stack{
	display: block;
}

.tm-set-label{
	font-size: .82rem;
	font-weight: 600;
	color: var(--wiz-text);
	margin: 0;
}

.tm-set-row .form-select,
.tm-set-row .form-range{
	max-width: 190px;
}

.tm-set-row .form-check-input:checked{
	background-color: var(--wiz-primary);
	border-color: var(--wiz-primary);
}


/*----------------------------------------------------------
	012 — ON-SCREEN KEYBOARD

	Naap ch (character width) me hai, px me nahi — is tarah keyboard
	container ki chaurai ke sath khud ba khud chhota bara hota hai aur
	har key ka tanasub theek rehta hai.
----------------------------------------------------------*/

.tm-keyboard-wrap{
	margin-top: 1.1rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tm-keyboard{
	display: flex;
	flex-direction: column;
	gap: .3rem;
	min-width: 620px;
	padding: .7rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
	user-select: none;
}

.tm-krow{
	display: flex;
	gap: .3rem;
	justify-content: center;
}

.tm-key{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	height: 34px;
	border-radius: var(--wiz-radius-btn);
	border: 1px solid var(--wiz-border);
	background: var(--wiz-surface);
	font-size: .72rem;
	font-weight: 600;
	color: var(--wiz-text-muted);
	text-transform: uppercase;
	transition: transform .06s ease, background .1s ease, color .1s ease, border-color .1s ease;
}

.tm-key-w1-5{	flex-grow: 1.5; }
.tm-key-w1-75{	flex-grow: 1.75; }
.tm-key-w2{		flex-grow: 2; }
.tm-key-w2-25{	flex-grow: 2.25; }
.tm-key-w2-75{	flex-grow: 2.75; }
.tm-key-w10{	flex-grow: 10; }

/* agla button jo dabana hai */
.tm-key.is-next{
	color: var(--wiz-primary);
	border-color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 12%, transparent);
}

/* abhi daba hua */
.tm-key.is-down{
	color: #fff;
	border-color: transparent;
	background: linear-gradient(135deg, var(--wiz-primary) 0%, #4f46e5 100%);
	transform: translateY(1px);
}

.tm-key.is-wrong{
	color: #fff;
	border-color: transparent;
	background: #dc2626;
	transform: translateY(1px);
}


/*----------------------------------------------------------
	013 — CONFIRM DIALOG + TOAST
----------------------------------------------------------*/

.tm-ask{
	position: absolute;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: color-mix(in srgb, var(--wiz-text) 35%, transparent);
	backdrop-filter: blur(2px);
}

.tm-ask-box{
	width: 100%;
	max-width: 380px;
	padding: 1.2rem 1.3rem;
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
	box-shadow: var(--wiz-shadow-md);
}

.tm-ask-title{
	display: block;
	font-family: var(--wiz-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wiz-text);
	margin-bottom: .3rem;
}

.tm-ask-note{
	display: block;
	font-size: .82rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
	margin-bottom: 1rem;
}

.tm-ask-actions{
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
}


/*----------------------------------------------------------
	014 — FULL SCREEN

	Do soorat: browser ka Fullscreen API, aur (jab wo mana kar de) CSS
	wala fallback. Dono me app ke andar website ka header/footer nazar
	nahi aata — app poori screen le leta hai.
----------------------------------------------------------*/

.tm-app.is-full{
	position: fixed;
	inset: 0;
	z-index: 1055;
	width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	border: 0;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

@supports not (height: 100dvh){

	.tm-app.is-full{
		height: 100vh;
		max-height: 100vh;
	}
}

.tm-app.is-full .tm-body{
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1.25rem 1.5rem 1.5rem;
}

/* fullscreen me typing area ko jitni jagah mil sake */
.tm-app.is-full .tm-text{
	max-height: none;
	font-size: calc(var(--tm-size, 20px) + 4px);
}

/* page ke peeche scroll na chale jab app poori screen par ho */
body.tm-locked{
	overflow: hidden;
}

/* :fullscreen me browser khud kaali background deta hai — apni le lete hain */
.tm-app:fullscreen{
	background: var(--wiz-body-bg);
	overflow-y: auto;
}

.wiz-label{
	display: block;
	font-size: .78rem;
	font-weight: 600;
	color: var(--wiz-text);
	margin-bottom: .35rem;
}

.wiz-hint{
	font-size: .76rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
}

.wiz-hint i{
	color: var(--wiz-primary);
}


/*----------------------------------------------------------
	017 — RESPONSIVE
----------------------------------------------------------*/

@media screen and (max-width: 991.98px){

	.tm-speed{
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 767.98px){

	.tm-body{
		padding: 1rem .85rem;
	}

	.tm-bar-sub{
		display: none;		/* jagah typing area ko chahiye */
	}

	/* paanch stat cards ek qatar me nahi samate — do qataron me */
	.tm-stats{
		grid-template-columns: repeat(3, 1fr);
	}

	.tm-stats .tm-stat:nth-child(4),
	.tm-stats .tm-stat:nth-child(5){
		grid-column: span 1;
	}

	.tm-stat-value{
		font-size: 1.2rem;
	}

	.tm-type{
		padding: 1rem .9rem;
	}

	.tm-text{
		font-size: calc(var(--tm-size, 20px) - 3px);
		max-height: 10em;
	}

	.tm-shortcut{
		display: none;		/* mobile par Tab/Esc ka koi matlab nahi */
	}

	.tm-controls .btn{
		flex: 1 1 auto;
	}

	.tm-speed-value{
		font-size: 3.2rem;
	}

	.tm-set-row{
		flex-wrap: wrap;
	}

	.tm-set-row .form-select,
	.tm-set-row .form-range{
		max-width: 100%;
		width: 100%;
	}
}

@media screen and (max-width: 575.98px){

	.tm-stats{
		grid-template-columns: repeat(2, 1fr);
	}

	.tm-cards{
		grid-template-columns: 1fr;
	}
}

@media print{

	.wiz-navbar,
	.wiz-footer,
	.btn-back2top,
	.wiz-ad,
	.wiz-coffee,
	.wiz-coffee-card,
	.tm-app,
	.wiz-toast{
		display: none !important;
	}
}