/* ==========================================================================
   Central de Ferramentas e ferramentas (só carrega nessas páginas).
   ========================================================================== */

/* ---------- Vitrine ---------- */
.mt-tools { margin: 28px 0 36px; }
.mt-tools__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.mt-content .mt-tools__card,
.mt-tools__card {
	position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 18px;
	background: var(--mt-surface, #fff); color: var(--mt-text); border: 1px solid var(--mt-line); border-radius: 16px;
	text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s;
}
a.mt-tools__card:hover { transform: translateY(-3px); border-color: var(--mt-primary); box-shadow: 0 12px 28px rgba(10, 108, 255, .14); }
a.mt-tools__card:focus-visible { outline: 3px solid var(--mt-primary); outline-offset: 2px; }
.mt-tools__icon {
	width: 48px; height: 48px; padding: 10px; border-radius: 14px; color: var(--mt-primary);
	background: var(--mt-tint, #F5F9FF); box-sizing: border-box;
}
.mt-tools__tag {
	position: absolute; top: 18px; right: 18px; padding: 3px 10px; border-radius: 999px; background: var(--mt-accent); color: var(--mt-dark);
	font: 700 11px/1.4 var(--f-label); text-transform: uppercase; letter-spacing: .04em;
}
.mt-content .mt-tools__name,
.mt-tools__name { margin: 6px 0 0; font-size: 19px; line-height: 1.25; }
.mt-content .mt-tools__desc,
.mt-tools__desc { margin: 0; color: var(--mt-muted); font-size: 15px; line-height: 1.5; flex: 1; }
.mt-tools__go { margin-top: 6px; color: var(--mt-primary); font: 600 14px var(--f-label); text-transform: uppercase; }
.mt-tools__card--soon { background: var(--mt-soft); border-style: dashed; }
.mt-tools__card--soon .mt-tools__icon { color: var(--mt-muted); background: var(--mt-surface, #fff); }
.mt-tools__card--soon .mt-tools__go { color: var(--mt-muted); }
.mt-content .mt-tools__soon-title,
.mt-tools__soon-title { margin: 34px 0 14px; font-size: 20px; }

/* ---------- Check-up do celular ---------- */
.mt-checkup { margin: 24px 0 36px; }
.mt-checkup [hidden] { display: none !important; }
.mt-checkup__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.mt-checkup__card, .mt-checkup__info, .mt-checkup__summary {
	display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--mt-line); border-radius: 16px;
	background: var(--mt-surface, #fff);
}
.mt-checkup__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mt-content .mt-checkup__name,
.mt-checkup__name { margin: 0; font-size: 18px; }
.mt-checkup__status {
	flex: none; padding: 3px 10px; border-radius: 999px; background: var(--mt-soft); color: var(--mt-muted);
	font: 600 12px/1.5 var(--f-label); text-align: right;
}
.mt-checkup__status.is-ok { background: var(--mt-green-bg); color: var(--mt-green); }
.mt-checkup__status.is-bad { background: #FDECEC; color: #B91C1C; }
.mt-checkup__status.is-na { background: var(--mt-soft); color: var(--mt-muted); }
.mt-checkup__status.is-part { background: #FFF6D6; color: #8A6100; }
.mt-content .mt-checkup__desc,
.mt-checkup__desc { margin: 0; color: var(--mt-muted); font-size: 15px; line-height: 1.5; }
.mt-checkup__body:empty { display: none; }
.mt-checkup__body { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.mt-checkup__body audio { width: 100%; }
.mt-checkup__actions { margin-top: auto; }
.mt-checkup__start { padding: 11px 22px; }
.mt-checkup__start[disabled] { opacity: .6; cursor: progress; }
.mt-checkup__ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--mt-line); font-weight: 600; }
.mt-checkup__ask span { flex: 1 1 100%; }
.mt-checkup__yes, .mt-checkup__no, .mt-checkup__chip {
	min-height: 40px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--mt-line); background: var(--mt-surface, #fff);
	color: var(--mt-text); font: 600 15px var(--f-body); cursor: pointer;
}
.mt-checkup__yes:hover { border-color: var(--mt-green); color: var(--mt-green); }
.mt-checkup__no:hover { border-color: #B91C1C; color: #B91C1C; }
.mt-checkup__chip:hover { border-color: var(--mt-primary); color: var(--mt-primary); }
.mt-checkup__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mt-checkup__range { flex: 1; min-width: 140px; accent-color: var(--mt-primary); }
.mt-content .mt-checkup__note,
.mt-checkup__note { margin: 0; color: var(--mt-muted); font-size: 14px; line-height: 1.45; }
.mt-checkup__meter { height: 12px; border-radius: 999px; background: var(--mt-soft); overflow: hidden; }
.mt-checkup__meter span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mt-green), var(--mt-accent), var(--mt-red)); transition: width .08s linear; }
.mt-checkup__video { width: 100%; max-height: 340px; border-radius: 12px; background: #000; object-fit: cover; }

.mt-checkup__info, .mt-checkup__summary { margin-top: 18px; }
.mt-content .mt-checkup__info h3, .mt-content .mt-checkup__summary h3 { margin: 0; font-size: 19px; }
.mt-checkup__facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; margin: 0; font-size: 15px; }
.mt-checkup__facts dt { color: var(--mt-muted); }
.mt-checkup__facts dd { margin: 0; font-weight: 600; text-align: right; }
.mt-checkup__link { align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: none; color: var(--mt-primary); font: 600 15px var(--f-body); text-decoration: underline; cursor: pointer; }
.mt-content .mt-checkup__list,
.mt-checkup__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mt-content .mt-checkup__item,
.mt-checkup__item { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--mt-soft); font-size: 15px; }
.mt-checkup__item-state { color: var(--mt-muted); text-align: right; }
.mt-checkup__item.is-ok .mt-checkup__item-state { color: var(--mt-green); font-weight: 600; }
.mt-checkup__item.is-bad .mt-checkup__item-state { color: #B91C1C; font-weight: 600; }
.mt-checkup__copy { align-self: flex-start; padding: 11px 22px; }

/* Palco em tela cheia (toque, multitoque, cores). */
html.mt-checkup-open, html.mt-checkup-open body { overflow: hidden; }
.mt-checkup__stage {
	position: fixed; inset: 0; z-index: 100000; background: #0B0D12; color: #fff;
	touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none;
}
.mt-checkup__stage[hidden] { display: none; }
.mt-checkup__cells { position: absolute; inset: 0; display: grid; gap: 2px; padding: 2px; }
.mt-checkup__cell { background: #1E232D; border-radius: 3px; }
.mt-checkup__cell.is-on { background: var(--mt-primary); }
.mt-checkup__counter {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 16px; border-radius: 999px;
	background: rgba(5, 7, 13, .75); font: 700 16px var(--f-label); pointer-events: none; white-space: nowrap;
}
.mt-checkup__stage-btn {
	position: absolute; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 2; min-height: 44px; padding: 10px 20px;
	border: 0; border-radius: 999px; background: #fff; color: #0B0D12; font: 700 15px var(--f-label); text-transform: uppercase;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .35); cursor: pointer;
}
.mt-checkup__stage.is-colors .mt-checkup__stage-btn { display: none; }
.mt-checkup__dot {
	position: absolute; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 3px solid var(--mt-accent);
	background: rgba(10, 108, 255, .35); display: grid; place-items: center; font: 800 22px var(--f-label); pointer-events: none;
}
.mt-checkup__hint {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 999px;
	background: rgba(5, 7, 13, .8); color: #fff; font: 600 16px var(--f-body); transition: opacity .6s; pointer-events: none; white-space: nowrap;
}
.mt-checkup__hint.is-gone { opacity: 0; }

@media (prefers-color-scheme: dark) {
	.mt-checkup__status.is-bad { background: rgba(239, 68, 68, .16); color: #FCA5A5; }
	.mt-checkup__item.is-bad .mt-checkup__item-state { color: #FCA5A5; }
	.mt-tools__card--soon { background: transparent; }
}

/* ---------- Laboratório Tech ---------- */
.mt-lab { margin: 24px 0 36px; display: grid; gap: 18px; }
.mt-lab [hidden] { display: none !important; }
.mt-lab__exp { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--mt-line); border-radius: 18px; background: var(--mt-surface, #fff); scroll-margin-top: calc(var(--header-h) + 16px); }
.mt-lab__head { display: flex; gap: 14px; align-items: flex-start; }
.mt-lab__num {
	flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
	background: var(--mt-primary); color: #fff; font: 800 18px var(--f-label);
}
.mt-content .mt-lab__head h3, .mt-lab__head h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.25; }
.mt-content .mt-lab__head p, .mt-lab__head p { margin: 0; color: var(--mt-muted); font-size: 15px; line-height: 1.5; }
.mt-lab__controls { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; }
.mt-lab__controls label { display: flex; flex-direction: column; gap: 6px; min-width: 140px; flex: 1 1 160px; font: 600 13px var(--f-label); text-transform: uppercase; letter-spacing: .02em; color: var(--mt-muted); }
.mt-lab__controls strong { color: var(--mt-text); }
.mt-lab select, .mt-lab__controls input[type="range"] { width: 100%; }
.mt-lab select {
	min-height: 42px; padding: 0 12px; border: 1px solid var(--mt-line); border-radius: 10px; background: var(--mt-surface, #fff); color: var(--mt-text);
	font: 500 15px var(--f-body); text-transform: none;
}
.mt-lab input[type="range"] { accent-color: var(--mt-primary); min-height: 28px; }
.mt-lab .mt-btn { align-self: flex-start; padding: 11px 26px; }
.mt-lab .mt-btn[disabled] { opacity: .6; cursor: progress; }
.mt-content .mt-lab__note, .mt-lab__note { margin: 0; color: var(--mt-muted); font-size: 14px; line-height: 1.5; }
.mt-content .mt-lab__stats, .mt-lab__stats { margin: 0; font-weight: 600; font-size: 15px; }

/* Hz: duas pistas */
.mt-lab__lanes { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: #0B0D12; }
.mt-lab__lane { position: relative; height: 64px; border-radius: 12px; background: #161B26; overflow: hidden; }
.mt-lab__lane-label { position: absolute; left: 12px; top: 8px; color: #9BA3B1; font: 600 12px var(--f-label); text-transform: uppercase; letter-spacing: .03em; }
.mt-lab__ball {
	position: absolute; left: 6px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff, var(--mt-accent) 45%, #E89B00); will-change: transform;
}

/* Resolução: dois quadros */
.mt-lab__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.mt-lab__pair figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mt-lab__pair canvas { width: 100%; border-radius: 12px; background: #0A1A3F; touch-action: none; cursor: grab; }
.mt-lab__pair figcaption select { width: auto; min-width: 120px; }

/* Compressão: original × comprimida com divisória */
.mt-lab__split { position: relative; overflow: hidden; border-radius: 14px; background: var(--mt-soft); --cut: 50%; }
.mt-lab__split canvas, .mt-lab__split img { display: block; width: 100%; height: auto; }
.mt-lab__split img { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 0 0 var(--cut)); }
.mt-lab__split img:not([src]) { display: none; }
.mt-lab__split::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: var(--cut); width: 3px; margin-left: -1.5px; background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none;
}
.mt-lab__divider { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 2; }
.mt-lab__tag {
	position: absolute; top: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(5, 7, 13, .7); color: #fff;
	font: 700 12px var(--f-label); text-transform: uppercase; pointer-events: none; z-index: 1;
}
.mt-lab__tag--l { left: 10px; }
.mt-lab__tag--r { right: 10px; }
.mt-lab__file input { font: 400 14px var(--f-body); text-transform: none; color: var(--mt-text); max-width: 100%; }