feat: add MobileNetV3 diagram and update styles

- Introduced a new component `MobileNetV3Diagram` to visualize the architecture of the MobileNetV3 model.
- Updated `Hero` component text to reflect the new model details.
- Added CSS styles for the new diagram, including animations and responsive design.
- Enhanced existing styles for tabs and layout in the research page for better usability and aesthetics.

frontend/src/app/research/page.module.css

@@ -374,6 +374,133 @@
   margin-top: 2px;
 }
 
+.tabBar {
+  display: flex;
+  gap: 0.75rem;
+  margin: 0 auto 3rem;
+  max-width: 560px;
+  width: 100%;
+}
+
+.tab {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 1rem 0.75rem;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-glass);
+  border-radius: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-family: inherit;
+  position: relative;
+}
+
+.tab:hover {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.tabActive {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 20px rgba(192, 132, 252, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.08);
+}
+
+.tab:first-child.tabActive {
+  border-color: var(--accent-primary);
+}
+
+.tab:last-child.tabActive {
+  border-color: #34d399;
+  box-shadow: 0 0 20px rgba(52, 211, 153, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.08);
+}
+
+.tabLabel {
+  font-family: var(--font-head);
+  font-size: 1.05rem;
+  font-weight: 800;
+  color: var(--text-primary);
+  letter-spacing: 2px;
+  text-transform: uppercase;
+}
+
+.tabSub {
+  font-family: var(--font-body);
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  opacity: 0.7;
+}
+
+.tabActive .tabSub {
+  opacity: 1;
+}
+
+.tab:first-child.tabActive .tabLabel {
+  color: var(--accent-primary);
+}
+
+.tab:last-child.tabActive .tabLabel {
+  color: #34d399;
+}
+
+.phaseDivider {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin: 1.5rem 0 2.5rem;
+  width: 100%;
+}
+
+.phaseDot {
+  width: 14px;
+  height: 14px;
+  min-width: 14px;
+  border-radius: 50%;
+  background: var(--accent-primary);
+  box-shadow: 0 0 18px var(--accent-primary);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.phaseDotTwo {
+  background: #34d399;
+  box-shadow: 0 0 18px rgba(52, 211, 153, 0.6);
+}
+
+.phaseLabel {
+  font-family: var(--font-head);
+  font-size: 1.25rem;
+  font-weight: 800;
+  color: var(--accent-primary);
+  text-transform: uppercase;
+  letter-spacing: 3px;
+}
+
+.phaseLabelTwo {
+  color: #34d399;
+}
+
+.phaseLine {
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(90deg, var(--border-glass), transparent);
+}
+
+.twoColGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  max-width: 850px;
+  margin: 2rem auto;
+  gap: 2rem;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(1.3); }
+}
+
 @media (max-width: 768px) {
   .oodContainer {
     flex-direction: column;
@@ -382,6 +509,9 @@
   .oodImageSmall, .oodImageLarge {
     width: 100% !important;
   }
+  .twoColGrid {
+    grid-template-columns: 1fr;
+  }
 }
 
 /* Tablets (landscape & portrait) */

frontend/src/components/Hero.js

@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react';
 import Link from 'next/link';
 
 export default function Hero() {
-  const fullText = "Powered by ResNet-18 · 1025 Pokémon · 32k+ training images";
+  const fullText = "Powered by MobileNetV3 · 1025 Pokémon · 55k+ training images";
   const [typedText, setTypedText] = useState("");
 
   useEffect(() => {

frontend/src/components/MobileNetV3Diagram.js

@@ -0,0 +1,144 @@
+'use client';
+
+import React from 'react';
+import styles from './MobileNetV3Diagram.module.css';
+
+export default function MobileNetV3Diagram() {
+  return (
+    <div className={styles.card}>
+      <div className={styles.cardScanline}></div>
+
+      <header className={styles.header}>
+        <div className={styles.title}>MobileNetV3-Large Student</div>
+        <div className={styles.subtitle}>
+          Destilado dos 5 Professores ResNet-18 &nbsp;·&nbsp; 66.6 MB FP32 &nbsp;·&nbsp; 1026 classes
+        </div>
+      </header>
+      <div className={styles.divider}></div>
+
+      <div className={styles.pipeline}>
+
+        <div className={`${styles.layer} ${styles.lInput}`} style={{ animationDelay: '0.04s' }}>
+          <div className={styles.layerName}>Input Tensor</div>
+          <div className={styles.layerDim}>128 &times; 128 &times; 1 &mdash; grayscale silhouette</div>
+        </div>
+
+        <div className={styles.conn}>
+          <div className={styles.connLine}></div>
+        </div>
+
+        <div className={`${styles.layer} ${styles.lConv}`} style={{ animationDelay: '0.08s' }}>
+          <div className={styles.layerName}>Conv2d Adaptado</div>
+          <div className={styles.layerDim}>in=1 &nbsp;|&nbsp; 16 filtros &nbsp;|&nbsp; 3&times;3 &nbsp;|&nbsp; stride 2</div>
+        </div>
+
+        <div className={styles.conn}>
+          <div className={styles.connLine}></div>
+        </div>
+
+        <div className={styles.stageGroup} style={{ animationDelay: '0.14s' }}>
+          <div className={styles.stageLabel}>Blocos Inverted Residual + SE</div>
+          <div className={`${styles.layer} ${styles.lBlock}`} style={{ width: '100%', animationDelay: '0.15s' }}>
+            <div className={styles.layerName}>Bottleneck &times;3 &mdash; expans&atilde;o 16&rarr;64</div>
+            <div className={styles.layerDim}>DWConv 3&times;3 &nbsp;|&nbsp; SE squeeze 4&rarr;16 &nbsp;|&nbsp; stride 2 &nbsp;|&nbsp; h-swish</div>
+          </div>
+          <div className={`${styles.conn} ${styles.connSm}`}>
+            <div className={styles.connLine}></div>
+          </div>
+          <div className={`${styles.layer} ${styles.lBlock}`} style={{ width: '100%', animationDelay: '0.18s' }}>
+            <div className={styles.layerName}>Bottleneck &times;3 &mdash; expans&atilde;o 24&rarr;88</div>
+            <div className={styles.layerDim}>DWConv 3&times;3 &nbsp;|&nbsp; SE squeeze 4&rarr;24 &nbsp;|&nbsp; stride 2 &nbsp;|&nbsp; ReLU</div>
+          </div>
+          <div className={`${styles.conn} ${styles.connSm}`}>
+            <div className={styles.connLine}></div>
+          </div>
+          <div className={`${styles.layer} ${styles.lBlock}`} style={{ width: '100%', animationDelay: '0.21s' }}>
+            <div className={styles.layerName}>Bottleneck &times;6 &mdash; expans&atilde;o 40&rarr;240</div>
+            <div className={styles.layerDim}>DWConv 5&times;5 &nbsp;|&nbsp; SE squeeze 8&rarr;40 &nbsp;|&nbsp; h-swish &nbsp;|&nbsp; stride 2</div>
+          </div>
+          <div className={`${styles.conn} ${styles.connSm}`}>
+            <div className={styles.connLine}></div>
+          </div>
+          <div className={`${styles.layer} ${styles.lBlock}`} style={{ width: '100%', animationDelay: '0.24s' }}>
+            <div className={styles.layerName}>Bottleneck &times;4 &mdash; expans&atilde;o 80&rarr;400</div>
+            <div className={styles.layerDim}>DWConv 3&times;3 &nbsp;|&nbsp; SE squeeze 16&rarr;80 &nbsp;|&nbsp; h-swish &nbsp;|&nbsp; stride 1</div>
+          </div>
+          <div className={`${styles.conn} ${styles.connSm}`}>
+            <div className={styles.connLine}></div>
+          </div>
+          <div className={`${styles.layer} ${styles.lBlock}`} style={{ width: '100%', animationDelay: '0.27s' }}>
+            <div className={styles.layerName}>Bottleneck &times;2 &mdash; expans&atilde;o 112&rarr;672</div>
+            <div className={styles.layerDim}>DWConv 5&times;5 &nbsp;|&nbsp; SE squeeze 24&rarr;112 &nbsp;|&nbsp; h-swish &nbsp;|&nbsp; stride 1</div>
+          </div>
+          <div className={`${styles.conn} ${styles.connSm}`}>
+            <div className={styles.connLine}></div>
+          </div>
+          <div className={`${styles.layer} ${styles.lBlock}`} style={{ width: '100%', animationDelay: '0.30s' }}>
+            <div className={styles.layerName}>Bottleneck &times;3 &mdash; expans&atilde;o 160&rarr;960</div>
+            <div className={styles.layerDim}>DWConv 5&times;5 &nbsp;|&nbsp; SE squeeze 32&rarr;160 &nbsp;|&nbsp; h-swish &nbsp;|&nbsp; stride 2</div>
+          </div>
+        </div>
+
+        <div className={styles.conn}>
+          <div className={styles.connLine}></div>
+        </div>
+
+        <div className={`${styles.layer} ${styles.lConv}`} style={{ animationDelay: '0.33s' }}>
+          <div className={styles.layerName}>Conv2d 1&times;1</div>
+          <div className={styles.layerDim}>960 &rarr; 1280 &nbsp;|&nbsp; h-swish</div>
+        </div>
+
+        <div className={styles.conn}>
+          <div className={styles.connLine}></div>
+        </div>
+
+        <div className={`${styles.layer} ${styles.lPool}`} style={{ animationDelay: '0.35s' }}>
+          <div className={styles.layerName}>Global Average Pool</div>
+          <div className={styles.layerDim}>AvgPool 7&times;7 &nbsp;&rarr;&nbsp; 1 &times; 1 &times; 1280</div>
+        </div>
+
+        <div className={styles.conn}>
+          <div className={styles.connLine}></div>
+        </div>
+
+        <div className={`${styles.layer} ${styles.lFlatten}`} style={{ animationDelay: '0.38s' }}>
+          <div className={styles.layerName}>Flatten + Dropout</div>
+          <div className={styles.layerDim}>1280-dim &nbsp;|&nbsp; p=0.2</div>
+        </div>
+
+        <div className={styles.conn}>
+          <div className={styles.connLine}></div>
+        </div>
+
+        <div className={`${styles.layer} ${styles.lOutput}`} style={{ animationDelay: '0.41s' }}>
+          <div className={styles.layerName}>FC &mdash; Classifier Head</div>
+          <div className={styles.layerDim}>Linear(1280 &rarr; 1026) &nbsp;|&nbsp; 1025 target species + 1 OOD rejection sink</div>
+        </div>
+
+      </div>
+
+      <div className={styles.kdBadge}>
+        <div className={styles.kdBadgeIcon}>&#8595;</div>
+        <div className={styles.kdBadgeText}>
+          Destilado de 5 Professores ResNet-18 (230 MB) via L<sub>total</sub> = (1&minus;&alpha;)L<sub>hard</sub> + &alpha;L<sub>soft</sub> + &gamma;L<sub>OOD</sub>
+        </div>
+      </div>
+
+      <div className={styles.legend}>
+        <div className={styles.legendItem}>
+          <div className={`${styles.legDot} ${styles.legCyan}`}></div>I/O
+        </div>
+        <div className={styles.legendItem}>
+          <div className={`${styles.legDot} ${styles.legGreen}`}></div>Convolucional
+        </div>
+        <div className={styles.legendItem}>
+          <div className={`${styles.legDot} ${styles.legPurple}`}></div>Bottleneck + SE
+        </div>
+        <div className={styles.legendItem}>
+          <div className={`${styles.legDot} ${styles.legAmber}`}></div>Pooling / Flatten
+        </div>
+      </div>
+
+    </div>
+  );
+}

frontend/src/components/MobileNetV3Diagram.module.css

@@ -0,0 +1,296 @@
+.card {
+  --surface: rgba(10, 10, 26, 0.45);
+  --cyan: #00f2fe;
+  --cyan-dim: rgba(0, 242, 254, 0.08);
+  --cyan-glow: rgba(0, 242, 254, 0.35);
+  --green: #34d399;
+  --green-dim: rgba(52, 211, 153, 0.08);
+  --green-glow: rgba(52, 211, 153, 0.35);
+  --purple: #c084fc;
+  --purple-dim: rgba(192, 132, 252, 0.08);
+  --purple-glow: rgba(192, 132, 252, 0.35);
+  --amber: #fbbf24;
+  --amber-dim: rgba(251, 191, 36, 0.06);
+  --gray-dim: rgba(255, 255, 255, 0.02);
+  --border-faint: var(--border-glass);
+  --text: var(--text-primary);
+  --text-muted: var(--text-secondary);
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --font-head: inherit;
+
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 670px;
+  background: var(--surface);
+  border: 1px solid var(--border-faint);
+  border-radius: 24px;
+  padding: 40px 40px 44px;
+  backdrop-filter: blur(20px) saturate(160%);
+  -webkit-backdrop-filter: blur(20px) saturate(160%);
+  box-shadow:
+    0 0 0 1px rgba(52, 211, 153, 0.06),
+    0 24px 80px rgba(0, 0, 0, 0.45),
+    inset 0 1px 1px rgba(255, 255, 255, 0.08);
+  margin: 2.5rem auto;
+  transition: box-shadow 0.3s ease;
+}
+
+.card:hover {
+  box-shadow:
+    0 0 0 1px rgba(52, 211, 153, 0.1),
+    0 25px 90px rgba(0, 0, 0, 0.55),
+    inset 0 1px 1px rgba(255, 255, 255, 0.12);
+}
+
+.card::before, .card::after {
+  content: '';
+  position: absolute;
+  width: 24px; height: 24px;
+  border-color: var(--green);
+  border-style: solid;
+}
+.card::before { top:-1px; left:-1px; border-width:2px 0 0 2px; border-radius:24px 0 0 0; }
+.card::after  { bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-radius:0 0 24px 0; }
+
+@keyframes scanline {
+  0%   { top: 0;    opacity: 0.4; }
+  100% { top: 100%; opacity: 0; }
+}
+
+.cardScanline {
+  position: absolute; inset: 0;
+  overflow: hidden; border-radius: 24px; pointer-events: none;
+}
+.cardScanline::after {
+  content: '';
+  position: absolute; left:0; right:0; height:80px;
+  background: linear-gradient(to bottom, transparent, rgba(52, 211, 153, 0.02), transparent);
+  animation: scanline 6s linear infinite;
+}
+
+.header { text-align: center; margin-bottom: 32px; }
+
+.title {
+  font-family: var(--font-head);
+  font-size: 26px; font-weight: 800;
+  letter-spacing: 0.18em; text-transform: uppercase;
+  color: var(--green);
+  text-shadow: 0 0 15px var(--green-glow);
+}
+
+.subtitle {
+  font-family: var(--font-mono);
+  font-size: 11px; color: var(--text-muted);
+  letter-spacing: 0.12em; margin-top: 8px;
+  opacity: 0.8;
+}
+
+.divider {
+  width: 100%; height: 1px;
+  background: linear-gradient(90deg, transparent, var(--green-glow), transparent);
+  margin-bottom: 28px;
+}
+
+/* ── pipeline ── */
+.pipeline {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+}
+
+/* ── generic layer ── */
+.layer {
+  width: 100%;
+  border-radius: 12px;
+  padding: 12px 18px;
+  border: 1px solid transparent;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  position: relative;
+}
+.layer:hover { transform: scale(1.012) translateX(-2px); }
+
+.layerName {
+  font-family: var(--font-head);
+  font-weight: 700; font-size: 14px;
+  letter-spacing: 0.08em; text-transform: uppercase;
+}
+
+.layerDim {
+  font-family: var(--font-mono);
+  font-size: 10px; margin-top: 4px; letter-spacing: 0.04em;
+  opacity: 0.85;
+}
+
+/* input */
+.lInput {
+  background: var(--cyan-dim);
+  border-color: rgba(0, 242, 254, 0.3);
+  box-shadow: 0 0 12px rgba(0, 242, 254, 0.05);
+}
+.lInput .layerName { color: var(--cyan); text-shadow: 0 0 10px var(--cyan-glow); }
+.lInput .layerDim  { color: rgba(0, 242, 254, 0.7); }
+.lInput:hover { box-shadow: 0 0 20px rgba(0, 242, 254, 0.15); }
+
+/* convolutional */
+.lConv {
+  background: var(--green-dim);
+  border-color: rgba(52, 211, 153, 0.3);
+  border-left: 3px solid var(--green);
+  border-radius: 0 12px 12px 0;
+  box-shadow: 0 0 12px rgba(52, 211, 153, 0.05);
+}
+.lConv .layerName { color: var(--green); text-shadow: 0 0 10px var(--green-glow); }
+.lConv .layerDim  { color: rgba(52, 211, 153, 0.7); }
+.lConv:hover { box-shadow: -2px 0 16px rgba(52, 211, 153, 0.15); }
+
+/* stage group header */
+.stageGroup {
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.stageLabel {
+  font-family: var(--font-mono);
+  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
+  color: var(--green);
+  opacity: 0.7;
+  margin-bottom: 10px;
+  align-self: flex-start;
+}
+
+/* individual bottleneck block */
+.lBlock {
+  background: var(--purple-dim);
+  border-color: rgba(192, 132, 252, 0.25);
+  box-shadow: 0 0 8px rgba(192, 132, 252, 0.03);
+}
+.lBlock .layerName { color: var(--purple); text-shadow: 0 0 8px var(--purple-glow); }
+.lBlock .layerDim  { color: rgba(192, 132, 252, 0.7); }
+.lBlock:hover { box-shadow: 0 0 16px rgba(192, 132, 252, 0.15); }
+
+/* pooling / flatten */
+.lPool {
+  background: var(--gray-dim);
+  border-color: rgba(255, 255, 255, 0.08);
+  border-left: 3px solid var(--green);
+  border-radius: 0 12px 12px 0;
+}
+.lPool .layerName { color: var(--text); }
+.lPool .layerDim  { color: var(--text-muted); }
+.lPool:hover { box-shadow: -2px 0 12px rgba(52, 211, 153, 0.12); }
+
+.lFlatten {
+  background: var(--amber-dim);
+  border-color: rgba(251, 191, 36, 0.25);
+  border-left: 3px solid var(--amber);
+  border-radius: 0 12px 12px 0;
+}
+.lFlatten .layerName { color: var(--amber); }
+.lFlatten .layerDim  { color: rgba(251, 191, 36, 0.7); }
+
+/* output */
+.lOutput {
+  background: linear-gradient(135deg, rgba(192, 132, 252, 0.12), rgba(52, 211, 153, 0.06));
+  border-color: rgba(192, 132, 252, 0.4);
+  box-shadow: 0 0 16px rgba(192, 132, 252, 0.1), inset 0 1px 0 rgba(192, 132, 252, 0.1);
+}
+.lOutput .layerName { color: var(--purple); text-shadow: 0 0 12px var(--purple-glow); }
+.lOutput .layerDim  { color: rgba(192, 132, 252, 0.75); }
+.lOutput:hover { box-shadow: 0 0 24px rgba(192, 132, 252, 0.2); }
+
+/* ── connector (main flow arrow) ── */
+.conn {
+  display: flex; align-items: center; justify-content: center;
+  height: 24px; width: 100%; position: relative;
+}
+.connLine {
+  width: 1.5px; height: 100%;
+  background: linear-gradient(to bottom, var(--green), var(--purple));
+  position: relative;
+}
+.connLine::after {
+  content: '';
+  position: absolute; bottom: -1px; left: 50%;
+  transform: translateX(-50%);
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 6px solid var(--purple);
+  filter: drop-shadow(0 0 2px var(--purple-glow));
+}
+
+.connSm { height: 16px; }
+
+/* ── KD badge ── */
+.kdBadge {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 24px;
+  padding: 12px 20px;
+  background: linear-gradient(135deg, rgba(0, 242, 254, 0.06), rgba(52, 211, 153, 0.04));
+  border: 1px solid rgba(0, 242, 254, 0.2);
+  border-radius: 12px;
+}
+
+.kdBadgeIcon {
+  font-size: 20px;
+  color: var(--cyan);
+  flex-shrink: 0;
+}
+
+.kdBadgeText {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+/* ── legend ── */
+.legend {
+  display: flex; gap: 20px;
+  justify-content: center;
+  margin-top: 28px;
+  flex-wrap: wrap;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  padding-top: 20px;
+}
+.legendItem {
+  display: flex; align-items: center; gap: 8px;
+  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted);
+}
+.legDot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
+.legCyan   { background:var(--cyan);   box-shadow:0 0 6px var(--cyan-glow); }
+.legGreen  { background:var(--green);  box-shadow:0 0 6px var(--green-glow); }
+.legPurple { background:var(--purple); box-shadow:0 0 6px var(--purple-glow); }
+.legAmber  { background:var(--amber);  box-shadow:0 0 6px rgba(251, 191, 36, 0.3); }
+
+/* ── entrance animations ── */
+@keyframes fadeUp {
+  from { opacity:0; transform:translateY(10px); }
+  to   { opacity:1; transform:translateY(0); }
+}
+.layer, .stageGroup { animation: fadeUp 0.4s ease both; }
+
+@media (max-width: 600px) {
+  .card {
+    padding: 28px 24px;
+    border-radius: 16px;
+  }
+  .card::before { border-radius: 16px 0 0 0; }
+  .card::after  { border-radius: 0 0 16px 0; }
+  .title {
+    font-size: 20px;
+  }
+  .layerName {
+    font-size: 12px;
+  }
+  .layerDim {
+    font-size: 9px;
+  }
+}