/* ====================================================
   MULTIPLICATION TABLE — Premium Purple Education Theme
   TheWheelOfName.com
   ==================================================== */

:root {
  --mt-purple:       #6C4DF6;
  --mt-purple-dark:  #5538E0;
  --mt-purple-light: #EDE9FE;
  --mt-blue:         #3B82F6;
  --mt-green:        #22C55E;
  --mt-orange:       #F59E0B;
  --mt-red:          #EF4444;
  --mt-bg:           #F8FAFC;
  --mt-white:        #FFFFFF;
  --mt-gray-50:      #F9FAFB;
  --mt-gray-100:     #F3F4F6;
  --mt-gray-200:     #E5E7EB;
  --mt-gray-400:     #9CA3AF;
  --mt-gray-600:     #4B5563;
  --mt-gray-800:     #1F2937;
  --mt-radius:       16px;
  --mt-shadow-sm:    0 1px 4px rgba(0,0,0,.06);
  --mt-shadow-md:    0 4px 16px rgba(0,0,0,.09);
  --mt-shadow-lg:    0 8px 32px rgba(0,0,0,.12);
  --mt-font:         'Nunito', 'Inter', sans-serif;
}

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

body.mt-page {
  font-family: var(--mt-font);
  background: var(--mt-bg);
  color: var(--mt-gray-800);
  min-height: 100vh;
}

/* ── NAVBAR ── */
.mt-nav {
  position: sticky; top: 0; z-index: 200;
  background: var(--mt-white);
  border-bottom: 1px solid var(--mt-gray-200);
  box-shadow: var(--mt-shadow-sm);
}
.mt-nav-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.5rem; height: 64px;
}
.mt-nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
}
.mt-logo-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg,#6C4DF6,#3B82F6);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.mt-logo-text {
  font-weight: 900; font-size: 1.1rem; color: var(--mt-gray-800); line-height: 1;
}
.mt-logo-text span { color: var(--mt-red); }
.mt-nav-links {
  display: flex; gap: 2px; align-items: center; flex: 1;
}
.mt-nav-links a, .mt-nav-drop > a {
  font-size: .85rem; font-weight: 600; color: var(--mt-gray-600);
  text-decoration: none; padding: .45rem .85rem; border-radius: 8px;
  transition: background .15s, color .15s; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.mt-nav-links a:hover, .mt-nav-drop > a:hover { background: var(--mt-gray-100); color: var(--mt-gray-800); }
.mt-nav-links a.active { color: var(--mt-purple); background: var(--mt-purple-light); }
.mt-nav-drop { position: relative; }
.mt-drop-menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  background: var(--mt-white); border: 1px solid var(--mt-gray-200);
  border-radius: 12px; box-shadow: var(--mt-shadow-lg);
  min-width: 200px; padding: 6px 0; z-index: 300;
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .18s, transform .18s;
}
.mt-nav-drop:hover .mt-drop-menu { opacity: 1; pointer-events: all; transform: translateY(0); }
.mt-drop-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: .85rem; font-weight: 600;
  color: var(--mt-gray-600); text-decoration: none;
  transition: background .12s, color .12s;
}
.mt-drop-menu a:hover { background: var(--mt-purple-light); color: var(--mt-purple); }
.mt-nav-actions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.mt-icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: var(--mt-gray-100); color: var(--mt-gray-600);
  cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.mt-icon-btn:hover { background: var(--mt-purple-light); color: var(--mt-purple); }

/* ── PAGE SHELL ── */
.mt-shell {
  max-width: 1400px; margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  min-height: calc(100vh - 64px);
}

