:root {
	--bg: #070818;
	--bg2: #0d0e22;
	--bg3: #121326;
	--card: #0e0f20;
	--b1: rgba(62, 207, 223, .08);
	--b2: rgba(62, 207, 223, .15);
	--b3: rgba(62, 207, 223, .28);
	--cyan: #3ecfdf;
	--cyan-dim: rgba(62, 207, 223, .08);
	--cyan-med: rgba(62, 207, 223, .18);
	--cyan-str: rgba(62, 207, 223, .38);
	--cyan-glow: rgba(62, 207, 223, .55);
	--text: #d8d8f2;
	--sub: #9898bc;
	--dim: #6868a4;
	--yellow: #f0c060;
	--green: #5eb87a;
	--red: #c06060;
	--font: 'Sora', sans-serif;
	--serif: 'Cormorant Garamond', serif;
	--mono: 'JetBrains Mono', monospace;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 17px;
	overflow-x: hidden;
	min-height: 100dvh;
	background-image:
		linear-gradient(rgba(62, 207, 223, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(62, 207, 223, .04) 1px, transparent 1px);
	background-size: 52px 52px;
}

p{
	text-indent: 30px;
}

ol {

	padding-left: 30px;

}

body::before {
	content: '';
	position: fixed;
	top: -20%;
	left: -10%;
	width: 55%;
	height: 55%;
	background: radial-gradient(ellipse, rgba(62, 207, 223, .08) 0%, transparent 65%);
	pointer-events: none;
	z-index: 0;
}

body::after {
	content: '';
	position: fixed;
	bottom: -15%;
	right: -5%;
	width: 50%;
	height: 50%;
	background: radial-gradient(ellipse, rgba(62, 207, 223, .065) 0%, transparent 65%);
	pointer-events: none;
	z-index: 0;
}

::-webkit-scrollbar {
	width: 4px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--cyan-med);
	border-radius: 99px;
}

header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(7, 8, 24, .97);
	backdrop-filter: blur(28px) saturate(1.8);
	border-bottom: 1px solid var(--b2);
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	overflow: hidden;            

}

header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--cyan-str) 20%, var(--cyan) 50%, var(--cyan-str) 80%, transparent);
	box-shadow: 0 0 22px rgba(62, 207, 223, .55);
}

.hd-left {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	cursor: pointer;
}

.logo-img {
	height: 60px;
	width: auto;
	object-fit: contain;
	flex-shrink: 0;
	filter: drop-shadow(0 0 14px rgba(62, 207, 223, .45));
	transition: filter .3s, transform .3s;
}

.logo-img:hover {
	filter: drop-shadow(0 0 32px rgba(62, 207, 223, .9));
	transform: scale(1.04);
}

.hd-div {
	width: 1px;
	height: 36px;
	background: linear-gradient(180deg, transparent, var(--cyan-str), transparent);
	margin: 0 12px;
	flex-shrink: 0;
}

.hd-brand {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.hd-brand-name {
	font-family: var(--serif);
	font-size: 27px;
	font-weight: 700;
	font-style: italic;
	background: linear-gradient(130deg, #f0f0ff 0%, #c8d4ff 30%, var(--cyan) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hd-brand-sub {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--cyan);
	opacity: .65;
}

main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 44px 20px 100px;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 60px;
}

.section {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.sec-header {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--b1);
	position: relative;
}

.sec-num {
	font-family: var(--serif);
	font-size: 52px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	flex-shrink: 0;
	background: linear-gradient(135deg, var(--cyan) 0%, rgba(62, 207, 223, .18) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 18px rgba(62, 207, 223, .35));
	user-select: none;
}

.sec-title {
	font-family: var(--serif);
	font-style: italic;
	font-size: 38px;
	font-weight: 600;
	color: var(--text);
	line-height: 1;
}

.sec-sub {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--dim);
	letter-spacing: 1px;
	margin-top: 4px;
}

.modules-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 20px;
}

.mc {
	background: var(--card);
	border: 1px solid var(--b2);
	border-radius: 18px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color .2s, transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .2s;
	position: relative;
}