/* ── SIDEBAR ── */
.mt-sidebar {
  width: 240px; background: var(--mt-white);
  border-right: 1px solid var(--mt-gray-200);
  padding: 1.5rem 0;
  position: sticky; top: 64px; height: calc(100vh - 64px);
  overflow-y: auto; flex-shrink: 0;
}
.mt-sidebar::-webkit-scrollbar { width: 4px; }
.mt-sidebar::-webkit-scrollbar-thumb { background: var(--mt-gray-200); border-radius: 4px; }
.mt-sb-section { margin-bottom: 1.5rem; }
.mt-sb-label {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .8px; color: var(--mt-gray-400);
  padding: 0 1.25rem .5rem; display: block;
}
.mt-sb-link {
  display: flex; align-items: center; gap: 10px;
  padding: .5rem 1.25rem; font-size: .875rem; font-weight: 600;
  color: var(--mt-gray-600); text-decoration: none;
  transition: background .12s, color .12s; border-radius: 0;
  cursor: pointer; border: none; background: none; width: 100%; text-align: left;
}
.mt-sb-link:hover { background: var(--mt-gray-50); color: var(--mt-gray-800); }
.mt-sb-link.active {
  background: var(--mt-purple-light); color: var(--mt-purple);
  font-weight: 700; border-right: 3px solid var(--mt-purple);
}
.mt-sb-link .sb-icon { font-size: 1rem; width: 20px; text-align: center; }
.mt-sb-divider { border: none; border-top: 1px solid var(--mt-gray-200); margin: .75rem 0; }
.mt-sb-promo {
  margin: 1rem; padding: 1rem;
  background: linear-gradient(135deg, #6C4DF6, #3B82F6);
  border-radius: 14px; color: white; text-align: center;
}
.mt-sb-promo h4 { font-size: .9rem; font-weight: 800; margin-bottom: .4rem; }
.mt-sb-promo p { font-size: .75rem; opacity: .9; margin-bottom: .75rem; line-height: 1.5; }
.mt-sb-promo a {
  display: inline-block; background: white; color: var(--mt-purple);
  padding: .4rem 1rem; border-radius: 8px; font-size: .8rem; font-weight: 800;
  text-decoration: none; transition: transform .15s;
}
.mt-sb-promo a:hover { transform: scale(1.04); }

/* ── MAIN AREA ── */
.mt-main { padding: 1.5rem 2rem 3rem; min-width: 0; }

/* Breadcrumb */
.mt-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: .8rem; color: var(--mt-gray-400); margin-bottom: 1.25rem; flex-wrap: wrap;
}
.mt-breadcrumb a { color: var(--mt-blue); text-decoration: none; font-weight: 500; }
.mt-breadcrumb a:hover { text-decoration: underline; }
.mt-breadcrumb .sep { color: var(--mt-gray-300); }
.mt-breadcrumb .cur { color: var(--mt-gray-800); font-weight: 600; }