.mc:hover {
	border-color: var(--cyan-str);
	transform: translateY(-4px);
	box-shadow: 0 18px 52px rgba(0, 0, 0, .5), 0 0 0 1px var(--b3);
}

.mc:active {
	transform: scale(.98) translateY(0);
}

.mc.soon {
	opacity: .5;
	cursor: default;
	pointer-events: none;
}


.mc-board {
	width: 100%;
	aspect-ratio: 16/9;
	position: relative;
	overflow: hidden;
	background: var(--bg3);
	display: flex;
	align-items: center;
	justify-content: center;
}

.mc-board-inner {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(8, 1fr); 
	width: 148px;
	height: 148px;
	flex-shrink: 0;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 6px 28px rgba(0, 0, 0, .75);
}

.sq {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	line-height: 1;
	user-select: none;
}

.sq.l {
	background: #bcd4e0;
}

.sq.d {
	background: #6a96aa;
}

.wp {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

.bp {
	color: #1a1a2e;
	text-shadow: 0 1px 2px rgba(255, 255, 255, .15);
}

.mc-board::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 35%, var(--card) 100%);
	pointer-events: none;
}

.mc-soon-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--yellow);
	background: rgba(240, 192, 96, .1);
	border: 1px solid rgba(240, 192, 96, .22);
	border-radius: 4px;
	padding: 3px 8px;
}


.mc-info {
	padding: 14px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mc-title {
	font-family: var(--serif);
	font-style: italic;
	font-size: 22px;
	font-weight: 600;
	color: var(--text);
	line-height: 1.2;
}

.mc-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.mc-diff {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .8px;
	text-transform: uppercase;
	border-radius: 5px;
	padding: 3px 9px;
}

.mc-diff.iniciante {
	color: var(--green);
	background: rgba(94, 184, 122, .1);
	border: 1px solid rgba(94, 184, 122, .2);
}

.mc-diff.intermediario {
	color: var(--yellow);
	background: rgba(240, 192, 96, .1);
	border: 1px solid rgba(240, 192, 96, .2);
}

.mc-diff.avancado {
	color: var(--red);
	background: rgba(192, 96, 96, .1);
	border: 1px solid rgba(192, 96, 96, .2);
}

.mc-phases {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--dim);
	letter-spacing: .3px;
}


#treino-ov {
	position: fixed;
	inset: 0;
	z-index: 500;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s;
	overflow: hidden;
}

#treino-ov.open {
	opacity: 1;
	pointer-events: all;
}

.ov-header {
	background: rgba(7, 8, 24, .97);
	backdrop-filter: blur(28px);
	border-bottom: 1px solid var(--b2);
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	position: relative;
	gap: 12px;
}

.ov-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--cyan-str) 20%, var(--cyan) 50%, var(--cyan-str) 80%, transparent);
}

.ov-hd-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.ov-hd-logo {
	height: 52px;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 0 14px rgba(62, 207, 223, .45));
}

.ov-hd-div {
	width: 1px;
	height: 32px;
	background: linear-gradient(180deg, transparent, var(--cyan-str), transparent);
	flex-shrink: 0;
}

.ov-hd-brand {
	font-family: var(--serif);
	font-size: 20px;
	font-weight: 700;
	font-style: italic;
	background: linear-gradient(130deg, #f0f0ff 0%, #c8d4ff 30%, var(--cyan) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	white-space: nowrap;
}

.ov-back {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px 18px;
	border-radius: 8px;
	border: 1px solid var(--b3);
	background: linear-gradient(135deg, var(--cyan-dim), rgba(62, 207, 223, .04));
	color: var(--cyan);
	font-family: var(--serif);
	font-size: 15px;
	font-style: italic;
	font-weight: 600;
	letter-spacing: .3px;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .2s, background .2s, box-shadow .2s;
	flex-shrink: 0;
	box-shadow: 0 0 0 0 var(--cyan-glow);
}

.ov-back::before {
	content: '←';
	font-style: normal;
	font-size: 14px;
}

.ov-back:hover {
	border-color: var(--cyan);
	background: linear-gradient(135deg, var(--cyan-med), rgba(62, 207, 223, .08));
	box-shadow: 0 0 14px rgba(62, 207, 223, .22);
}

.ov-tabs {
	display: flex;
	flex-shrink: 0;
	padding: 0 24px;
	gap: 0;
	border-bottom: 1px solid var(--b2);
	background: rgba(7, 8, 24, .7);
}

.ov-tab {
	padding: 14px 28px;
	font-family: var(--serif);
	font-size: 17px;
	font-style: italic;
	font-weight: 600;
	color: var(--dim);
	cursor: pointer;
	border: none;
	background: none;
	position: relative;
	transition: color .2s;
}

.ov-tab::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 50%;
	right: 50%;
	height: 2px;
	background: var(--cyan);
	transition: left .28s cubic-bezier(.22, 1, .36, 1), right .28s cubic-bezier(.22, 1, .36, 1);
	box-shadow: 0 0 10px rgba(62, 207, 223, .7);
}

.ov-tab:hover {
	color: var(--sub);
}

.ov-tab.active {
	color: var(--cyan);
}

.ov-tab.active::after {
	left: 0;
	right: 0;
}

.ov-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
}


#view-teoria {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
}

@media (min-width:780px) {
	#view-teoria {
		flex-direction: row;
	}
}

.teoria-board-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--bg2);
	flex-shrink: 0;
	padding: 16px 16px 12px;
	gap: 12px;
	overflow: hidden;
}

@media (min-width:780px) {

	
	.teoria-board-col {
		width: min(55vw, 680px);
		justify-content: center;
	}
}


#teoria-board-wrap,
#pratica-board-wrap {
	position: relative;
	flex-shrink: 0;
	border: 2px solid #374151;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

#teoria-board,
#pratica-board {
	width: 100% !important;
	height: 100% !important;
	display: block;
}

.cg-wrap {
	width: 100% !important;
	height: 100% !important;
}


cg-board {
	background-color: #bafaff;
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4PSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgogICAgIHZpZXdCb3g9IjAgMCA4IDgiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+CjxnIGlkPSJhIj4KICA8ZyBpZD0iYiI+CiAgICA8ZyBpZD0iYyI+CiAgICAgIDxnIGlkPSJkIj4KICAgICAgICA8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBpZD0iZSIgb3BhY2l0eT0iMCIvPgogICAgICAgIDx1c2UgeD0iMSIgeT0iMSIgaHJlZj0iI2UiIHg6aHJlZj0iI2UiLz4KICAgICAgICA8cmVjdCB5PSIxIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBpZD0iZiIgb3BhY2l0eT0iMC4yIi8+CiAgICAgICAgPHVzZSB4PSIxIiB5PSItMSIgaHJlZj0iI2YiIHg6aHJlZj0iI2YiLz4KICAgICAgPC9nPgogICAgICA8dXNlIHg9IjIiIGhyZWY9IiNkIiB4OmhyZWY9IiNkIi8+CiAgICA8L2c+CiAgICA8dXNlIHg9IjQiIGhyZWY9IiNjIiB4OmhyZWY9IiNjIi8+CiAgPC9nPgogIDx1c2UgeT0iMiIgaHJlZj0iI2IiIHg6aHJlZj0iI2IiLz4KPC9nPgo8dXNlIHk9IjQiIGhyZWY9IiNhIiB4OmhyZWY9IiNhIi8+Cjwvc3ZnPg==') !important;
}

.cg-wrap coords {
	color: rgba(72, 72, 72, 0.8) !important;
}

.orientation-white .cg-wrap coords.ranks coord:nth-child(odd),
.orientation-white .cg-wrap coords.files coord:nth-child(even) {
	color: rgba(72, 72, 72, 0.8) !important;
}

.orientation-white .cg-wrap coords.ranks coord:nth-child(even),
.orientation-white .cg-wrap coords.files coord:nth-child(odd) {
	color: rgba(255, 255, 255, 0.8) !important;
}

.orientation-black .cg-wrap coords.ranks coord:nth-child(even),
.orientation-black .cg-wrap coords.files coord:nth-child(odd) {
	color: rgba(72, 72, 72, 0.8) !important;
}