/* Page Header */
.mt-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.mt-page-title-row { display: flex; align-items: center; gap: 1rem; }
.mt-page-icon {
  width: 60px; height: 60px; border-radius: 16px;
  background: linear-gradient(135deg, #6C4DF6, #3B82F6);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 900; color: white; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(108,77,246,.3);
}
.mt-page-title h1 { font-size: 1.8rem; font-weight: 900; color: var(--mt-gray-800); line-height: 1.1; }
.mt-page-title p { font-size: .9rem; color: var(--mt-gray-400); margin-top: .2rem; }
.mt-header-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.mt-header-btn {
  display: flex; align-items: center; gap: 6px;
  padding: .5rem 1rem; border-radius: 10px; font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: all .2s; border: 1.5px solid var(--mt-gray-200);
  background: var(--mt-white); color: var(--mt-gray-700); text-decoration: none;
}
.mt-header-btn:hover { border-color: var(--mt-purple); color: var(--mt-purple); background: var(--mt-purple-light); }
.mt-header-btn.primary {
  background: linear-gradient(135deg, #6C4DF6, #3B82F6);
  color: white; border-color: transparent;
  box-shadow: 0 4px 12px rgba(108,77,246,.3);
}
.mt-header-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(108,77,246,.4); }

/* Control Panel */
.mt-controls {
  background: var(--mt-white); border-radius: var(--mt-radius);
  padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
  box-shadow: var(--mt-shadow-sm); border: 1px solid var(--mt-gray-200);
}
.mt-controls-row {
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap;
}
.mt-controls-row + .mt-controls-row { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--mt-gray-100); }
.mt-ctrl-group { display: flex; flex-direction: column; gap: .35rem; }
.mt-ctrl-group label { font-size: .75rem; font-weight: 700; color: var(--mt-gray-600); text-transform: uppercase; letter-spacing: .5px; }
.mt-ctrl-select, .mt-ctrl-input {
  border: 1.5px solid var(--mt-gray-200); border-radius: 10px;
  padding: .5rem .85rem; font-size: .9rem; font-weight: 600;
  color: var(--mt-gray-800); background: var(--mt-white);
  transition: border-color .15s, box-shadow .15s; outline: none;
  min-width: 90px;
}
.mt-ctrl-select:focus, .mt-ctrl-input:focus {
  border-color: var(--mt-purple);
  box-shadow: 0 0 0 3px rgba(108,77,246,.12);
}
/* Style group */
.mt-style-group { display: flex; gap: 4px; }
.mt-style-btn {
  padding: .45rem .9rem; border-radius: 8px; font-size: .8rem; font-weight: 700;
  border: 1.5px solid var(--mt-gray-200); background: var(--mt-white);
  color: var(--mt-gray-600); cursor: pointer; transition: all .15s;
}
.mt-style-btn:hover { border-color: var(--mt-purple); color: var(--mt-purple); }
.mt-style-btn.active {
  background: var(--mt-purple); color: white; border-color: var(--mt-purple);
  box-shadow: 0 2px 8px rgba(108,77,246,.3);
}
/* Highlight group */
.mt-hl-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mt-hl-btn {
  padding: .4rem .85rem; border-radius: 8px; font-size: .8rem; font-weight: 700;
  border: 1.5px solid var(--mt-gray-200); background: var(--mt-white);
  color: var(--mt-gray-600); cursor: pointer; transition: all .15s;
}
.mt-hl-btn:hover { border-color: var(--mt-purple); color: var(--mt-purple); }
.mt-hl-btn.active { background: var(--mt-purple); color: white; border-color: var(--mt-purple); }
.mt-hl-input {
  width: 56px; border: 1.5px solid var(--mt-gray-200); border-radius: 8px;
  padding: .38rem .6rem; font-size: .85rem; font-weight: 700; text-align: center;
  outline: none; transition: border-color .15s;
}
.mt-hl-input:focus { border-color: var(--mt-purple); }
/* Sound toggle */
.mt-toggle-wrap { display: flex; align-items: center; gap: .6rem; font-size: .85rem; font-weight: 700; color: var(--mt-gray-700); }
.mt-toggle {
  position: relative; display: inline-block; width: 44px; height: 24px;
}
.mt-toggle input { opacity: 0; width: 0; height: 0; }
.mt-toggle-slider {
  position: absolute; inset: 0; border-radius: 24px;
  background: var(--mt-gray-200); cursor: pointer; transition: background .2s;
}
.mt-toggle-slider::before {
  content: ''; position: absolute; width: 18px; height: 18px;
  border-radius: 50%; background: white; left: 3px; top: 3px;
  transition: transform .2s; box-shadow: var(--mt-shadow-sm);
}
.mt-toggle input:checked + .mt-toggle-slider { background: var(--mt-purple); }
.mt-toggle input:checked + .mt-toggle-slider::before { transform: translateX(20px); }

/* ── CONTENT GRID ── */
.mt-content-grid {
  display: grid; grid-template-columns: minmax(300px, 480px) 1fr;
  gap: 1.25rem; margin-bottom: 1.5rem;
  align-items: start;
}