.orientation-black .cg-wrap coords.ranks coord:nth-child(odd),
.orientation-black .cg-wrap coords.files coord:nth-child(even) {
	color: rgba(255, 255, 255, 0.8) !important;
}


.teoria-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: center;
}

.tnav-btn {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	border: 1px solid var(--b2);
	background: var(--bg3);
	color: var(--cyan);
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .18s, background .18s;
}

.tnav-btn:hover {
	border-color: var(--cyan);
	background: var(--cyan-dim);
}

.tnav-btn:disabled {
	opacity: .25;
	cursor: default;
}

.tnav-btn:disabled:hover {
	border-color: var(--b2);
	background: var(--bg3);
}

.tnav-lbl {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--sub);
	min-width: 90px;
	text-align: center;
	letter-spacing: .5px;
}


.teoria-nav-comment {
	display: none;
}


.teoria-slides-col {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	padding: 20px;
	gap: 0;
	min-width: 0;
}

.slide-wrap {
	display: none;
	flex-direction: column;
	gap: 20px;
	animation: sldIn .25s ease both;
}

.slide-wrap.active {
	display: flex;
}

@keyframes sldIn {
	from {
		opacity: 0;
		transform: translateY(8px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.slide-dots {
	display: flex;
	gap: 7px;
	align-items: center;
	justify-content: center;
	padding: 12px 0 4px;
}

.slide-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--b2);
	cursor: pointer;
	transition: background .18s, transform .18s;
}

.slide-dot.on {
	background: var(--cyan);
	transform: scale(1.35);
}

.slide-num {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cyan);
	opacity: .5;
}

.slide-title {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(26px, 4vw, 36px);
	font-weight: 600;
	color: var(--text);
	line-height: 1.2;
}

.slide-text {
	font-size: clamp(15px, 2vw, 18px);
	color: var(--sub);
	line-height: 1.72;
}

.slide-text strong {
	color: var(--cyan);
	font-weight: 600;
}

.slide-text em {
	color: var(--yellow);
	font-style: italic;
}

.slide-demo-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--green);
	background: rgba(94, 184, 122, .08);
	border: 1px solid rgba(94, 184, 122, .2);
	border-radius: 6px;
	padding: 4px 10px;
	width: fit-content;
}

.slide-lance-trail {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: baseline;
	padding: 10px 12px;
	background: rgba(62, 207, 223, .04);
	border: 1px solid var(--b1);
	border-radius: 10px;
}

.slm-num {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--dim);
	padding: 2px 2px;
}

.slm-item {
	font-family: var(--mono);
	font-size: 14px;
	color: var(--sub);
	padding: 3px 6px;
	border-radius: 5px;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.slm-item:hover {
	background: var(--cyan-dim);
	color: var(--text);
}

.slm-item.on {
	background: var(--cyan-med);
	color: var(--cyan);
	font-weight: 600;
}

.slm-comment {
	width: 100%;
	margin-top: 6px;
	font-size: 14px;
	color: var(--cyan);
	opacity: .75;
	font-style: italic;
	font-family: var(--font);
	padding: 0 4px;
}

.slide-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 8px;
	margin-top: 4px;
	border-top: 1px solid var(--b1);
}

.sf-btn {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 10px 22px;
	border-radius: 10px;
	border: 1px solid var(--b2);
	background: var(--bg3);
	color: var(--sub);
	font-family: var(--serif);
	font-size: 15px;
	font-style: italic;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .18s, color .18s, background .18s, box-shadow .18s;
}

.sf-btn:hover {
	border-color: var(--cyan-str);
	color: var(--cyan);
	background: rgba(62, 207, 223, .06);
	box-shadow: 0 0 14px rgba(62, 207, 223, .12);
}

.sf-btn:disabled {
	opacity: .2;
	cursor: default;
}

.sf-btn:disabled:hover {
	border-color: var(--b2);
	color: var(--sub);
	background: var(--bg3);
	box-shadow: none;
}

.sf-btn.primary {
	background: rgba(62, 207, 223, .08);
	border-color: var(--cyan-str);
	color: var(--cyan);
	box-shadow: 0 0 14px rgba(62, 207, 223, .12);
}

.sf-btn.primary:hover {
	background: rgba(62, 207, 223, .15);
	box-shadow: 0 0 22px rgba(62, 207, 223, .22);
}

#view-pratica {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
}

@media (min-width:780px) {
	#view-pratica {
		flex-direction: row;
	}
}

.pratica-board-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--bg2);
	flex-shrink: 0;
	padding: 16px 16px 12px;
	gap: 12px;
	overflow: hidden;
}

@media (min-width:780px) {
	.pratica-board-col {
		width: min(55vw, 680px);
		justify-content: center;
	}
}

#pratica-board {
	display: block;
}

.pratica-info-col {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	padding: 20px;
	gap: 14px;
	min-width: 0;
}

.pratica-header {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pratica-title {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(24px, 4vw, 34px);
	font-weight: 600;
	color: var(--text);
}

.exercicio-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	background: rgba(62, 207, 223, .04);
	border: 1px solid var(--b1);
	border-radius: 10px;
}

.exercicio-counter {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--cyan);
	letter-spacing: 1px;
}

.exercicio-btns {
	display: flex;
	gap: 6px;
}

.ex-nav-btn {
	padding: 8px 16px;
	border-radius: 20px;
	border: 1px solid var(--b2);
	background: var(--bg3);
	color: var(--sub);
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .8px;
	cursor: pointer;
	transition: border-color .18s, color .18s;
}

.ex-nav-btn:hover {
	border-color: var(--cyan);
	color: var(--cyan);
}

.ex-nav-btn:disabled {
	opacity: .25;
	cursor: default;
}

.ex-nav-btn:disabled:hover {
	border-color: var(--b2);
	color: var(--sub);
}

.pratica-desc {
	font-size: 16px;
	color: var(--sub);
	line-height: 1.65;
}

.pratica-status {
	background: rgba(62, 207, 223, .06);
	border: 1px solid var(--b2);
	border-radius: 12px;
	padding: 14px 16px;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--sub);
	letter-spacing: .5px;
	min-height: 48px;
}

.pratica-status.ok {
	border-color: rgba(94, 184, 122, .4);
	color: var(--green);
	background: rgba(94, 184, 122, .06);
}

.pratica-status.err {
	border-color: rgba(192, 96, 96, .4);
	color: var(--red);
	background: rgba(192, 96, 96, .06);
}

.timer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 22px; 
  background: linear-gradient(135deg, rgba(62, 207, 223, .06) 0%, rgba(62, 207, 223, .02) 100%);
  border: 1px solid rgba(62, 207, 223, .2);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  max-width: 320px;   
  margin: 0 auto;              
  width: 100%;
}

.timer-row::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, transparent, var(--cyan), transparent);
	border-radius: 99px;
}

.timer-label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--cyan);
	opacity: .5;
}

.timer-value {
  font-family: var(--mono);
  font-size: 40px;             
  font-weight: 500;
  color: var(--cyan);
  letter-spacing: 3px;
  transition: color .3s;
  text-shadow: 0 0 20px rgba(62, 207, 223, .4);
}

.timer-value.warn {
	color: var(--yellow);
	text-shadow: 0 0 20px rgba(240, 192, 96, .4);
}

.timer-value.done {
	color: var(--green);
	text-shadow: 0 0 20px rgba(94, 184, 122, .4);
}

.timer-moves {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--sub);
	letter-spacing: .5px;
	text-align: right;
}