/* ── TABLE CARD ── */
.mt-table-card {
  background: var(--mt-white); border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow-md); overflow: hidden;
  border: 1px solid var(--mt-gray-200);
}
.mt-table-header {
  background: linear-gradient(135deg, #6C4DF6 0%, #3B82F6 100%);
  padding: 1rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.mt-table-header h2 { font-size: 1.3rem; font-weight: 900; color: white; }
.mt-sound-btn {
  background: rgba(255,255,255,.2); border: none; color: white;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.mt-sound-btn:hover { background: rgba(255,255,255,.35); }
.mt-sound-btn.mt-speaking { background: #EF4444; animation: mt-pulse .8s ease-in-out infinite alternate; }
@keyframes mt-pulse { from{opacity:1} to{opacity:.65} }
.mt-table-body { padding: .15rem 0; }
.mt-table-row {
  display: grid;
  grid-template-columns: 56px 32px 56px 32px 1fr;
  align-items: center;
  padding: .32rem 2rem; transition: background .12s;
  gap: 0 .5rem;
}
.mt-table-row:hover { background: var(--mt-gray-50); }
.mt-table-row.highlight-even  { background: #EFF6FF; }
.mt-table-row.highlight-odd   { background: #F0FDF4; }
.mt-table-row.highlight-prime { background: #FFF7ED; }
.mt-table-row.highlight-mult  { background: #FEF9C3; }
.mt-tr-num {
  font-size: 1.3rem; font-weight: 900; color: var(--mt-purple);
}
.mt-tr-op { font-size: 1rem; color: var(--mt-gray-400); text-align: center; }
.mt-tr-mul { font-size: 1rem; font-weight: 600; color: var(--mt-gray-600); }
.mt-tr-eq { font-size: 1rem; color: var(--mt-gray-400); text-align: center; }
.mt-tr-res {
  font-size: 1.3rem; font-weight: 900; color: var(--mt-purple);
  transition: opacity .2s;
}
.mt-tr-res.hidden { opacity: 0; }
.mt-table-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--mt-gray-100);
  display: flex; gap: .75rem; flex-wrap: wrap;
}
.mt-table-btn {
  flex: 1; min-width: 90px; padding: .6rem 1rem;
  border-radius: 10px; font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: all .2s; border: none; text-align: center;
}
.mt-table-btn.purple {
  background: linear-gradient(135deg, #6C4DF6, #3B82F6);
  color: white; box-shadow: 0 3px 10px rgba(108,77,246,.3);
}
.mt-table-btn.purple:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(108,77,246,.4); }
.mt-table-btn.outline {
  background: var(--mt-white); border: 1.5px solid var(--mt-gray-200); color: var(--mt-gray-600);
}
.mt-table-btn.outline:hover { border-color: var(--mt-purple); color: var(--mt-purple); }

/* ── RIGHT COLUMN ── */
.mt-right-col { display: flex; flex-direction: column; gap: 1.25rem; }

/* Visual Grid Card */
.mt-card {
  background: var(--mt-white); border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow-sm); border: 1px solid var(--mt-gray-200);
  overflow: hidden;
}
.mt-card-header {
  padding: .9rem 1.25rem; border-bottom: 1px solid var(--mt-gray-100);
  font-size: .95rem; font-weight: 800; color: var(--mt-gray-800);
  display: flex; align-items: center; gap: 8px;
}
.mt-grid-table {
  width: 100%; border-collapse: collapse; font-size: .78rem; font-weight: 600;
}
.mt-grid-table th, .mt-grid-table td {
  padding: .4rem .3rem; text-align: center; border: 1px solid var(--mt-gray-100);
}
.mt-grid-table th { background: var(--mt-gray-50); color: var(--mt-gray-600); font-weight: 800; }
.mt-grid-table td { color: var(--mt-gray-700); cursor: pointer; transition: background .12s; }
.mt-grid-table td:hover { background: var(--mt-purple-light); color: var(--mt-purple); }
.mt-grid-table .active-row { background: var(--mt-purple); color: white; font-weight: 900; }
.mt-grid-table .active-col { background: var(--mt-purple-light); }

/* Did You Know Card */
.mt-dyk-card { padding: 1.25rem; }
.mt-dyk-card .dyk-number {
  font-size: 4rem; font-weight: 900; color: var(--mt-orange);
  line-height: 1; float: right; margin-left: 12px;
  text-shadow: 0 2px 8px rgba(245,158,11,.25);
}
.mt-dyk-card h3 { font-size: .95rem; font-weight: 800; color: var(--mt-gray-800); margin-bottom: .6rem; display: flex; align-items: center; gap: 6px; }
.mt-dyk-card ul { list-style: none; padding: 0; }
.mt-dyk-card ul li {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: .82rem; color: var(--mt-gray-600); margin-bottom: .4rem; line-height: 1.45;
}
.mt-dyk-card ul li::before { content: '✓'; color: var(--mt-green); font-weight: 900; flex-shrink: 0; margin-top: 1px; }

/* Practice Mode Card */
.mt-quiz-card { padding: 1.25rem; }
.mt-quiz-card .quiz-header { display: flex; align-items: center; gap: 10px; margin-bottom: .6rem; }
.mt-quiz-card .quiz-icon { font-size: 1.5rem; }
.mt-quiz-card .quiz-title { font-size: .95rem; font-weight: 800; color: var(--mt-purple); }
.mt-quiz-card p { font-size: .82rem; color: var(--mt-gray-500); margin-bottom: .9rem; }
.mt-quiz-btn {
  width: 100%; padding: .65rem; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #6C4DF6, #3B82F6); color: white;
  font-size: .9rem; font-weight: 800; cursor: pointer;
  transition: all .2s; box-shadow: 0 3px 10px rgba(108,77,246,.3);
}
.mt-quiz-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(108,77,246,.4); }

/* ── QUIZ OVERLAY ── */
.mt-quiz-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.5); align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.mt-quiz-overlay.open { display: flex; }
.mt-quiz-modal {
  background: white; border-radius: 24px; padding: 2.5rem;
  width: min(480px, 92vw); text-align: center;
  animation: mtScaleIn .25s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.mt-quiz-modal h2 { font-size: 1.5rem; font-weight: 900; color: var(--mt-gray-800); margin-bottom: .5rem; }
.mt-quiz-q {
  font-size: 2.8rem; font-weight: 900; color: var(--mt-purple);
  margin: 1.25rem 0 .75rem;
}
.mt-quiz-input {
  width: 100%; padding: .85rem 1.25rem; border: 2px solid var(--mt-gray-200);
  border-radius: 12px; font-size: 1.4rem; font-weight: 800; text-align: center;
  outline: none; transition: border-color .15s;
  margin-bottom: .75rem;
}
.mt-quiz-input:focus { border-color: var(--mt-purple); box-shadow: 0 0 0 3px rgba(108,77,246,.12); }
.mt-quiz-input.correct { border-color: var(--mt-green); background: #F0FDF4; }
.mt-quiz-input.wrong   { border-color: var(--mt-red); background: #FEF2F2; }
.mt-quiz-feedback { font-size: 1rem; font-weight: 700; min-height: 1.4rem; margin-bottom: .75rem; }
.mt-quiz-feedback.correct { color: var(--mt-green); }
.mt-quiz-feedback.wrong   { color: var(--mt-red); }
.mt-quiz-score { font-size: .85rem; color: var(--mt-gray-500); margin-bottom: .75rem; }
.mt-quiz-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.mt-quiz-action-btn {
  padding: .65rem 1.4rem; border-radius: 10px; font-size: .9rem; font-weight: 800;
  cursor: pointer; transition: all .2s; border: none;
}
.mt-quiz-action-btn.submit { background: linear-gradient(135deg,#6C4DF6,#3B82F6); color: white; }
.mt-quiz-action-btn.skip { background: var(--mt-gray-100); color: var(--mt-gray-600); }
.mt-quiz-action-btn.close-q { background: var(--mt-red); color: white; }
.mt-quiz-action-btn:hover { transform: translateY(-1px); }
.mt-quiz-progress {
  height: 6px; background: var(--mt-gray-100); border-radius: 6px; margin-bottom: 1rem; overflow: hidden;
}
.mt-quiz-progress-bar { height: 100%; background: linear-gradient(90deg,#6C4DF6,#22C55E); border-radius: 6px; transition: width .3s; }

/* ── MORE TABLES ── */
.mt-more-section { margin-bottom: 1.5rem; }
.mt-section-title { font-size: 1.1rem; font-weight: 800; color: var(--mt-gray-800); margin-bottom: .75rem; }
.mt-tables-scroll { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
.mt-tables-scroll::-webkit-scrollbar { height: 4px; }
.mt-tables-scroll::-webkit-scrollbar-thumb { background: var(--mt-gray-200); border-radius: 4px; }
.mt-table-chip {
  flex-shrink: 0; width: 88px; height: 88px; border-radius: 14px;
  border: 2px solid var(--mt-gray-200); background: var(--mt-white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s; text-decoration: none; gap: 4px;
}
.mt-table-chip:hover { border-color: var(--mt-purple); box-shadow: 0 4px 14px rgba(108,77,246,.2); transform: translateY(-2px); }
.mt-table-chip.active { border-color: var(--mt-purple); background: var(--mt-purple-light); }
.mt-chip-num { font-size: 1.6rem; font-weight: 900; }
.mt-chip-label { font-size: .7rem; font-weight: 700; color: var(--mt-gray-400); }
/* colorful chip numbers */
.mt-table-chip:nth-child(1)  .mt-chip-num { color: #22C55E; }
.mt-table-chip:nth-child(2)  .mt-chip-num { color: var(--mt-purple); }
.mt-table-chip:nth-child(3)  .mt-chip-num { color: #F59E0B; }
.mt-table-chip:nth-child(4)  .mt-chip-num { color: #3B82F6; }
.mt-table-chip:nth-child(5)  .mt-chip-num { color: #EF4444; }
.mt-table-chip:nth-child(6)  .mt-chip-num { color: #8B5CF6; }
.mt-table-chip:nth-child(7)  .mt-chip-num { color: #EC4899; }
.mt-table-chip:nth-child(8)  .mt-chip-num { color: #F97316; }
.mt-table-chip:nth-child(9)  .mt-chip-num { color: #06B6D4; }
.mt-table-chip:nth-child(10) .mt-chip-num { color: #84CC16; }
.mt-table-chip:nth-child(11) .mt-chip-num { color: #6366F1; }
.mt-table-chip:nth-child(12) .mt-chip-num { color: #14B8A6; }

/* ── LEARNING FEATURES ── */
.mt-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
.mt-feature-card {
  background: var(--mt-white); border-radius: var(--mt-radius);
  padding: 1.25rem; border: 1px solid var(--mt-gray-200); text-align: center;
  box-shadow: var(--mt-shadow-sm); transition: transform .2s, box-shadow .2s;
}
.mt-feature-card:hover { transform: translateY(-3px); box-shadow: var(--mt-shadow-md); }
.mt-feature-icon {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto .75rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.mt-feature-icon.purple { background: linear-gradient(135deg,#EDE9FE,#DDD6FE); }
.mt-feature-icon.green  { background: linear-gradient(135deg,#DCFCE7,#BBF7D0); }
.mt-feature-icon.blue   { background: linear-gradient(135deg,#DBEAFE,#BFDBFE); }
.mt-feature-icon.orange { background: linear-gradient(135deg,#FEF3C7,#FDE68A); }
.mt-feature-card h4 { font-size: .9rem; font-weight: 800; color: var(--mt-purple); margin-bottom: .35rem; }
.mt-feature-card p { font-size: .78rem; color: var(--mt-gray-500); line-height: 1.5; }

/* ── SEO SECTIONS ── */
.mt-seo-section {
  background: var(--mt-white); border-radius: var(--mt-radius);
  padding: 2rem; margin-bottom: 1.25rem;
  border: 1px solid var(--mt-gray-200); box-shadow: var(--mt-shadow-sm);
}
.mt-seo-section h2 { font-size: 1.25rem; font-weight: 900; color: var(--mt-gray-800); margin-bottom: .75rem; }
.mt-seo-section h3 { font-size: 1rem; font-weight: 800; color: var(--mt-gray-700); margin: 1rem 0 .5rem; }
.mt-seo-section p { font-size: .9rem; color: var(--mt-gray-600); line-height: 1.8; margin-bottom: .75rem; }
.mt-seo-section ul { padding-left: 1.25rem; }
.mt-seo-section ul li { font-size: .9rem; color: var(--mt-gray-600); margin-bottom: .4rem; line-height: 1.6; }

/* Tables Reference Grid */
.mt-ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; margin-top: 1rem; }
.mt-ref-card {
  background: var(--mt-gray-50); border-radius: 10px; padding: .75rem 1rem;
  border: 1px solid var(--mt-gray-200); font-size: .82rem; font-weight: 600;
  color: var(--mt-gray-700); cursor: pointer; transition: all .15s; text-align: center;
}
.mt-ref-card:hover { background: var(--mt-purple-light); color: var(--mt-purple); border-color: var(--mt-purple); }

/* FAQ */
.mt-faq-item { border-bottom: 1px solid var(--mt-gray-100); }
.mt-faq-item:last-child { border-bottom: none; }
.mt-faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 0; cursor: pointer; font-size: .9rem; font-weight: 700;
  color: var(--mt-gray-800); gap: .75rem;
  background: none; border: none; width: 100%; text-align: left;
}
.mt-faq-q:hover { color: var(--mt-purple); }
.mt-faq-q .faq-arrow { font-size: .75rem; color: var(--mt-gray-400); transition: transform .2s; flex-shrink: 0; }
.mt-faq-q.open .faq-arrow { transform: rotate(180deg); }
.mt-faq-a { display: none; padding: 0 0 1rem; font-size: .88rem; color: var(--mt-gray-600); line-height: 1.7; }
.mt-faq-a.open { display: block; }

/* Related Tools */
.mt-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; margin-top: 1rem; }
.mt-related-link {
  display: flex; align-items: center; gap: 10px;
  padding: .85rem 1rem; border-radius: 12px; border: 1.5px solid var(--mt-gray-200);
  background: var(--mt-white); text-decoration: none; color: var(--mt-gray-700);
  font-size: .85rem; font-weight: 700; transition: all .2s;
}
.mt-related-link:hover { border-color: var(--mt-purple); color: var(--mt-purple); background: var(--mt-purple-light); transform: translateY(-2px); box-shadow: var(--mt-shadow-sm); }
.mt-related-link .rel-icon { font-size: 1.3rem; }

/* ── FOOTER ── */
.mt-footer {
  background: var(--mt-gray-800); color: var(--mt-gray-400);
  text-align: center; padding: 1.5rem; font-size: .82rem;
}
.mt-footer a { color: var(--mt-gray-400); text-decoration: none; margin: 0 .6rem; }
.mt-footer a:hover { color: white; }

/* ── ANIMATIONS ── */
@keyframes mtScaleIn {
  from { transform: scale(.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes mtPop {
  0%   { transform: scale(.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.mt-row-animate { animation: mtPop .25s ease forwards; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .mt-content-grid { grid-template-columns: 1fr; }
  .mt-right-col { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .mt-shell { grid-template-columns: 1fr; }
  .mt-sidebar { display: none; }
  .mt-main { padding: 1rem; }
  .mt-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .mt-right-col { grid-template-columns: 1fr; }
  .mt-features { grid-template-columns: 1fr 1fr; }
  .mt-page-header { flex-direction: column; align-items: flex-start; }
  .mt-controls-row { gap: .75rem; }
}

/* TABLE CARD FULLSCREEN — driven by .mt-fs-active class added via JS */
.mt-fs-active {
  background: linear-gradient(135deg, #1a0f4e 0%, #2d1b69 60%, #1e3a5f 100%) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 2.5rem 1.5rem !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}
.mt-fs-active .mt-table-header {
  width: 100%;
  max-width: 580px;
  border-bottom: 1px solid rgba(255,255,255,.25);
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  background: transparent !important;
}
.mt-fs-active .mt-table-header h2 {
  color: white;
  font-size: 2rem;
}
.mt-fs-active .mt-sound-btn {
  background: rgba(255,255,255,.18);
  color: white;
}
.mt-fs-active .mt-table-body {
  width: 100%;
  max-width: 580px;
  flex: 1;
  overflow-y: auto;
  padding: .25rem 0;
  background: transparent !important;
}
.mt-fs-active .mt-table-row {
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 10px !important;
  color: white !important;
  font-size: 1.1rem;
  padding: .65rem 1.25rem;
  margin-bottom: .35rem;
  display: grid !important;
  grid-template-columns: 56px 32px 56px 32px 1fr !important;
  align-items: center !important;
}
.mt-fs-active .mt-table-row:hover {
  background: rgba(255,255,255,.16) !important;
}
.mt-fs-active .mt-tr-num { color: #C4B5FD !important; font-weight: 900; }
.mt-fs-active .mt-tr-op  { color: rgba(255,255,255,.45) !important; }
.mt-fs-active .mt-tr-mul { color: white !important; font-weight: 700; }
.mt-fs-active .mt-tr-eq  { color: rgba(255,255,255,.45) !important; }
.mt-fs-active .mt-tr-res {
  color: #A78BFA !important;
  font-size: 1.3rem;
  font-weight: 900;
}
.mt-fs-active .mt-table-footer {
  width: 100%;
  max-width: 580px;
  margin-top: 1.25rem;
  display: flex !important;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.mt-fs-active .mt-table-btn {
  background: rgba(255,255,255,.15) !important;
  color: white !important;
  border-color: rgba(255,255,255,.3) !important;
}
.mt-fs-active .mt-table-btn.purple {
  background: linear-gradient(135deg,#6C4DF6,#3B82F6) !important;
}
.mt-fs-active .mt-table-btn:hover {
  background: rgba(255,255,255,.25) !important;
}
/* hide highlight colors in fullscreen — they clash with dark bg */
.mt-fs-active .mt-table-row.highlight-even,
.mt-fs-active .mt-table-row.highlight-odd,
.mt-fs-active .mt-table-row.highlight-prime,
.mt-fs-active .mt-table-row.highlight-mult {
  background: rgba(167,139,250,.2) !important;
}