.timer-label-group {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.pratica-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.pratica-reset,
.pratica-play {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	border-radius: 40px;
	border: none;
	background: var(--cyan);
	color: #070818;
	font-family: var(--font);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .18s, transform .15s;
}

.pratica-reset:hover,
.pratica-play:hover {
	opacity: .88;
	transform: scale(1.01);
}

.pratica-play {
	background: linear-gradient(135deg, var(--green), #3a9e5c);
	color: #fff;
	display: none;
}

.btn-next-ex-big {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: 12px;
	border: 1px solid rgba(94, 184, 122, .4);
	background: rgba(94, 184, 122, .06);
	color: var(--green);
	font-family: var(--serif);
	font-size: 15px;
	font-style: italic;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .18s, background .18s, box-shadow .18s;
}

.btn-next-ex-big:hover {
	border-color: var(--green);
	background: rgba(94, 184, 122, .12);
	box-shadow: 0 0 18px rgba(94, 184, 122, .15);
}

.btn-next-ex-big.visible {
	display: flex;
}

.engine-bar-wrap {
	width: 100%;
}

.engine-bar-track {
	height: 2px;
	background: var(--b1);
	border-radius: 2px;
	overflow: hidden;
}

.engine-bar-fill {
	height: 100%;
	background: var(--cyan);
	width: 0%;
	transition: width .3s;
	border-radius: 2px;
	box-shadow: 0 0 8px var(--cyan);
}

.engine-status {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--dim);
	letter-spacing: 1px;
	margin-top: 4px;
	text-align: center;
}

.ranking-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-radius: 12px;
	border: 1px solid var(--b2);
	background: linear-gradient(135deg, rgba(62, 207, 223, .05) 0%, var(--bg3) 100%);
	color: var(--sub);
	font-family: var(--serif);
	font-size: 24px;
	font-style: italic;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .18s, color .18s, background .18s, box-shadow .18s;
	user-select: none;
}

.ranking-toggle:hover {
	border-color: rgba(62, 207, 223, .35);
	color: var(--text);
	box-shadow: 0 0 18px rgba(62, 207, 223, .1);
}

.ranking-toggle-icon {
	font-size: 16px;
}

.ranking-toggle-arrow {
	transition: transform .2s;
	font-style: normal;
	font-family: var(--mono);
	opacity: .5;
}

.ranking-toggle.open .ranking-toggle-arrow {
	transform: rotate(180deg);
}

.ranking-panel {
  display: none;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--b2);
  border-radius: 10px;
  overflow: hidden;
  animation: sldIn .2s ease both;
  max-height: 300px;      
  overflow-y: auto;       
}

.ranking-panel.open {
	display: flex;
}

.ranking-empty {
	padding: 20px;
	text-align: center;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--dim);
	letter-spacing: 1px;
}

.ranking-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--mono);
	font-size: 12px;
}

.ranking-table thead th {
	padding: 8px 10px;
	background: var(--bg3);
	color: var(--dim);
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 500;
	text-align: left;
	border-bottom: 1px solid var(--b1);
}

.ranking-table tbody tr {
	border-bottom: 1px solid var(--b1);
	transition: background .15s;
}

.ranking-table tbody tr:last-child {
	border-bottom: none;
}

.ranking-table tbody tr:hover {
	background: rgba(62, 207, 223, .04);
}

.ranking-table tbody td {
	padding: 8px 10px;
	color: var(--sub);
	vertical-align: middle;
}

.ranking-table tbody td.result-ok {
	color: var(--green);
}

.ranking-table tbody td.result-err {
	color: var(--red);
}

.ranking-table tbody td.result-half {
	color: var(--yellow);
}

.ranking-table tfoot td {
	padding: 6px 10px;
	font-size: 11px;
	color: var(--dim);
	border-top: 1px solid var(--b1);
	text-align: right;
}

.ranking-clear-btn {
	background: none;
	border: none;
	color: var(--dim);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 1px;
	cursor: pointer;
	padding: 0;
	transition: color .15s;
}

.ranking-clear-btn:hover {
	color: var(--red);
}

.ranking-modulo {
	padding: 8px 12px 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: 20px;
	color: var(--cyan);
	opacity: .85;
	display: none;
}

.ranking-modulo.visible {
	display: block;
}


@media (min-width: 1024px) {
	body {
		font-size: 20px;
	}

	.teoria-board-col,
	.pratica-board-col {
		width: min(65vw, 900px);
		padding: 28px 24px 22px;
	}

	#teoria-board-wrap,
	#pratica-board-wrap {
		max-width: unset;
	}
	

	.slide-title {
		font-size: clamp(32px, 4.5vw, 48px);
	}

	.slide-text {
		font-size: clamp(17px, 2.3vw, 21px);
	}

	.tnav-btn {
		width: 58px;
		height: 58px;
		font-size: 26px;
	}

	.sf-btn,
	.pratica-reset,
	.btn-next-ex-big {
		padding: 13px 26px;
		font-size: 16px;
	}

	.pratica-title {
		font-size: clamp(28px, 4vw, 40px);
	}

	.pratica-desc {
		font-size: 17px;
	}

	.pratica-status {
		font-size: 15px;
	}

	.timer-value {
		font-size: 40px;
	}

	.timer-moves {
		font-size: 14px;
	}

	.ranking-toggle {
		font-size: 24px;
		padding: 16px 20px;
	}

	.ranking-table {
		font-size: 13px;
	}
}

@media (max-width:600px) {
	.hd-brand-sub {
		display: none;
	}

	.sec-sub {
		display: none;
	}

	main {
		padding: 28px 14px 80px;
		gap: 44px;
	}

	.modules-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.mc-board-inner {
		width: 90px;
		height: 90px;
	}

	.sq {
		font-size: 8px;
	}

	.mc-title {
		font-size: 15px;
	}

	.ov-title {
		font-size: 15px;
	}

	.teoria-board-col,
	.pratica-board-col {
		padding: 10px 10px 8px;
	}

	.teoria-slides-col,
	.pratica-info-col {
		padding: 14px;
	}

	.timer-value {
		font-size: 40px;
	}
}

@media (max-width: 779px) {

	
	#treino-ov {
		overflow-y: auto;
		overflow-x: hidden;
	}

	
	.ov-header {
		position: sticky;
		top: 0;
		z-index: 20;
	}

	.ov-tabs {
		position: sticky;
		top: 76px;
		
		z-index: 19;
	}

	
	.ov-body {
		flex: none;
		overflow: visible;
		min-height: unset;
	}

	#view-teoria,
	#view-pratica {
		overflow: visible;
		flex: none;
		min-height: unset;
	}

	.teoria-board-col,
	.pratica-board-col {
		overflow: visible;
	}

	
	.teoria-slides-col {
		overflow-y: visible;
		flex: none;
		min-height: unset;
	}

	.pratica-info-col {
		overflow-y: visible;
		flex: none;
		min-height: unset;
	}

	
	.tnav-lbl {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 80px;
	}

	
	.teoria-nav-comment {
		display: block;
		font-size: 13px;
		color: var(--cyan);
		opacity: .75;
		line-height: 1.55;
		text-align: center;
		font-style: italic;
		padding: 0 4px;
	}

	
	.slm-comment {
		display: none;
	}
}


[data-theme="light"] {
  
  --bg:   #cfd9e6;              
  --bg2:  #dde6f0;              
  --bg3:  #e8eef6;              
  --card: #ffffff;              

  
  --b1: rgba(30, 60, 100, 0.10);
  --b2: rgba(30, 60, 100, 0.20);
  --b3: rgba(30, 60, 100, 0.35);

  
  --cyan:     #00796b;
  --cyan-dim: rgba(0, 121, 107, 0.10);
  --cyan-med: rgba(0, 121, 107, 0.22);
  --cyan-str: rgba(0, 121, 107, 0.45);
  --cyan-glow:rgba(0, 121, 107, 0.55);

  
  --text: #111827;              
  --sub:  #374151;              
  --dim:  #6b7280;              

  
  --yellow: #92400e;
  --green:  #065f46;
  --red:    #991b1b;
}


[data-theme="light"] body {
  background-image:
    linear-gradient(rgba(0, 121, 107, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 121, 107, 0.05) 1px, transparent 1px);
}
[data-theme="light"] body::before {
  background: radial-gradient(ellipse, rgba(0, 121, 107, 0.10) 0%, transparent 65%);
}
[data-theme="light"] body::after {
  background: radial-gradient(ellipse, rgba(0, 121, 107, 0.08) 0%, transparent 65%);
}


[data-theme="light"] header {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--b2);
  box-shadow: 0 2px 12px rgba(30, 60, 100, 0.10);
}
[data-theme="light"] header::before {
  box-shadow: 0 0 18px rgba(0, 121, 107, 0.40);
}


[data-theme="light"] .hd-brand-name {
  background: linear-gradient(130deg, #111827 0%, #1e3a5f 40%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


[data-theme="light"] .logo-img,
[data-theme="light"] .ov-hd-logo {
  filter: drop-shadow(0 0 8px rgb(0, 57, 50));
  height: 60px;               
  width: auto;
  max-width: 100%;            
}
[data-theme="light"] .logo-img:hover {
  filter: drop-shadow(0 0 18px rgba(0, 121, 107, 0.30));
}


[data-theme="light"] .sec-num {
  filter: drop-shadow(0 0 10px rgba(0, 121, 107, 0.22));
}


[data-theme="light"] .mc {
  border: 1px solid var(--b2);
  box-shadow: 0 2px 10px rgba(30, 60, 100, 0.10), 0 1px 3px rgba(30, 60, 100, 0.06);
}
[data-theme="light"] .mc:hover {
  border-color: var(--cyan-str);
  box-shadow: 0 10px 28px rgba(30, 60, 100, 0.18), 0 0 0 1px var(--cyan-str);
}


[data-theme="light"] .mc-soon-badge {
  color: var(--yellow);
  background: rgba(146, 64, 14, 0.08);
  border-color: rgba(146, 64, 14, 0.22);
}


[data-theme="light"] .ov-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--b2);
  box-shadow: 0 2px 12px rgba(30, 60, 100, 0.08);
}
[data-theme="light"] .ov-header::before {
  box-shadow: none;
}


[data-theme="light"] .ov-hd-brand {
  background: linear-gradient(130deg, #111827 0%, #1e3a5f 40%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .ov-tabs {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--b2);
}


[data-theme="light"] .ov-tab.active::after {
  box-shadow: 0 0 8px rgba(0, 121, 107, 0.45);
}


[data-theme="light"] .ov-back {
  background: var(--cyan-dim);
  color: var(--cyan);
  border-color: var(--cyan-str);
}
[data-theme="light"] .ov-back:hover {
  background: var(--cyan-med);
  box-shadow: 0 0 12px rgba(0, 121, 107, 0.18);
}


[data-theme="light"] #teoria-board-wrap,
[data-theme="light"] #pratica-board-wrap {
  border-color: #94a3b8;
  box-shadow: 0 6px 24px rgba(30, 60, 100, 0.16);
}


[data-theme="light"] .slide-lance-trail {
  background: rgba(0, 121, 107, 0.05);
}


[data-theme="light"] .sf-btn {
  background: var(--bg3);
  border-color: var(--b2);
  color: var(--sub);
}
[data-theme="light"] .sf-btn:hover {
  background: rgba(0, 121, 107, 0.08);
  border-color: var(--cyan-str);
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 121, 107, 0.10);
}
[data-theme="light"] .sf-btn.primary {
  background: rgba(0, 121, 107, 0.10);
  border-color: var(--cyan-str);
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 121, 107, 0.10);
}
[data-theme="light"] .sf-btn.primary:hover {
  background: rgba(0, 121, 107, 0.18);
  box-shadow: 0 0 20px rgba(0, 121, 107, 0.18);
}


[data-theme="light"] .exercicio-nav {
  background: rgba(0, 121, 107, 0.05);
  border-color: var(--b1);
}

[data-theme="light"] .pratica-status {
  background: rgba(0, 121, 107, 0.06);
}

[data-theme="light"] .timer-row {
  background: linear-gradient(135deg, rgba(0, 121, 107, 0.07) 0%, rgba(0, 121, 107, 0.02) 100%);
  border-color: rgba(0, 121, 107, 0.22);
}


[data-theme="light"] .engine-bar-track {
  background: var(--b1);
}


[data-theme="light"] .ranking-toggle {
  background: linear-gradient(135deg, rgba(0, 121, 107, 0.08) 0%, var(--bg3) 100%);
}
[data-theme="light"] .ranking-table tbody tr:hover {
  background: rgba(0, 121, 107, 0.04);
}