html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(184, 58, 31, 0.20) 0%, transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(184, 58, 31, 0.08) 0%, transparent 36%),
    linear-gradient(180deg, #0f0d0d 0%, #0a0a0a 100%) !important;
  font-family: 'Ubuntu', 'Ubuntu Mono', 'Cantarell', 'Noto Sans', 'Liberation Sans', 'FreeSans', 'DejaVu Sans', sans-serif;
  color: #1f2937;
}

:root {
  --sidebar-width: 320px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 75%);
  z-index: -1;
  pointer-events: none;
}

/* =========================================
   1. HEADER / TOPBAR (GLOBAL)
========================================= */
header, .navbar, .header-container {
  background-color: #FFA1C5 !important;
  color: #4a4a4a; 
}

.topbar {
  position: fixed !important; /* 🚀 KUNCI HEADER FREEZE */
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  z-index: 999 !important;
  background: #FFA1C5 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden;
  padding: 6px 14px !important;
}

.topbar > * {
  position: relative;
  z-index: 1;
}

body.sidebar-open .topbar {
  background: rgba(255, 161, 197, 0.72) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
  z-index: 998 !important;
}

body.sidebar-open .topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

#resultInfo {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: default !important;
}

.branding h1 {
  margin: 0;
  font-size: 1.2rem;
}

.branding p {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: #4b5563;
}

.branding img {
  height: 65px !important;
  width: auto !important;
  max-width: none !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  cursor: pointer !important;
  transition: transform 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  display: block !important;
}

.branding img:hover {
  transform: scale(1.08) !important;
}

.controls {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}

select, input, .action-btn, .menu-btn {
  width: 100%;
  box-sizing: border-box;
  padding: 0.62rem 0.95rem;
  font-size: 14px;
  font-family: Ubuntu, sans-serif;
  border-radius: 999px;
  border: none;
}

select, input, .action-btn {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.action-btn {
  cursor: pointer;
  font-weight: 700;
}

.hamburger {
  align-self: center;
  width: 40px;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
}

.hamburger-svg {
  width: 24px;
  height: 24px;
  display: block;
  color: #222 !important;
}

.topbar select, .topbar input {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #333 !important;
}

/* SEARCH ICON BUTTON - FACEBOOK STYLE + SVG */
.search-icon-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: all 0.25s ease;
  color: #1f2937;
}

.search-icon-btn:hover {
  background: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.search-icon-btn:active {
  transform: scale(0.95);
}

.search-icon-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.search-icon-btn:disabled:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: none;
  box-shadow: none;
}

.search-svg {
  transition: stroke 0.2s ease;
}

.search-icon-btn:hover .search-svg {
  stroke: #ff4d6d;
}

/* =========================================
   2. GRID UTAMA & LAYOUT KARTU
========================================= */
#grid {
  flex: 1 !important; 
  align-content: start !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 15px !important;
  padding: 15px !important;
  padding-top: 112px !important; /* 🚀 TARUH DI SINI BIAR GAK KETIMPA PADDING 15PX */
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}

.card {
  background-color: transparent !important; 
  border: none !important;
  border-radius: 20px !important; 
  overflow: hidden !important; 
}

.card-image {
  height: 220px !important;
  background-color: rgba(255, 161, 197, 0.9) !important;
  position: relative;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid #ff8fba !important; 
  box-sizing: border-box !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: pointer !important;
}

.card-image:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
}

.card-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 15px !important;
  text-align: center !important;
  align-content: center;
  justify-items: center;
  color: #ffffff !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: pointer !important;
}

.card-overlay .kanji {
  font-size: clamp(36px, 6vw, 52px) !important; 
  margin-top: -15px !important; 
  margin-bottom: 12px !important; 
  white-space: nowrap !important;
  color: #111111 !important;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
  font-weight: 900 !important; 
}

.card-overlay .kana, .card-overlay .romaji, .card-overlay .meaning {
  color: #111111 !important;
  margin: 1px 0 !important;
}

.kana { font-size: 16px; font-weight: 500; }
.kanji { font-size: 38px; line-height: 1.1; font-weight: 700; }
.romaji { font-size: 14px; opacity: 0.95; }
.meaning { 
  font-size: 15px; 
  font-weight: 700; 
  text-transform: capitalize !important; 
}

.play-audio-btn {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;
  width: 38px !important;
  height: 38px !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
  color: #000000 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
  z-index: 5;
}

.download-card-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.4); 
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: all 0.2s ease;
  color: #ff4d6d; 
}

.download-card-btn:hover {
  background: #ff4d6d;
  color: #ffffff; 
  transform: scale(1.1) translateY(-2px); 
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(255, 77, 109, 0.4);
}

.watermark-logo {
  color: #ff8fa3 !important; 
}

/* =========================================
   3. MODAL (KANJI, EXPANDED & FILTER)
========================================= */
.kanji-modal,
#kanjiModal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px; 
  box-sizing: border-box;
}

.kanji-modal.active,
#kanjiModal.active {
  display: flex;
}

.kanji-modal-content {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  background: #ffffff !important;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden; 
  box-sizing: border-box;
}

.kanji-modal-content h4 {
  margin: 14px 4px 8px;
  color: #374151;
}

.card-image.expanded {
  width: 100%;
  padding: 32px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

#modalClose {
  display: none !important;
}

#kanjiModal .card-overlay,
#kanjiModal .card-overlay * {
  cursor: default !important;        
  pointer-events: none !important;   
  transition: none !important;       
}

#kanjiModal .card-image.expanded:hover {
  transform: none !important;        
  box-shadow: none !important;       
  transition: none !important;       
}

#kanjiModal .play-audio-btn {
  pointer-events: auto !important;   
  cursor: pointer !important;        
  transition: none !important;       
}

.kanji-modal-backdrop {
  cursor: pointer;
}

#kanjiModal .card-image.expanded {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

#kanjiModal * {
  max-width: 100%;
  box-sizing: border-box;
}

.expanded-card .kanji, .expanded-card .kana, .expanded-card .romaji, .expanded-card .meaning {
  color: #111111 !important;
}

.expanded-card .kana { font-size: clamp(20px, 5vw, 24px); } 
.expanded-card .kanji { font-size: clamp(116px, 15vw, 172px); line-height: 0.86; font-weight: 900; letter-spacing: 1px; } 
.expanded-card .romaji { font-size: clamp(18px, 4vw, 20px); }
.expanded-card .meaning { 
  font-size: clamp(18px, 4vw, 22px); 
  text-transform: capitalize !important; 
}

#kanjiModal .kanji-modal-content {
  padding: 16px !important;
}

#kanjiModal #expandedCard {
  margin: 0 0 8px !important;
}

#kanjiModal #expandedCard .card-image.expanded {
  border-radius: 18px !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
}

/* Modal Filter */
.filter-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  padding: 6px 14px !important;
}

.filter-modal.active { display: flex; }

.filter-modal-content {
  width: 100%;
  max-width: 720px;
  max-height: 94vh;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.filter-modal-header {
  background: #ffb7c5;
  padding: 20px 26px;
  text-align: center;
  position: relative;
  flex-shrink: 0;
}

.filter-modal-header h3 {
  margin: 0;
  font-size: 1.5rem;
  color: #1f2937;
}

.filter-modal-content h2, .modal-header {
  background-color: rgba(255, 161, 197, 0.9) !important;
}

#filterModalClose {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 42px;
  height: 42px;
  background: #fff;
  border: none;
  border-radius: 50%;
  font-size: 26px;
  color: #e11d48;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
  z-index: 10;
}

.modal-search-input {
  width: 92%;
  margin: 24px auto 22px;
  padding: 17px 22px;
  font-size: 1.12rem;
  border: 2px solid #ffb7c5; /* 🚀 TITIK KOMA SUDAH DIPERBAIKI */
  border-radius: 999px;
  outline: none;
}

.filter-section h4 {
  margin: 8px 0 16px 10px;
  color: #374151;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 0 12px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
  padding: 0 12px;
}

.level-btn, .cat-btn {
  padding: 15px 10px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.level-btn.active, .cat-btn.active {
  background: #ffcddb;
  border-color: #ff4d6d;
  color: #1f2937;
}

.filter-actions {
  padding: 20px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.apply-filter-btn {
  width: 100%;
  background: #ff4d6d;
  color: white;
  padding: 17px;
  border: none;
  border-radius: 999px;
  font-size: 1.15rem;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(255,77,109,0.4);
  cursor: pointer;
}

.reset-filter-btn {
  width: 100%;
  background: white;
  color: #6b7280;
  padding: 15px;
  border: 2px solid #e5e7eb;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.reset-filter-btn:hover {
  border-color: #ff4d6d;
  color: #ff4d6d;
  background: #fff9fa;
}

/* =========================================
   4. RECOMMENDATION ROW & SIDEBAR
========================================= */
#recommendationRow, .recommendation-row {
  display: flex !important;
  flex-wrap: nowrap !important; 
  gap: 16px !important;
  padding: 20px !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; 
  box-sizing: border-box !important;
}

#recommendationRow::-webkit-scrollbar, .recommendation-row::-webkit-scrollbar { height: 8px; }
#recommendationRow::-webkit-scrollbar-thumb, .recommendation-row::-webkit-scrollbar-thumb {
  background: rgba(255, 77, 109, 0.4); 
  border-radius: 10px;
}
#recommendationRow::-webkit-scrollbar-thumb:hover, .recommendation-row::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 77, 109, 0.7); 
}

#recommendationRow .card, .recommendation-row .recommendation-item {
  flex: 0 0 auto !important; 
  min-width: 130px !important; 
  margin: 0 !important;
}

.recommendation-item {
  position: relative;
  cursor: pointer;
  min-width: 92px;
  padding: 10px 10px 34px;
  border-radius: 12px;
  background: #242526;
  display: grid;
  justify-items: center;
}

.rec-kanji { font-size: 28px; line-height: 1.1; white-space: nowrap; word-break: keep-all; writing-mode: horizontal-tb; text-orientation: mixed; color: #ffffff; }
.rec-kana { font-size: 12px; color: rgba(255,255,255,0.7); white-space: nowrap; word-break: keep-all; writing-mode: horizontal-tb; text-orientation: mixed; }
.rec-audio-btn {
  position: absolute;
  right: 8px;
  bottom: 6px;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #ffffff;
  cursor: pointer;
  font-size: 11px;
}

#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px),
    radial-gradient(circle at 0% 0%, rgba(184, 58, 31, 0.18) 0%, transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(184, 58, 31, 0.08) 0%, transparent 36%),
    linear-gradient(180deg, #100d0d 0%, #0a0a0a 100%) !important;
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
  will-change: transform;
  transform: translateX(-100%);
  transition: transform 0.35s ease-in-out;
  z-index: 1000;
  padding: 2rem 1.5rem 120px 1.5rem; 
  box-sizing: border-box !important; 
  color: #ffffff;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.28);
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow-y: auto;
}

.logout-floating-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(31, 41, 55, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  z-index: 2;
}

.logout-floating-btn:hover {
  transform: translateY(-1px) scale(1.03);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.18));
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.35);
}

.logout-floating-btn:active {
  transform: scale(0.96);
}

#sidebar.active { transform: translateX(0); }
#sidebar h3 {
  margin: 0 0 18px;
  padding-right: 56px;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.sidebar-section-title {
  margin: 10px 0 14px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: #242526;
  border-radius: 999px;
  padding: 5px 14px;
  display: inline-block;
  width: fit-content;
}

.sidebar-tree { display: grid; gap: 10px; margin-bottom: 14px; }
.sidebar-tree details { background: rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 8px 10px; }
.sidebar-tree summary {
  cursor: pointer; font-weight: 600; list-style: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.sidebar-tree summary::-webkit-details-marker { display: none; }

.subfolder-list { display: grid; gap: 8px; margin-top: 10px; padding-left: 8px; }
.sidebar-actions { display: grid; gap: 10px; margin-top: 12px; }
#sidebar ul { list-style: none; padding: 0; margin-top: 20px; }

.menu-btn {
  text-align: left;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  transition: background 0.2s ease, transform 0.2s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.menu-btn:hover { background: rgba(255, 255, 255, 0.25); transform: translateX(4px); }

/* =========================================
   Duolingo-ish Sidebar Navigation
   - Desktop: sidebar item list yang ringkas (seperti Duolingo)
   - Mobile: navigasi utama via bottom navbar, drawer jadi minimal
   Catatan: mode ini aktif kalau body punya class .duo-nav-enabled
========================================= */

.sidebar-duo-nav {
  display: none;
  gap: 10px;
  margin-bottom: 14px;
}

body.duo-nav-enabled .sidebar-duo-nav {
  display: grid;
}

/* Sembunyikan menu legacy yang panjang biar sidebar rapih */
body.duo-nav-enabled #sidebar .sidebar-tree {
  display: none;
}

.duo-nav-item,
.duo-nav-subitem,
.duo-nav-support {
  width: 100%;
  border: none;
  cursor: pointer;
  text-align: left;
  color: #fff;
  background: #242526;
  border-radius: 999px;
  padding: 0.78rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: none;
  transition: transform 0.18s ease, background 0.18s ease;
}

.duo-nav-item:hover,
.duo-nav-subitem:hover,
.duo-nav-support:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateX(4px);
}

.duo-nav-item:active,
.duo-nav-subitem:active,
.duo-nav-support:active {
  transform: translateX(2px) scale(0.99);
}

.duo-nav-item svg,
.duo-nav-subitem svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  opacity: 0.95;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.duo-nav-item .duo-nav-icon,
.duo-nav-subitem .duo-nav-icon,
.duo-nav-support .duo-nav-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: block;
  object-fit: contain;
}

.duo-nav-item span,
.duo-nav-subitem span,
.duo-nav-support span {
  font-weight: 800;
  letter-spacing: 0.01em;
}

.duo-nav-item.is-active,
.duo-nav-subitem.is-active,
.duo-nav-support.is-active {
  background: rgba(255, 255, 255, 0.92);
  color: #5c1129;
  text-shadow: none;
}

.duo-nav-item.is-active svg,
.duo-nav-subitem.is-active svg,
.duo-nav-support.is-active svg {
  opacity: 1;
}

.duo-nav-item.is-active .duo-nav-icon,
.duo-nav-subitem.is-active .duo-nav-icon,
.duo-nav-support.is-active .duo-nav-icon {
  opacity: 1;
}

.duo-nav-details {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.duo-nav-details > summary {
  list-style: none;
}

.duo-nav-details > summary::-webkit-details-marker {
  display: none;
}

.duo-nav-sub {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 2px 0 0;
}

.duo-nav-subitem {
  padding: 0.7rem 0.85rem;
  background: rgba(255, 255, 255, 0.12);
}

.duo-nav-support {
  background: rgba(255, 255, 255, 0.18);
}

.duo-nav-support svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.duo-nav-support .duo-nav-icon {
  width: 20px;
  height: 20px;
}

.download-export-card {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1080px;
  height: 1080px;
  border-radius: 64px;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.24), transparent 56%),
    radial-gradient(circle at 84% 86%, rgba(255, 255, 255, 0.18), transparent 50%),
    linear-gradient(155deg, #2f3031 0%, #242526 45%, #1d1e1f 100%);
  border: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 18px 44px rgba(255, 255, 255, 0.07),
    inset 0 -20px 38px rgba(35, 8, 15, 0.2),
    0 8px 26px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.download-export-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 56px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  pointer-events: none;
}

.download-export-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 96px 86px 86px;
  box-sizing: border-box;
}

.download-export-watermark {
  position: absolute;
  width: 74%;
  max-width: 690px;
  opacity: 0.06;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: grayscale(100%) saturate(120%) brightness(1.15);
  pointer-events: none;
}

.download-export-watermark-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--jp-calligraphy);
  font-size: 300px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.05);
  transform: rotate(-18deg) translateY(-5px);
  pointer-events: none;
  user-select: none;
  text-transform: uppercase;
}

.download-export-kanji,
.download-export-kana,
.download-export-romaji,
.download-export-meaning {
  position: relative;
  z-index: 1;
  color: #fff8fa;
  text-shadow: 0 8px 22px rgba(36, 7, 13, 0.38);
}

.download-export-kanji {
  font-size: 360px;
  line-height: 0.9;
  font-family: var(--jp-calligraphy);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-top: 0;
  margin-bottom: 8px;
  white-space: nowrap;
  max-width: 100%;
}

.download-export-kana {
  font-size: 72px;
  font-weight: 600;
  color: #ffdce7;
}

.download-export-romaji {
  font-size: 48px;
  font-weight: 500;
  opacity: 0.92;
  color: #ffe9f0;
}

.download-export-meaning {
  font-size: 56px;
  font-weight: 700;
  text-transform: capitalize;
  max-width: 88%;
  color: #fff2f6;
}

#overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px); 
  -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease-in-out;
  z-index: 999; pointer-events: none;
}

#overlay.active {
  opacity: 1; visibility: visible; pointer-events: auto;
  left: var(--sidebar-width); width: calc(100vw - var(--sidebar-width)); 
}

#sidebar::-webkit-scrollbar { width: 6px; }
#sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 3px; }

.sub-details {
  margin-left: 10px;
  margin-bottom: 5px;
  border-left: 2px solid #ff4d6d; 
}

.sub-details summary {
  padding: 8px;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.9em;
  list-style: none; 
}

.level-list {
  display: flex;
  flex-direction: column;
  padding-left: 15px;
  gap: 8px !important;
}

/* =========================================
   5. POSTER & TEST BOARD & LAIN-LAIN
========================================= */
.letter-poster {
  grid-column: 1 / -1;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.letter-poster h2 { margin: 0 0 0.8rem; text-align: center; color: #1f2937; }
.letter-poster-body { display: grid; gap: 16px; overflow-x: auto; }
.letter-section { display: grid; gap: 8px; }
.letter-section h3 { margin: 0; font-size: 0.95rem; color: #374151; }
.letter-row { display: grid !important; grid-template-columns: 80px repeat(5, 1fr) !important; gap: 10px !important; }

.letter-label, .letter-cell {
  min-height: 42px; display: grid; place-items: center; border-radius: 10px;
}
.letter-label { font-weight: 700; color: #1f2937; background: rgba(17, 24, 39, 0.12); }
.letter-cell { font-size: 1.25rem; font-weight: 700; background: rgba(255, 255, 255, 0.86); color: #111827; box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.08); }

.pattern-card {
  position: relative;
  border-radius: 20px;
  padding: 16px 16px 48px;
  background: linear-gradient(160deg, rgba(255, 161, 197, 0.9), rgba(255, 186, 214, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 12px 24px rgba(190, 24, 93, 0.24);
  min-height: 172px;
  display: grid;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pattern-card:hover { transform: translateY(-3px); box-shadow: 0 16px 28px rgba(190, 24, 93, 0.3); }
.pattern-title { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 900; color: #111827; letter-spacing: 0.2px; }
.pattern-example-jp { font-size: 1.08rem; line-height: 1.55; color: #1f2937; }
.pattern-example-id { font-size: 0.95rem; line-height: 1.5; color: #374151; font-style: italic; margin-top: -4px; }
.pattern-meaning { margin-top: auto; font-size: 0.95rem; color: #374151; font-weight: 600; padding-right: 36px; }
.pattern-audio-btn {
  position: absolute; right: 12px; bottom: 12px; border: none; width: 36px; height: 36px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 10px rgba(17, 24, 39, 0.22); cursor: pointer; font-weight: 800;
}

.pattern-grid-layout {
  grid-column: 1 / -1 !important;
  width: min(1200px, 100%) !important;
  margin: 10px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 18px !important;
}

.info-poster {
  border-radius: 16px; background: linear-gradient(135deg, #111827, #374151); color: #fff; padding: 2rem 1.2rem; text-align: center; font-size: 1.1rem; line-height: 1.6;
}

.empty-state {
  grid-column: 1 / -1; text-align: center; padding: 2rem 1rem; color: #374151; background: rgba(255, 255, 255, 0.8); border-radius: 14px;
}

.category-selector { position: relative; }
#categoryBtn { min-width: 220px; }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); padding: 12px 0; min-width: 280px; z-index: 100; margin-top: 8px; }
.dropdown-menu.show { display: block; }
.dropdown-group { padding: 8px 0; }
.dropdown-header { font-weight: 700; color: #1f2937; padding: 8px 16px 4px; font-size: 0.95rem; }
.dropdown-item, .dropdown-menu button { width: 100%; text-align: left; padding: 10px 16px; border: none; background: none; cursor: pointer; font-size: 14px; }
.dropdown-item:hover, .dropdown-menu button:hover { background: #f3f4f6; }

.expression-wide-grid {
  grid-column: 1 / -1 !important; 
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* Pasti 2 kolom di desktop */
  gap: 16px !important;
  width: 100% !important;
  max-width: 1200px !important; 
  margin: 20px auto !important;  
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.expression-wide-card {
  background:
    radial-gradient(circle at 14% 16%, rgba(255,255,255,0.08), transparent 34%),
    radial-gradient(circle at 85% 84%, rgba(125,211,252,0.1), transparent 42%),
    linear-gradient(158deg, #2b2d2f 0%, #242526 56%, #1f2021 100%) !important; 
  border-radius: 20px !important; 
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 10px 25px rgba(0,0,0,0.38) !important; 
  min-height: 140px !important; 
  padding: 20px 20px 35px 20px !important; 
  display: flex !important; 
  flex-direction: column !important; 
  justify-content: center !important; 
  align-items: center !important; 
  text-align: center !important; 
  position: relative !important; 
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  overflow: hidden !important; 
}

.expression-wide-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 28px rgba(190, 24, 93, 0.25) !important;
}

/* ANTI WRAP TEXT (Mengecil otomatis di HP) */
.wide-kanji, .wide-kana, .wide-romaji, .wide-meaning { 
  display: block !important; 
  width: 100% !important; 
  margin: 0 auto !important; 
  white-space: nowrap !important; 
  overflow: hidden !important; 
  text-overflow: ellipsis !important; 
}

.wide-kanji { 
  font-size: clamp(1.5rem, 3.5vw, 2.2rem) !important; 
  font-weight: 900 !important; 
  margin-bottom: 6px !important; 
  color: #111827 !important;
  letter-spacing: 0.5px !important;
}

.wide-kana { 
  font-size: clamp(0.95rem, 2.5vw, 1.1rem) !important; 
  color: #1f2937 !important;
  margin-bottom: 2px !important; 
}

.wide-romaji { 
  font-size: clamp(0.85rem, 2vw, 0.95rem) !important; 
  color: #4b5563 !important; 
  font-style: italic !important; 
  margin-bottom: 8px !important; 
}

.wide-meaning { 
  font-size: clamp(0.95rem, 2.5vw, 1.05rem) !important; 
  font-weight: 700 !important; 
  color: #374151 !important;
}

.wide-play-btn { 
  position: absolute !important; 
  right: 15px !important; 
  bottom: 12px !important; 
  top: auto !important; 
  transform: none !important; 
  border: none !important; 
  width: 40px !important; 
  height: 40px !important; 
  border-radius: 50% !important; 
  background: rgba(255, 255, 255, 0.95) !important; 
  color: #111827 !important; 
  box-shadow: 0 4px 10px rgba(17, 24, 39, 0.2) !important;
  cursor: pointer !important; 
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 3px !important; 
}

.wide-play-btn:hover { 
  transform: scale(1.1) !important; 
}

/* Kanji Card: override grid layout biar poster tidak terpecah jadi 4 kolom */
#grid.kc-grid-mode {
  display: block !important;
  grid-template-columns: none !important;
  padding: var(--topbar-height, 78px) 0 0 0 !important;
  gap: 0 !important;
  overflow-y: auto;
}
.support-btn { display: inline-block; margin-top: 30px; padding: 16px 36px; font-size: 1.2rem; border-radius: 999px; background: white; color: #ff4d6d; font-weight: 700; text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: all 0.3s ease; }
.support-btn:hover { transform: translateY(-3px); }

#supportBtn { width: 100%; padding: 18px 20px; margin-top: 25px; background: linear-gradient(135deg, #ff6b81, #ff9ff3, #a29bfe); color: white; font-weight: 700; font-size: 16px; text-align: center; border: none; border-radius: 16px; cursor: pointer; box-shadow: 0 8px 25px rgba(255, 107, 129, 0.4); transition: all 0.4s ease; position: relative; overflow: hidden; }
#supportBtn:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 12px 35px rgba(255, 107, 129, 0.6); background: linear-gradient(135deg, #ff4757, #ff9ff3, #7f8cff); }
#supportBtn:active { transform: translateY(0) scale(0.98); box-shadow: 0 4px 15px rgba(255, 107, 129, 0.3); }
#supportBtn::before { content: "❤️ "; font-size: 18px; animation: heartbeat 2s infinite; }
@keyframes heartbeat { 0% { transform: scale(1); } 20% { transform: scale(1.3); } 40% { transform: scale(1); } 60% { transform: scale(1.2); } 80% { transform: scale(1); } 100% { transform: scale(1); } }

.test-tree > details { background: rgba(255,255,255,0.1); border-radius: 10px; padding: 6px 8px; }
.nested-subfolder-list .menu-btn { font-size: 13px; }
.test-board { grid-column: 1 / -1; background: rgba(255,255,255,0.9); border-radius: 18px; padding: 1rem; box-shadow: 0 16px 30px rgba(17,24,39,0.2); display: grid; gap: 10px; }
.test-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.test-progress, .test-timer { margin: 0; color: #1f2937; font-weight: 600; }
.test-question-card { border-radius: 16px; min-height: 180px; display: grid; place-items: center; background: linear-gradient(135deg, #f8fafc, #e2e8f0); box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.08); padding: 1rem; }
.test-question-card h2 { margin: 0; font-size: clamp(2rem, 7vw, 4rem); text-align: center; color: #111827; word-break: break-word; }
.test-option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.test-option-btn { border: none; border-radius: 12px; background: #f8fafc; box-shadow: 0 3px 10px rgba(17, 24, 39, 0.12); padding: 0.85rem; font-size: 1.1rem; font-family: Ubuntu, sans-serif; cursor: pointer; }
.test-option-btn.correct { background: #bbf7d0; }
.test-option-btn.wrong { background: #fecaca; }
.finish-test-btn { justify-self: end; width: auto; }

/* =========================================
   6. 🍎 iOS PERFORMANCE OPTIMIZER (SAFE MODE)
========================================= */
.ios-device body::before { position: absolute !important; }
.ios-device * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.ios-device #overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.ios-device .letter-poster { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.ios-device .card-image:hover { transform: scale(1.02) !important; }
.ios-device .kanji-modal-content { transform: none !important; position: relative !important; top: auto !important; left: auto !important; margin: auto !important; }
.ios-device #recommendationRow { -webkit-overflow-scrolling: auto !important; }
.ios-device .card-image { box-shadow: 0 6px 18px rgba(0,0,0,0.3) !important; border-radius: 14px !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ios-device .card-image, .ios-device .card-overlay { transform: translateZ(0); will-change: transform; }
.ios-device .card-image:hover { transform: none !important; }
.ios-device #grid { contain: layout style paint; }

/* =========================================
   7. ATURAN KHUSUS DESKTOP (DI ATAS 768px)
========================================= */
@media (min-width: 769px) {
  .topbar {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important; 
    padding: 12px 30px !important; 
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }

  #hamburger, .branding {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important; 
  }

  #searchBtn {
    margin-left: auto !important;
    position: relative !important;
    z-index: 100 !important;
  }
  
  .controls {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
  }

  #resultInfo {
    position: absolute !important;
    right: 86px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: #374151 !important;
    font-size: 0.9rem;
    font-weight: 700;
    max-width: 58vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    z-index: 99 !important;
  }

  #grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  #sidebar { width: var(--sidebar-width); }
  .kanji-modal-content { width: min(80vw, 900px); }
  .expanded-card .card-image.expanded img { height: 350px; }
  .recommendation-item { min-width: 120px; }
  .rec-kanji { font-size: 36px; }
  .rec-kana { font-size: 14px; }
  .rec-audio-btn { width: 30px; height: 30px; font-size: 12px; }
  .expanded-card .kana { font-size: 26px; }
  .expanded-card .kanji { font-size: 132px; line-height: 0.88; font-weight: 900; }
  .expanded-card .romaji { font-size: 22px; }
  .expanded-card .meaning { font-size: 24px; }
}

@media (min-width: 1024px) {
  #grid { padding-top: 112px !important; }
  .letter-poster { max-width: 960px !important; margin: 18px auto 2.8rem auto !important; padding: 2.5rem 2.4rem 3rem !important; border-radius: 28px; background: rgba(255, 255, 255, 0.975) !important; box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.25); }
  .letter-poster-body { gap: 32px !important; }
  .letter-row { gap: 16px !important; grid-template-columns: 72px repeat(calc(var(--cols, 6) - 1), 92px) !important; justify-content: center; }
  .letter-label, .letter-cell { height: 92px !important; font-size: 1.68rem !important; border-radius: 16px !important; display: flex; align-items: center; justify-content: center; }
  .letter-label { font-size: 1.12rem !important; background: rgba(17, 24, 39, 0.09) !important; font-weight: 700; }
  .letter-cell { background: #ffffff !important; box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.12); transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .letter-cell:hover { transform: scale(1.06) translateY(-4px); box-shadow: 0 14px 32px -8px rgba(236, 72, 153, 0.35); }
}

/* =========================================
   8. ATURAN KHUSUS MOBILE (MAKS 768PX)
========================================= */
@media (max-width: 768px) {
  :root { --sidebar-width: 290px; }

  html,
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    -webkit-overflow-scrolling: touch;
  }

  /* Mobile performance mode: kurangi efek berat agar sidebar + scroll lebih halus */
  body.sidebar-open .topbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #242526 !important;
  }

  #overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.22) !important;
  }

  #sidebar {
    contain: layout paint;
    will-change: transform;
    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.14);
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
  }

  #grid {
    contain: none;
  }

  .card,
  .card-image,
  .wide-card,
  .recommendation-item {
    content-visibility: auto;
    contain-intrinsic-size: 220px;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  .card-image,
  .wide-card {
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22) !important;
    transition: none !important;
  }

  #recommendationRow,
  .recommendation-row {
    scroll-behavior: auto;
  }

  .menu-btn,
  .search-icon-btn,
  .download-card-btn,
  .logout-floating-btn {
    transition: none !important;
  }

  #grid {
    padding-top: 52px !important; 
    gap: 12px !important;
    grid-template-columns: repeat(2, 1fr) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
 .topbar {
    display: flex !important;
    align-items: center !important;
    position: fixed !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-height: 72px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    z-index: 999 !important;
  }

  /* Urutan 1: Hamburger */
  #hamburger { 
    order: 1 !important; 
    margin: 0 !important; 
    flex-shrink: 0 !important; 
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  /* Urutan 2: Logo */
  .branding { 
    order: 2 !important; 
    margin: 0 0 0 2px !important;
    flex-shrink: 0 !important; 
  }
  .branding img { height: 34px !important; }

  /* Urutan 3: KAPSUL (ANTI LONCAT) */
  #resultInfo {
    order: 3 !important;
    position: static !important; 
    margin-left: auto !important; 
    margin-right: 12px !important; 
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    
    background: #ffffff !important;
    color: #1f2937 !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
    
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    max-width: calc(100vw - 160px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    
    transform: none !important;
    transition: none !important;
    animation: none !important; 
  }

  /* Urutan 4: TOMBOL SEARCH */
  #searchBtn {
    order: 4 !important;
    position: static !important; /* 🚀 MATIKAN ABSOLUTE */
    margin: 0 !important;
    height: 46px !important;
    transform: none !important;
    flex-shrink: 0 !important; /* Jangan biarkan tombol search gepeng */
    z-index: 100 !important;
  }
  
  /* --- Overrides Tombol Download untuk Mobile --- */
  .download-card-btn {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    color: #ff4d6d !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 20 !important;
  }

  /* --- Layout Pattern Mobile (legacy) --- */
  #grid.pattern-grid-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding-top: 52px !important;
    margin-top: 0 !important;
  }

  #kanjiModal #recommendationRow,
  #kanjiModal .recommendation-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 10px 4px 15px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  #kanjiModal .recommendation-item {
    flex: 0 0 auto !important;
    width: 110px !important;
    min-width: 110px !important;
    height: auto !important;
    min-height: 90px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  .branding { padding-left: 10px !important; }
  .branding img { height: 65px !important; }
  #supportBtn { padding: 16px 18px; font-size: 15px; margin-top: 20px; }
  .expression-wide-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .branding img { height: 55px !important; }
}

/* =========================================
           LATIHAN MODE BARU
========================================= */

nested-latihan-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

#grid.quiz-active-mode {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(100dvh - 78px) !important;
  margin-top: 78px !important;
  padding: 20px 30px !important;
  overflow: hidden !important;
}

@media (max-width: 768px) {
  body.training-session #grid.quiz-active-mode {
    margin-top: 0 !important;
    padding-top: calc(var(--topbar-height) + 20px) !important;
    min-height: calc(100dvh - var(--topbar-height)) !important;
  }
}

.quiz-wrapper-pro {
  position: relative;
  max-width: 1000px !important; /* Dikecilin dikit dari 1200px biar proporsinya manis */
  width: 100% !important;
  min-height: auto !important; 
  max-height: calc(100dvh - 110px); 
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px; 
  background: rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 20px 50px rgba(20, 24, 30, 0.2);
  padding: 24px 30px !important; 
  box-sizing: border-box;
}

/* Header Info Quiz */
.quiz-section-title { margin: 0; text-align: center; color: #1e293b; font-weight: 800; font-size: 1.05rem; }
.quiz-subtitle { margin: -4px 0 2px; text-align: center; color: #475569; font-weight: 700; font-size: 0.9rem; }

.quiz-head-pro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #d7dfea;
}

.quiz-progress-text { font-weight: 700; color: #334155; font-size: 0.9rem; }
.quiz-timer-text { font-weight: 700; color: #475569; font-size: 0.9rem; }
#quiz-timer { color: #e11d48; margin-left: 4px; font-size: 1.1rem; }

/* Box Biru Soal - SEKARANG ANTI COPAS! */
.quiz-qcard-pro {
  flex: 1; 
  min-height: 180px !important; 
  border-radius: 18px;
  background: linear-gradient(160deg, #f8fafc, #eef2ff);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 25px 40px !important; 
  box-sizing: border-box;
  overflow-y: auto;
  
  /* 🚀 MANTRA ANTI COPAS / HIGHLIGHT */
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  cursor: default !important;
}

/* Teks Soal Jepang */
.quiz-question-main {
  white-space: pre-wrap !important; 
  word-break: keep-all !important; 
  line-height: 1.5 !important;
  margin: 0;
  color: #0f172a;
  /* Font size dirapikan, biar gak terlalu raksasa tapi gak sekecil semut */
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important; 
}

/* Tombol Pilihan Ganda - DIKECILIN BIAR ESTETIK */
.quiz-options-pro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important; /* Jarak antar tombol dirapatkan dikit */
  margin-top: 5px;
}

.quiz-opt-btn-pro {
  min-height: 48px !important; /* 🚀 Tombol gak setebal sebelumnya */
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-weight: 700;
  font-size: 1.1rem !important; /* Font diturunin dikit */
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.quiz-opt-btn-pro:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #94a3b8;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Tombol Selesai - SEKARANG LEBIH GENDUT & ESTETIK */
.quiz-finish-pro {
  display: flex;
  justify-content: center;
  margin-top: 15px; /* Jarak dari pilihan ganda agak dijauhin */
  width: 100%;
}

#finishBtnManual {
  position: absolute;
  top: 18px;
  right: 24px;
  background: #ff4d6d; /* Warna merah pinkish NihonByte */
  color: #ffffff;
  border: none;
  border-radius: 999px; /* Bentuk kapsul sempurna */
  padding: 8px 18px;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(255, 77, 109, 0.35);
  z-index: 10;
  letter-spacing: 0.5px;
}

#finishBtnManual:hover {
  background: #e11d48;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(225, 29, 72, 0.45);
}

#finishBtnManual:active {
  transform: translateY(0);
}

/* KUNCI ANTI SCROLL DI MODE UJIAN */
body.training-session {
  overflow: hidden !important;
  touch-action: none;
}

body.training-session #sidebar,
body.training-session #overlay,
body.training-session #searchBtn,
body.training-session .branding,
body.training-session #hamburger { display: none !important; }

body.training-session .topbar { justify-content: center; display: flex; min-height: 78px; }

body.training-session #resultInfo {
  margin: 0 auto;
  font-weight: 800 !important;
  color: #e11d48 !important; 
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: default !important;
}

/* ─────────────────────────────────────────────────────
   GOI & BUNPOU — Quiz · MOBILE PORTRAIT ONLY
   ⚠️  Landscape diatur TERPISAH di blok
       "GOI & BUNPOU — MODE LATIHAN · Mobile Landscape"
       di bagian bawah file. JANGAN tambah landscape sini.
───────────────────────────────────────────────────── */
@media (max-width: 767px) and (orientation: portrait) {
  #grid.quiz-active-mode {
    padding: 52px 12px 14px !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
  }
  .quiz-wrapper-pro {
    height: auto !important;
    max-height: calc(100dvh - 90px) !important;
    padding: 16px !important;
    gap: 12px !important;
  }
  .quiz-qcard-pro {
    padding: 15px !important;
    min-height: 120px !important;
  }
  .quiz-options-pro {
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
  }
  .quiz-question-main {
    font-size: clamp(1.4rem, 5vw, 2.2rem) !important;
  }
  .quiz-opt-btn-pro {
    min-height: 48px !important;
    font-size: 1rem !important;
  }
  #finishBtnManual {
    top: 14px !important;
    right: 14px !important;
    padding: 6px 14px !important;
    font-size: 0.75rem !important;
  }
  .quiz-section-title {
    padding-top: 34px !important;
  }
  .quiz-subtitle {
    font-size: 0.82rem !important;
  }
  .quiz-head-pro {
    padding: 7px 14px !important;
  }
  .quiz-progress-text,
  .quiz-timer-text {
    font-size: 0.82rem !important;
  }
}

#grid.review-active-mode {
    display: flex !important;
    justify-content: center;
    align-items: center; /* KUNCI: Biar boxnya di tengah vertikal, gak mentok bawah */
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 90px 20px 20px !important; /* Ruang aman untuk header */
    min-height: 100vh;
    box-sizing: border-box;
}

.review-wrapper {
    width: 95% !important;
    max-width: 1200px !important; 
    height: calc(100vh - 120px) !important; /* KUNCI: Kurangi tinggi biar gak nembus taskbar */
    margin: 0 auto !important; 
    background: #ffffff;
    border-radius: 16px;
    padding: 0; 
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    position: relative;
    z-index: 10;
}

body.review-mode-active #searchBtn,
body.review-mode-active #hamburger {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    pointer-events: none !important; 
}

/* Header Review (Judul & Tombol Tutup) */
.review-header {
    padding: 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

/* Area Scrollable untuk List Soal */
.review-content {
    flex: 1;
    overflow-y: auto; /* KUNCI BIAR BISA SCROLL */
    padding: 20px;
    background: #f1f5f9;
}

/* Kartu Soal (Layout Grid Kiri-Kanan di Desktop) */
.review-card {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: grid;
    grid-template-columns: 1fr 1fr; /* Bagi 2 kolom */
    gap: 30px;
    border-left: 6px solid #ccc;
}

.review-card.benar { border-left-color: #22c55e; }
.review-card.salah { border-left-color: #ef4444; }

/* Kolom Kiri: Pertanyaan & Jawaban User */
.review-left-col {
    border-right: 1px dashed #cbd5e1;
    padding-right: 20px;
}

/* Kolom Kanan: Kunci & Penjelasan */
.review-right-col {
    padding-left: 10px;
}

/* Penjelasan Box */
.explanation-box {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
    padding: 12px;
    border-radius: 8px;
    margin-top: 10px;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* RESPONSIF HP (Mobile) - Jadi Atas Bawah */
@media (max-width: 768px) {
    #grid.review-active-mode {
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding: 5px 0px 0px !important;
    }

    .review-wrapper {
        width: 100%;
        height: calc(100dvh - 98px);
        border-radius: 18px;
        margin: 0;
    }
    
    .review-card {
        grid-template-columns: 1fr; /* Jadi 1 kolom */
        gap: 15px;
    }
    
    .review-left-col {
        border-right: none;
        border-bottom: 1px dashed #cbd5e1;
        padding-right: 0;
        padding-bottom: 15px;
    }
    
    .review-right-col {
        padding-left: 0;
    }
}

/* =========================================
   LAYOUT KHUSUS DOKKAI (SPLIT SCREEN)
   (VERSI RAPI & BERSIH)
========================================= */

/* --- 1. BASE LAYOUT (DESKTOP & LAPTOP) --- */

.dokkai-wrapper-pro {
  max-width: 1300px !important; 
  width: 100% !important;
  height: calc(100vh - 120px); /* Teks bisa di-scroll di dalam */
  margin: 0 auto;
  display: flex;
  flex-direction: row; /* Kiri-Kanan */
  gap: 25px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 20px 50px rgba(20, 24, 30, 0.2);
  padding: 30px !important;
  box-sizing: border-box;
  position: relative;
}

/* Kotak Teks Bacaan (Kiri) */
.dokkai-passage-side {
  flex: 1;
  background: #f8fafc;
  border-radius: 16px;
  padding: 30px;
  overflow-y: auto;
  border: 3px solid #64748b;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  cursor: default !important;
}

.dokkai-passage-content {
  font-size: 1.25rem; 
  line-height: 2;
  color: #1e293b;
  font-family: 'Noto Sans JP', sans-serif;
  white-space: pre-wrap;
}

/* Kotak Soal & Pilihan Ganda (Kanan) */
.dokkai-question-side {
  flex: 1.3; /* Porsi digedein biar soal lebih lega */
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto; 
  padding-right: 5px;
  padding-top: 20px;
}

/* Fix Teks Soal Biar Gak Nabrak/Scroll Horizontal */
.dokkai-question-side .quiz-question-main {
  white-space: pre-wrap !important; 
  word-wrap: break-word !important;
  word-break: break-word !important; /* Paksa turun baris */
  overflow-x: hidden !important; /* Buang scroll horizontal */
  font-size: clamp(1.4rem, 2.5vw, 2.2rem) !important; 
}

/* ─────────────────────────────────────────────────────
   DOKKAI — RESPONSIF HP · MOBILE PORTRAIT ONLY
   Berlaku: max-width 767px + portrait
   ⚠️  Landscape diatur TERPISAH di blok
       "DOKKAI SPLIT-SCREEN — Mobile Landscape"
       di bagian bawah file. JANGAN tambah landscape sini.
───────────────────────────────────────────────────── */
@media (max-width: 767px) and (orientation: portrait) {
  .dokkai-wrapper-pro {
    flex-direction: column;
    height: auto;
    max-height: calc(100dvh - 90px);
    padding: 15px !important;
  }

  .dokkai-passage-side {
    flex: none;
    height: 35vh;
    min-height: 200px;
    padding: 15px 20px;
    border-width: 2px;
  }

  .dokkai-passage-content {
    font-size: 1.1rem !important;
  }

  .dokkai-question-side {
    padding-top: 5px;
  }

  /* quiz-head & title dalam konteks dokkai portrait */
  .dokkai-question-side .quiz-section-title {
    padding-top: 0 !important;
    font-size: 0.95rem !important;
  }

  .dokkai-question-side .quiz-head-pro {
    padding: 7px 12px !important;
  }

  .dokkai-question-side .quiz-progress-text,
  .dokkai-question-side .quiz-timer-text {
    font-size: 0.78rem !important;
  }

  .dokkai-question-side #finishBtnManual {
    top: 10px !important;
    right: 10px !important;
    padding: 5px 12px !important;
    font-size: 0.72rem !important;
  }
}

.app-footer {
  width: min(1200px, calc(100% - 24px));
  margin: 18px auto 24px;
  padding: 13px 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 12px;
}

.app-footer p {
  margin: 0;
  line-height: 1.3;
}

.app-footer span {
  opacity: 0.7;
}

/* Footer tetap terlihat pada semua mode latihan/review */
body.training-session .app-footer,
body.review-mode-active .app-footer {
  display: flex !important;
  position: fixed;
  right: 8px;
  top: 86px;
  left: auto;
  bottom: auto;
  transform: none;
  width: auto;
  margin: 0 !important;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  z-index: 1200;
  pointer-events: none;
  opacity: 0.92;
}

/* =========================================
   PAGINATION (JATAH KARTU HALAMAN)
========================================= */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: auto !important; /* 🚀 INI KUNCI BUAT NENDANG KE BAWAH! */
  margin-bottom: 25px !important; 
  padding-top: 20px !important; 
  position: relative;
  z-index: 10;
}

.page-btn {
  background: #ffffff;
  border: 2px solid #f1f5f9;
  color: #475569;
  font-weight: bold;
  font-size: 1rem;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.page-btn:hover:not(:disabled) {
  border-color: #ffb7c5;
  color: #ff4d6d;
  transform: translateY(-2px);
}

.page-btn.active {
  background: #ff4d6d;
  color: #ffffff;
  border-color: #ff4d6d;
  box-shadow: 0 4px 12px rgba(255, 77, 109, 0.4);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #e2e8f0;
  border-color: #e2e8f0;
  box-shadow: none;
}

.page-dots {
  font-weight: bold;
  color: #94a3b8;
  padding: 0 4px;
}

/* Versi Mobie */
@media (max-width: 768px) {
  .page-btn { 
    width: 36px; 
    height: 36px; 
    font-size: 0.9rem; 
  }
  .pagination-container { 
    gap: 5px; 
    margin-bottom: 55px !important;
  }
  .app-footer {
    width: calc(100% - 20px);
    margin: 8px auto 14px;
    padding: 8px 10px;
    font-size: 0.74rem;
    gap: 8px;
  }
  body.training-session .app-footer,
  body.review-mode-active .app-footer {
    top: 84px;
    right: 10px;
    font-size: 0.68rem;
    padding: 5px 9px;
  }
  .letter-poster .letter-row {
    gap: 8px;
  }
  .letter-cell, .letter-label {
    padding: 12px 5px !important; 
    font-size: 1.1rem; 
  }
}

/* =========================================
   REVISI FINAL UX POSTER HURUF (GLASS EFFECT, SPACING, NO-HIGHLIGHT)
========================================= */

/* 1. WADAH POSTER (EFEK KACA & BLOKIR HIGHLIGHT) */
.letter-poster {
  /* Efek Kaca (Glassmorphism) */
  background: rgba(255, 255, 255, 0.75) !important; 
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
  
  /* Blokir Kursor / Anti Highlight */
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  cursor: default !important;
}

.letter-grid-desktop, .letter-grid-mobile {
  display: grid;
  width: 100%;
}

/* Matikan Hover */
.letter-cell:hover, .letter-label:hover, .letter-empty:hover {
  transform: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  cursor: default !important;
}

/* Base Kotak */
.letter-cell, .letter-label, .letter-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  box-sizing: border-box;
}

/* Kotak Huruf (Tetap Putih Solid & Jelas) */
.letter-cell {
  background: #ffffff !important;
  color: #1e293b !important;
  font-weight: 800 !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

/* Kotak Penunjuk (A, I, U) */
.letter-label {
  background: rgba(248, 250, 252, 0.9) !important; 
  color: #334155 !important; 
  font-weight: 700 !important;
  border: 1.5px solid #94a3b8 !important; 
}

/* 🚀 KOTAK KOSONG DIBIKIN ABU MUDA */
.letter-empty {
  background: rgba(255, 255, 255, 0.3) !important; /* Efek kaca transparan abu muda */
  border: 1px solid rgba(255, 255, 255, 0.4) !important; /* Border putih tipis elegan */
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.2) !important; /* Pantulan cahaya biar mewah */
  backdrop-filter: blur(4px) !important; /* Tambahan ngeblur dikit di kotaknya */
}

.label-vokal {
  border: 1px solid rgba(148, 163, 184, 0.3) !important; /* Border diredupin & dikecilin */
  background: rgba(248, 250, 252, 0.4) !important; /* Sedikit lebih tembus pandang */
  box-shadow: none !important; /* Hilangin bayangan biar nge-blend sama poster */
  color: #64748b !important; /* Warna font dibikin sedikit lebih kalem */
}

/* Sembunyikan h3 karena judulnya udah gabung di atas */
.letter-section h3 {
  display: none !important; 
}

/* --- TAMPILAN DESKTOP (Poster IMAX & Mewah) --- */
@media (min-width: 769px) {
  /* 🚀 BIKIN GEDE: Lebarin container posternya sampai nyaris penuh */
  .letter-poster {
    width: 96% !important; /* Gunakan 96% lebar layar biar lega */
    max-width: 1600px !important; /* Batas atas dilebarin drastis */
    margin: 20px auto 40px auto !important; /* Kasih napas atas-bawah */
    padding: 30px 40px 40px 40px !important; /* Padding dalam dilebarin */
    box-shadow: 0 15px 40px rgba(0,0,0,0.1) !important; /* Bayangan lebih halus */
  }

  /* Ratain judul ke tengah biar makin pro */
  .letter-poster h2 {
    font-size: 1.8rem !important; /* Judul gedein dikit */
    margin-bottom: 25px !important;
    text-align: center !important;
  }

  /* 🚀 BIKIN GEDE: Melarin grid hurufnya */
  .letter-grid-desktop {
    width: 100% !important;
    gap: 8px 12px !important; /* Jarak antar kotak pas */
  }

  /* Kotak huruf dibikin sedikit lebih gemuk & jelas */
  .letter-cell, .letter-label, .letter-empty {
    height: 48px !important; /* Tinggiin dikit biar gak gepeng */
    border-radius: 8px !important; 
  }
  .letter-cell { font-size: 1.5rem !important; } /* Huruf gedein */
  .letter-label { font-size: 0.95rem !important; } /* Panduan gedein */
}

/* --- TAMPILAN MOBILE --- */
@media (max-width: 768px) {
  .letter-poster {
    margin: 15px 15px 25px 15px !important; /* Poster HP juga dikasih napas bawahnya */
    padding: 20px 15px 30px 15px !important; /* Padding bawah (30px) biar huruf ujung gak nempel layar */
  }
  .letter-grid-mobile {
    gap: 8px !important;
  }
  .letter-cell, .letter-label, .letter-empty {
    padding: 0 !important;
    height: 48px !important; 
    border-radius: 14px !important; 
  }
  .letter-cell { font-size: 1.4rem !important; }
  .letter-label { font-size: 0.85rem !important; }
  .letter-poster h2 {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
  }
  .yoon-section .letter-grid-mobile {
    grid-template-columns: repeat(4, minmax(40px, 70px)) !important;
    justify-content: center;
  }
}

/* =========================================
   11. LETTER POSTER TUNING (AESTHETIC + LIGHTWEIGHT)
========================================= */
.letter-poster {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.97), rgba(252, 244, 248, 0.95)) !important;
  border: 1px solid rgba(255, 77, 109, 0.12) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.letter-poster h2 {
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #111827 !important;
}

.letter-poster-subtitle {
  color: #e11d48;
  font-weight: 800;
}

.letter-grid-desktop,
.letter-grid-mobile {
  gap: 10px !important;
}

.letter-cell,
.letter-label,
.letter-empty {
  border-radius: 12px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.letter-cell {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

.letter-cell:hover {
  background: #fff4f7 !important;
  border-color: #fda4af !important;
  box-shadow: none !important;
  transform: none !important;
}

.letter-label {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

.label-vokal {
  background: #fff1f2 !important;
  border-color: #fda4af !important;
  color: #be123c !important;
}

.letter-empty {
  background: #f8fafc !important;
  border: 1px dashed #dbe4ee !important;
  box-shadow: none !important;
}

@media (min-width: 769px) {
  .letter-poster {
    max-width: 1180px !important;
    margin: 16px auto 28px !important;
    padding: 24px 18px 30px !important;
  }

  .letter-grid-desktop {
    gap: 10px 12px !important;
  }

  .letter-cell,
  .letter-label,
  .letter-empty {
    height: 48px !important;
  }
}

@media (max-width: 768px) {
  .letter-poster {
    margin: 12px 12px 22px !important;
    padding: 16px 12px 20px !important;
  }

  .letter-grid-mobile {
    gap: 7px !important;
  }

  .letter-cell,
  .letter-label,
  .letter-empty {
    height: 44px !important;
    border-radius: 10px !important;
  }

  .letter-cell { font-size: 1.25rem !important; }
  .letter-poster h2 { font-size: 1.2rem !important; }
}

@media (max-width: 767px) and (orientation: portrait) {
  .letter-poster {
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-size: 520px;
    box-shadow: none !important;
    background: #ffffff !important;
  }

  .letter-grid-mobile {
    contain: layout paint;
  }

  .letter-cell,
  .letter-label,
  .letter-empty {
    transition: none !important;
    box-shadow: none !important;
  }

  .letter-poster-body {
    overscroll-behavior-x: contain;
  }
}

/* =========================================
   UI LOGIN & PROFIL (SIDEBAR) - VERSI BULAT KECE
========================================= */
.user-profile-section {
  padding: 10px 15px;
  background: transparent; /* Hilangin background kotak jelek */
  margin-bottom: 15px;
  text-align: center;
}

.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background: #ffffff;
  border: none;
  border-radius: 999px; /* 🚀 MANTRA KAPSUL BULAT */
  font-weight: 800;
  color: #334155;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* Bayangan soft biar tombolnya melayang */
  transition: all 0.3s ease;
}

.login-btn:active { 
  transform: scale(0.96); 
}

.login-btn img { 
  width: 22px; 
  height: 22px; 
}

.login-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8); /* Teks dibikin putih pudar biar nyatu sama tema lu */
  margin-top: 12px;
  margin-bottom: 0;
  font-weight: 500;
}

/* --- TAMPILAN SESUDAH LOGIN --- */
#logged-in-view {
  display: flex;
  align-items: center;
  gap: 15px;
  background: rgba(255, 255, 255, 0.15); /* Efek kaca transparan */
  padding: 8px 12px;
  border-radius: 999px; /* Profil juga dibikin bulat kapsul */
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  overflow: hidden;
  padding: 6px 14px !important;
}

.user-name {
  font-weight: 800;
  color: #ffffff; /* Nama dibikin putih biar kontras */
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

.logout-btn {
  background: transparent;
  border: none;
  color: #ffb3c6; /* Pink pudar ala-ala */
  font-size: 0.75rem;
  font-weight: bold;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.history-link {
  background: none; border: none; color: #fff; 
  font-size: 0.7rem; font-weight: bold; cursor: pointer; text-decoration: underline; padding: 0;
}
.user-actions { display: flex; align-items: center; gap: 8px; }
.sep { color: rgba(255,255,255,0.4); font-size: 0.7rem; }

/* Tabel Riwayat */
body.history-mode #grid {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 170px);
  padding: 24px 20px 100px;
}

body.history-mode #pagination-container {
  display: none !important;
}

/* =========================================
   HISTORY POSTER - VERSI FINAL (ITEM KAPSUL)
========================================= */

body.history-mode #grid {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  min-height: calc(100dvh - 160px) !important;
  padding: 110px 15px 140px !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Container utama = kotak rounded sedang */
.history-container {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto 80px auto !important;
  padding: 40px 50px !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(18px) !important;
  border-radius: 28px !important;           /* ← kotak agak rounded */
  border: 3px solid #ff4d6d !important;
  box-shadow: 0 25px 70px rgba(255, 77, 109, 0.20) !important;
}

/* Judul tetap kapsul pink */
.history-container h2 {
  display: inline-block !important;
  background: linear-gradient(90deg, #ff4d6d, #ff8fa3) !important;
  color: #fff !important;
  padding: 12px 38px !important;
  border-radius: 9999px !important;
  font-size: 2.05rem !important;
  font-weight: 800 !important;
  margin: 0 auto 28px auto !important;
  box-shadow: 0 6px 20px rgba(255, 77, 109, 0.35) !important;
}

/* Setiap baris riwayat = kapsul dengan border */
.history-item {
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 2.5px solid #ff4d6d !important;
  border-radius: 9999px !important;           /* ← kapsul sempurna */
  padding: 16px 24px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 15px rgba(255, 77, 109, 0.12) !important;
  transition: all 0.25s ease !important;
}

.history-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 25px rgba(255, 77, 109, 0.22) !important;
}

/* Kolom di dalam kapsul */
.history-item > div {
  flex: 1;
  text-align: center;
  font-weight: 600;
  color: #1e293b;
}

.history-item .date     { flex: 0.9; text-align: left; }
.history-item .category { flex: 2.3; text-align: left; line-height: 1.45; font-size: 0.96rem; }
.history-item .level    { flex: 0.7; }
.history-item .score    { flex: 1.0; }
.history-item .status   { flex: 0.8; font-weight: 700; }

/* Warna status */
.status-remidi { color: #ef4444 !important; }
.status-lulus  { color: #22c55e !important; }

/* =========================================
   PERBAIKAN SIDEBAR: RATA KIRI & TRUNCATE
========================================= */
.menu-btn,
.sidebar-tree summary {
  /* Bikin teks gak turun ke bawah & pakai titik-titik kalau kepanjangan */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 0.93rem !important;
  
  /* 🚀 MANTRA PAKSA RATA KIRI */
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; 
  padding-left: 1rem !important; /* Jarak pas dari ujung kiri kotak */
}

/* Biar anak-anak menu (sub-menu) agak menjorok ke dalam biar rapi */
.sidebar-tree .subfolder-list .menu-btn {
  padding-left: 2.2rem !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25 !important;
  font-size: 0.86rem !important;
}

/* =========================================
   PERBAIKAN SIDEBAR: RATA KIRI (KHUSUS MOBILE)
========================================= */

/* Khusus KOTOBA: teks lebih pas di dalam border tombol */
.kotoba-dropdown .subfolder-list .menu-btn {
  display: block !important;
  font-size: 0.82rem !important;
  line-height: 1.25 !important;
  padding-left: 1rem !important;
  padding-right: 0.75rem !important;
}
/* Pengecualian: judul sub-drop list LATIHAN boleh wrap */
.latihan-dropdown .sub-details summary {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.35 !important;
}

@media (max-width: 768px) {
  .menu-btn,
  .sidebar-tree summary {
    font-size: 0.88rem !important; /* Dikecilin dikit biar teksnya lebih muat banyak di HP */
    padding-left: 0.8rem !important; /* Padding dikurangin dikit biar layar HP lega */
  }
  
  .sidebar-tree .subfolder-list .menu-btn {
    padding-left: 1.6rem !important; /* Indentasi anak menu dirapatkan dikit buat HP */
    font-size: 0.82rem !important;
  }

  .kotoba-dropdown .subfolder-list .menu-btn {
    font-size: 0.78rem !important;
    padding-left: 0.9rem !important;
    padding-right: 0.65rem !important;
  }
}

/* =========================================
   AUTH GATE + MODE TAMU
========================================= */
body.auth-locked {
  overflow: hidden;
  height: 100dvh;
}

.auth-gate {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 24px;
  background: radial-gradient(circle at top, rgba(255, 77, 109, 0.25), rgba(15, 23, 42, 0.92));
  backdrop-filter: blur(8px);
}

.auth-gate.active { display: flex; }

.auth-gate-card {
  width: min(560px, 100%);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
}

.auth-gate-logo { width: 78px; height: 78px; object-fit: contain; margin-bottom: 10px; }
.auth-gate-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #ffe4ea; color: #be123c; font-weight: 700; font-size: 0.78rem; margin: 0 0 8px; }
.auth-gate-card h1 { margin: 6px 0 10px; color: #0f172a; }
.auth-gate-subtext { margin: 0 0 18px; color: #475569; line-height: 1.6; }

.auth-gate-google-btn,
.auth-gate-guest-btn,
.guest-btn {
  width: 100%;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  cursor: pointer;
}

.auth-gate-google-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #ff4d6d, #ff758f);
  color: #fff;
  padding: 13px 20px;
}

.auth-gate-google-btn.loading { opacity: 0.7; pointer-events: none; }
.auth-gate-google-btn img { width: 20px; height: 20px; }

.auth-gate-guest-btn,
.guest-btn {
  margin-top: 10px;
  padding: 11px 20px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}

.auth-gate-note-list { display:none !important; }

body.guest-mode #sidebar .sidebar-tree summary.restricted,
body.guest-mode #sidebar .sidebar-tree button.restricted {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.auth-gate-email-btn {
  margin-top: 10px;
  width: 100%;
  border-radius: 999px;
  border: 1px solid #fda4af;
  background: #fff1f2;
  color: #9f1239;
  padding: 11px 20px;
  font-weight: 700;
  cursor: pointer;
}

.email-auth-form {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.email-auth-form input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.92rem;
}

.email-auth-form button[type="submit"] {
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  background: #0f172a;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.email-auth-links {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.email-auth-links button {
  border: none;
  background: transparent;
  color: #475569;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.8rem;
}

/* =========================================
   DASHBOARD PROFILE REDESIGN
========================================= */
body.history-mode #grid {
  align-items: flex-start !important;
  padding: 126px 20px 130px !important;
}

.dashboard-shell {
  width: min(980px, calc(100% - 30px));
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  background: #f8fafc;
  box-sizing: border-box;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.18);
}

.dashboard-cover {
  position: relative;
  min-height: 170px;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.25), transparent 35%), linear-gradient(135deg, #2f3031 0%, #242526 50%, #1d1e1f 100%);
}

.dashboard-profile-card {
  background: #ffffff;
  margin: -62px auto 0;
  width: min(840px, calc(100% - 28px));
  border-radius: 24px;
  padding: 0 24px 26px;
  text-align: center;
  box-shadow: 0 16px 34px rgba(148, 163, 184, 0.25);
}

.dashboard-avatar-wrap {
  position: relative;
  width: 118px;
  margin: 0 auto;
  transform: translateY(-45px);
  margin-bottom: -32px;
}

.dashboard-avatar-frame {
  width: 118px;
  height: 118px;
  margin: 0 auto;
  border-radius: 50%;
  border: 6px solid #fff;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
  overflow: hidden;
  background: #f1f5f9;
}

.dashboard-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard-profile-card h2 {
  margin: 0;
  color: #0f172a;
  font-size: 2rem;
}

.dashboard-email {
  margin: 6px 0 0;
  color: #64748b;
}

.dashboard-settings-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.2);
}

.dashboard-camera-btn {
  position: absolute;
  right: -8px;
  bottom: 4px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #334155;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.3);
}

.dashboard-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 1300;
}

body.dashboard-modal-open,
body.dashboard-modal-open .content-panel {
  overflow: hidden !important;
}

.dashboard-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100% - 28px));
  max-height: min(86vh, 760px);
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  padding: 20px 16px 16px;
  z-index: 1301;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.35);
}

.dashboard-modal h4 {
  margin: 0 0 14px;
  color: #0f172a;
}

.dashboard-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 1.1rem;
  cursor: pointer;
}

.crop-modal {
  width: min(560px, calc(100% - 24px));
}

.crop-square-wrap {
  width: min(320px, 100%);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #0f172a;
  touch-action: none;
}

#dashboard-crop-canvas {
  width: 100%;
  height: auto;
  display: block;
  cursor: grab;
}

#dashboard-crop-zoom {
  width: 100%;
  margin-top: 12px;
}

.crop-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.dashboard-cancel-btn {
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 11px 14px;
  background: #fff;
  color: #334155;
  font-weight: 700;
  cursor: pointer;
}

.dashboard-profile-form {
  margin-top: 14px;
  display: grid;
  gap: 12px;
  text-align: left;
}

.dashboard-profile-form label {
  font-weight: 700;
  color: #334155;
}

.dashboard-profile-form input[type="text"] {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 0.95rem;
}

.dashboard-form-note {
  margin: -6px 0 0;
  color: #64748b;
  font-size: 0.8rem;
}

.dashboard-avatar-tools {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
  background: #f8fafc;
}

.dashboard-avatar-tools > p {
  margin: 0 0 10px;
  font-weight: 700;
  color: #334155;
}

.avatar-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
  gap: 8px;
}

.avatar-preset-btn {
  border: 1px solid #dbeafe;
  background: #fff;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  font-size: 1.3rem;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.avatar-preset-btn:hover,
.avatar-preset-btn.active {
  transform: translateY(-2px);
  border-color: #ff4d6d;
  box-shadow: 0 8px 16px rgba(255, 77, 109, 0.25);
}

.dashboard-upload-label {
  margin-top: 10px;
  display: inline-block;
  font-size: 0.85rem;
  color: #475569;
}

#dashboard-avatar-upload {
  margin-top: 6px;
  width: 100%;
}

.dashboard-upload-disabled {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 0.82rem;
}

.dashboard-save-btn {
  border: none;
  border-radius: 999px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #ff4d6d, #fb7185);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.dashboard-history-panel {
  padding: 22px;
}

.dashboard-history-panel h3 {
  margin: 6px 0;
  color: #0f172a;
}

.dashboard-history-sub {
  margin: 0 0 14px;
  color: #64748b;
}

.dashboard-history-list {
  display: grid;
  gap: 10px;
}

.dashboard-history-item {
  background: #fff;
  border: 1px solid #B5BAC0;
  border-radius: 14px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1.6fr auto auto;
  gap: 8px;
  align-items: center;
}

.dashboard-history-date { margin: 0 0 4px; color: #94a3b8; font-size: .8rem; }
.dashboard-history-item h4 { margin: 0; color: #1e293b; font-size: 0.96rem; }
.dashboard-level { color: #64748b; font-size: 0.82rem; }
.dashboard-history-score { font-size: 1.25rem; font-weight: 800; }
.dashboard-history-meta { text-align: right; color: #475569; font-size: .85rem; }
.dashboard-history-meta p { margin: 0 0 4px; }
.dashboard-empty { text-align:center; padding: 24px; color:#64748b; background:#fff; border-radius: 14px; border:1px dashed #cbd5e1; }
.dashboard-error { margin-top: 12px; color: #b91c1c; background:#fee2e2; border-radius:10px; padding: 10px 12px; }

@media (max-width: 768px) {
  body.history-mode #grid { padding: 52px 12px 120px !important; }
  .dashboard-shell { border-radius: 20px; width: calc(100% - 2px); }
  .dashboard-cover { min-height: 145px; }
  .dashboard-profile-card { width: calc(100% - 10px); border-radius: 18px; padding: 0 14px 18px; }
  .dashboard-avatar-wrap { width: 96px; transform: translateY(-42px); margin-bottom: -30px; }
  .dashboard-avatar-frame { width: 96px; height: 96px; }
  .dashboard-profile-card h2 { font-size: 1.45rem; }
  .dashboard-settings-btn { top: 10px; right: 10px; width: 34px; height: 34px; }
  .dashboard-camera-btn { width: 32px; height: 32px; right: -7px; bottom: 2px; }
  .dashboard-modal { width: calc(100% - 20px); border-radius: 14px; padding: 18px 12px 12px; }
  .crop-modal { width: calc(100% - 14px); }
  .topbar { padding: 4px 10px !important; }
  .app-footer { margin: 14px auto 20px; padding: 12px 14px; }
  .dashboard-history-item {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .dashboard-history-meta { text-align: left; }
}

@media (max-width: 767px) and (orientation: portrait) {
  .dashboard-modal {
    top: 62px !important;
    transform: translateX(-50%) !important;
    max-height: calc(100dvh - var(--topbar-height) - var(--bottom-nav-height) - 24px) !important;
  }
}

body.training-session .pagination-container,
body.review-mode-active .pagination-container {
  display: none !important;
}

/* === Layout refresh: sidebar menyatu + split scroll + warna baru === */
body {
  background: #D3D3D3 !important;
}

body::before {
  display: none !important;
  background: none !important;
}

.topbar,
.app-footer {
  background: linear-gradient(135deg, #d81b86 0%, #c2185b 55%, #a80f3f 100%) !important;
  color: #ffffff !important;
}

.app-footer p,
.app-footer span {
  color: #ffffff !important;
  opacity: 0.92;
}

@media (min-width: 768px) {
  body {
    overflow: hidden !important;
    height: 100vh !important;
  }

  #hamburger,
  #overlay {
    display: none !important;
  }

  #sidebar {
    position: fixed !important;
    top: 78px !important;
    left: 0 !important;
    height: calc(100vh - 78px) !important;
    width: var(--sidebar-width) !important;
    transform: translateX(0) !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(148, 21, 78, 0.28);
    box-shadow: none !important;
    padding-bottom: 24px !important;
    overflow-y: auto !important;
  }

  #grid {
    position: fixed !important;
    top: 78px !important;
    left: var(--sidebar-width) !important;
    right: 0 !important;
    bottom: 86px !important;
    width: calc(100vw - var(--sidebar-width)) !important;
    margin: 0 !important;
    padding-top: 16px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .pagination-container {
    position: fixed;
    left: var(--sidebar-width);
    right: 0;
    bottom: 50px;
    z-index: 1001;
    background: rgba(246, 241, 231, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 6px 0;
  }

  body:not(.training-session):not(.review-mode-active) .app-body-shell {
    /* position managed by fixed layout block below */
  }

  /* Ruang scroll disesuaikan agar pas dengan tinggi footer baru */
  body:not(.training-session):not(.review-mode-active) .content-panel {
    padding-bottom: 45px !important; 
  }

  body:not(.training-session):not(.review-mode-active) .app-footer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    
    /* 🚀 DIPAKSA KECIL & RAMPING (Maksimal 34px) */
    height: 34px !important; 
    min-height: 34px !important; 
    max-height: 34px !important; 
    
    /* Bantai semua jarak yang bikin bengkak */
    padding: 0 !important; 
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 50 !important;
    overflow: hidden !important;
    
    /* Paksa teks persis di tengah */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Pastikan paragraf di dalam footer tidak punya margin/padding bawaan */
  body:not(.training-session):not(.review-mode-active) .app-footer p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
}

@media (max-width: 767px) {
  #hamburger {
    display: inline-flex !important;
  }
}

/* === Follow-up refinement berdasarkan feedback === */
.sidebar-logo-wrap {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 14px;
}

.sidebar-logo-wrap img {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

#sidebar::-webkit-scrollbar {
  width: 8px;
}

#sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.24));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

#sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

@media (min-width: 768px) {
  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
  }

  #sidebar {
    top: 0 !important;
    height: 100vh !important;
    padding-top: 14px !important;
  }

  .topbar {
    left: var(--sidebar-width) !important;
    width: calc(100% - var(--sidebar-width)) !important;
  }

  .topbar .branding {
    display: none !important;
  }

  #grid {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin-left: var(--sidebar-width) !important;
    width: calc(100% - var(--sidebar-width)) !important;
    padding-top: 106px !important;
    padding-bottom: 8px !important;
    overflow: visible !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .pagination-container {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(100% - var(--sidebar-width)) !important;
    margin: 10px 0 16px var(--sidebar-width) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-top: 1px solid rgba(148, 163, 184, 0.3);
    padding-top: 12px;
  }

  .app-footer {
    position: static !important;
    width: calc(100% - var(--sidebar-width)) !important;
    margin: 0 0 0 var(--sidebar-width) !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  #grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .sidebar-logo-wrap {
    display: none;
  }

  .topbar .branding {
    display: block !important;
  }
}

/* === Follow-up 2: Header sidebar compact + logout di kapsul profil === */
.sidebar-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 2px 0 10px;
}

#sidebar h3,
#sidebar-greeting {
  margin: 0 !important;
  padding-right: 0 !important;
  font-size: 1.92rem;
  line-height: 1.02;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.sidebar-logo-wrap {
  margin: 0 !important;
  justify-content: center;
}

.sidebar-logo-wrap img {
  width: 54px !important;
  height: 54px !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.22);
}

.user-profile-section {
  padding: 8px 8px 10px !important;
}

#logged-in-view {
  position: relative;
  padding-right: 50px !important;
  min-height: 58px;
}

.logout-floating-btn {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%);
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1)) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.24) !important;
}

.logout-floating-btn:hover {
  transform: translateY(-50%) scale(1.04) !important;
}

.logout-floating-btn:active {
  transform: translateY(-50%) scale(0.95) !important;
}

@media (min-width: 768px) {
  #sidebar {
    padding: 10px 12px 18px !important;
  }
}

@media (max-width: 767px) {
  .sidebar-head {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  #sidebar h3,
  #sidebar-greeting {
    font-size: 1.42rem !important;
  }
}

/* === Follow-up 3: spacing konsisten + tema crimson/ivory === */
:root {
  --content-top-gap: 16px;
  --topbar-height: 78px;
}

body {
  background: #D3D3D3 !important;
}

@media (min-width: 768px) {
  #grid {
    padding-top: calc(var(--topbar-height) + var(--content-top-gap)) !important;
  }

  #grid.pattern-grid-layout,
  #grid.history-mode {
    padding-top: calc(var(--topbar-height) + var(--content-top-gap)) !important;
  }

  .letter-poster,
  .expression-wide-grid,
  .pattern-grid-layout {
    margin-top: 0 !important;
  }

  .expression-wide-grid {
    margin-bottom: 8px !important;
  }
}

/* warna poster kotoba + aktivitas + ungkapan + pola kalimat => crimson */
.card-image,
.expression-wide-card,
.pattern-card {
  background: linear-gradient(155deg, rgba(187, 18, 61, 0.92), rgba(220, 20, 60, 0.9)) !important;
  border: 1px solid rgba(255, 214, 224, 0.42) !important;
  box-shadow: 0 12px 28px rgba(127, 29, 29, 0.34) !important;
}

.card-overlay,
.pattern-title,
.pattern-example-jp,
.pattern-example-id,
.pattern-meaning,
.wide-kanji,
.wide-kana,
.wide-romaji,
.wide-meaning {
  color: #fff7f8 !important;
  text-shadow: none !important;
}

.card-overlay .kanji {
  color: #fff7f8 !important;
}

@media (max-width: 767px) {
  #grid,
}

/* === Follow-up 4: font Jepang + greeting こんにちは + polish poster/support === */
:root {
  --jp-calligraphy: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", serif;
}

/* Greeting sidebar 2 baris: こんにちは + Namaーさん */
#sidebar-greeting {
  display: grid;
  grid-template-rows: auto auto;
  gap: 2px;
  align-content: center;
  line-height: 1.06 !important;
}

#sidebar-greeting .greet-jp {
  font-family: var(--jp-calligraphy);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ffe9ef;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sidebar-greeting .greet-user {
  font-family: var(--jp-calligraphy);
  font-size: var(--greet-user-size, 1.2rem);
  font-weight: 700;
  color: #fff7fb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Font kaligrafi Jepang + perbesaran teks turunan */
.card-overlay .kanji,
.wide-kanji,
.pattern-title {
  font-family: var(--jp-calligraphy) !important;
  font-weight: 700 !important;
}

.card-overlay .kanji {
  font-size: clamp(3.1rem, 7.4vw, 4.6rem) !important;
  line-height: 0.9 !important;
  margin-top: -6px !important;
  margin-bottom: 14px !important;
  letter-spacing: 0.02em !important;
}

.card-overlay .kana,
.wide-kana,
.pattern-example-jp,
.expanded-card .kana {
  font-family: var(--jp-calligraphy) !important;
  font-size: clamp(1.18rem, 2.3vw, 1.42rem) !important;
  color: rgba(255,255,255,0.75) !important;
}

.card-overlay .romaji,
.wide-romaji,
.expanded-card .romaji {
  font-size: clamp(1rem, 1.9vw, 1.14rem) !important;
  color: rgba(255,255,255,0.65) !important;
}

.card-overlay .meaning,
.wide-meaning,
.pattern-meaning,
.expanded-card .meaning,
.pattern-example-id {
  font-size: clamp(1.08rem, 2.05vw, 1.26rem) !important;
  color: #fff4f8 !important;
}

/* Crimson card gradient + glass border supaya tidak flat */
.card-image,
.expression-wide-card,
.pattern-card {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.2), transparent 34%),
    radial-gradient(circle at 84% 86%, rgba(255, 255, 255, 0.14), transparent 42%),
    linear-gradient(155deg, rgba(152, 24, 54, 0.96), rgba(192, 22, 65, 0.94) 54%, rgba(220, 20, 60, 0.92)) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 28px rgba(127, 29, 29, 0.36) !important;
}

/* Support poster center desktop+mobile */

/* pastikan hamburger tetap tampil di mobile */
@media (max-width: 767px) {
  #hamburger {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

}

/* === Follow-up 5: fix hamburger visibility on mobile + greeting readability === */
#sidebar-greeting {
  white-space: normal !important;
}

#sidebar-greeting .greet-jp,
#sidebar-greeting .greet-user {
  display: block;
}

@media (max-width: 768px) {
  #hamburger {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* paksa untuk device sentuh (Android/iOS) walau viewport aneh */
@media (hover: none) and (pointer: coarse) {
  #hamburger {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (max-width: 767px) {
  .sidebar-head {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #sidebar-greeting {
    line-height: 1.15 !important;
    gap: 4px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #sidebar-greeting .greet-jp {
    font-size: 1rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #sidebar-greeting .greet-user {
    font-size: clamp(1.04rem, 4.4vw, 1.2rem) !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #hamburger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important; 
    width: 44px !important; /* Wadah ikut diperbesar agar ikon tidak terpotong */
    min-width: 44px !important; /* Wadah ikut diperbesar */
    height: 52px !important; 
    padding: 0 !important; 
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1200 !important;
  }

  #hamburger .hamburger-svg {
    width: 44px !important; /* Ikon diperbesar dari 36px menjadi 44px */
    height: 44px !important; /* Ikon diperbesar dari 36px menjadi 44px */
    color: #2f2f2f !important;
  }
}

/* === UI polish: svg menu icons + unselectable greeting + invisible sidebar scrollbar === */
.inline-menu-icon {
  width: 15px;
  height: 15px;
  margin-right: 7px;
  vertical-align: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.huruf-icon {
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.filter-modal-header h3,
#sidebar .sidebar-tree summary,
#sidebar .menu-btn,
#supportBtn,
#account-btn {
  display: inline-flex;
  align-items: center;
}

#sidebar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

#sidebar::-webkit-scrollbar,
#sidebar::-webkit-scrollbar-thumb,
#sidebar::-webkit-scrollbar-track {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

#header-greeting,
#header-greeting *,
#sidebar-greeting,
#sidebar-greeting *,
#user-name,
#logged-in-view .user-info {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  -webkit-touch-callout: none;
}

#sidebar-greeting .greet-user {
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(255, 239, 245, 0.4), 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: greetingPulse 2.8s ease-in-out infinite;
}

@keyframes greetingPulse {
  0%, 100% { transform: translateY(0); opacity: 0.96; }
  50% { transform: translateY(-1px); opacity: 1; }
}

.forms-hub {
  width: min(1100px, 94%);
  margin: 18px auto 26px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 20px 60px -30px rgba(15, 23, 42, 0.45);
}

.forms-brick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.form-brick {
  border: none;
  border-radius: 14px;
  text-align: left;
  padding: 14px;
  background: linear-gradient(145deg, #f8fafc, #e2e8f0);
  cursor: pointer;
  display: grid;
  gap: 8px;
}

.form-brick strong { font-size: 1rem; color: #ffffff; }
.form-brick span { color: #1f2937; font-size: 0.88rem; }

.form-poster {
  width: min(1100px, 94%);
  margin: 18px auto 30px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 20px 70px -34px rgba(15, 23, 42, 0.5);
}

.form-back-btn {
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  background: #1d4ed8;
  color: #fff;
  cursor: pointer;
  margin-bottom: 14px;
}

.form-group-panel {
  margin-top: 18px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  padding: 12px;
  background: #f8fbff;
}

.example-card {
  border: 1px solid #dbeafe;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  margin-top: 10px;
}

.sentence-box {
  margin-top: 10px;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 10px;
}

.sentence-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.shuffle-sentence-btn {
  border: none;
  border-radius: 999px;
  padding: 8px 12px;
  background: #e2e8f0;
  color: #0f172a;
  font-weight: 700;
  cursor: pointer;
}

/* === Forms Hub & Poster v2 (full-width bricks + big poster sections) === */
.forms-hub,
.form-poster {
  grid-column: 1 / -1 !important;
}

.forms-hub {
  width: min(1240px, calc(100% - 30px));
  margin: 0 auto 24px;
  padding: 20px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.94));
  box-shadow: 0 22px 48px -30px rgba(15, 23, 42, 0.55);
}

.forms-hub-head {
  border: 2px solid rgba(203, 213, 225, 0.9);
  border-radius: 18px;
  padding: 14px 16px;
  background: #228b22;
  margin-bottom: 16px;
}

.forms-hub-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
}

.forms-hub-head p {
  margin: 6px 0 0;
  color: #ffffff;
}

.forms-hub-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-end;
}

.forms-level-filter-wrap {
  display: grid;
  gap: 6px;
  font-weight: 700;
  color: #ffffff;
}

.forms-level-filter {
  min-width: 170px;
  border: 2px solid rgba(148, 163, 184, 0.45);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 700;
  color: #0f172a;
  background: #fff;
}

.form-level-badge {
  justify-self: start;
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(219, 39, 119, 0.12);
  color: #9d174d;
  font-size: 0.78rem;
  font-weight: 800;
}

.forms-brick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.form-brick {
  min-height: 112px;
  border: 2px solid rgba(190, 24, 93, 0.18);
  border-radius: 16px;
  padding: 14px 16px;
  background: #FFD700;
  cursor: pointer;
  display: grid;
  align-content: center;
  gap: 8px;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.form-brick:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -20px rgba(190, 24, 93, 0.55);
  border-color: rgba(190, 24, 93, 0.45);
}

.form-brick-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: #0f172a;
}

.form-brick-desc {
  color: #1f2937;
  font-size: 1.02rem;
  line-height: 1.4;
}

.form-poster {
  width: min(1240px, calc(100% - 30px));
  margin: 0 auto 28px;
  padding: 18px;
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(255,255,255,.97), rgba(248,250,252,.95));
  box-shadow: 0 26px 50px -34px rgba(15, 23, 42, 0.58);
}

.form-poster-head {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 12px;
}

.form-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 9px 14px;
  background: #1e293b;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.form-back-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.poster-section {
  border: 2px solid #dbeafe;
  border-radius: 16px;
  background: #ffffff;
  padding: 14px;
  margin-bottom: 12px;
}

.poster-title-box {
  border-color: #93c5fd;
  background: linear-gradient(145deg, #eff6ff, #f8fbff);
}

.poster-title-box h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.poster-section h3 {
  margin: 0 0 8px;
  color: #1e293b;
}

.poster-section p {
  margin: 0;
  line-height: 1.55;
  color: #334155;
}

.formula-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.formula-list li {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.form-group-panel {
  border: 1px solid rgba(125, 211, 252, 0.7);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(239, 246, 255, 0.9), rgba(240, 249, 255, 0.65));
  padding: 12px;
  margin-bottom: 10px;
}

.form-group-panel h4 {
  margin: 0;
  color: #1d4ed8;
  font-size: 1.06rem;
}

.group-subtitle {
  color: #475569;
  font-size: 0.88rem;
  font-weight: 600;
}

.example-card {
  border: 1px solid rgba(191, 219, 254, 0.95);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(165deg, #ffffff, #f8fbff);
  margin-top: 10px;
}

.example-lexical-head h5 {
  margin: 0 0 6px;
  font-size: 1.08rem;
  color: #111827;
}

.example-lexical-head p {
  margin: 3px 0;
  color: #334155;
}

.sentence-box {
  position: relative;
  margin-top: 10px;
  border: 1px solid rgba(186, 230, 253, 0.95);
  border-radius: 10px;
  padding: 12px 56px 10px 10px;
  background: linear-gradient(155deg, #f8fafc, #f0f9ff);
}

.sentence-box p {
  margin: 4px 0;
}

.sentence-jp {
  font-size: 1.14rem;
  font-weight: 700;
  color: #0f172a;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", "Noto Serif JP", serif;
}

.example-card h5,
.example-card [data-role="sentence-kana"] {
  font-size: 1.05rem;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", "Noto Serif JP", serif;
}

.sentence-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.example-card .form-sentence-play-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  inset: auto 8px auto auto !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  min-height: 34px;
  border: 1px solid #bfdbfe !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 10px rgba(17, 24, 39, 0.18) !important;
  z-index: 2;
}

.example-card .form-sentence-play-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.shuffle-sentence-btn {
  border: none;
  border-radius: 999px;
  padding: 8px 12px;
  background: #e2e8f0;
  color: #0f172a;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.shuffle-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shuffle-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767px) {
  .forms-brick-grid {
    grid-template-columns: 1fr;
  }

  .forms-hub,
  .form-poster {
    width: min(100%, calc(100% - 16px));
    padding: 12px;
    border-radius: 16px;
  }
}

#sidebar .menu-btn,
#sidebar .sidebar-tree summary {
  cursor: pointer !important;
}

#sidebar .sidebar-tree summary:hover,
#sidebar .menu-btn:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  transform: none;
}

/* =========================================
   SIDEBAR SMOOTH LIST MOTION (GLOBAL)
========================================= */
#sidebar {
  scroll-behavior: auto;
}

#sidebar .sidebar-tree details {
  transition: background-color 0.15s ease;
  will-change: auto;
}

#sidebar .sidebar-tree details:hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

#sidebar .sidebar-tree summary,
#sidebar .menu-btn,
#sidebar .sub-details summary {
  transition: background-color 0.15s ease;
}

#sidebar .sidebar-tree details .subfolder-list,
#sidebar .sidebar-tree details .level-list {
  display: none;
  max-height: none;
  opacity: 1;
  overflow: visible;
  transform: none;
  transition: none;
}

#sidebar .sidebar-tree details[open] > .subfolder-list,
#sidebar .sidebar-tree details[open] > .level-list {
  display: grid;
}

#sidebar .menu-btn:active,
#sidebar .sidebar-tree summary:active,
#sidebar .sub-details summary:active {
  transform: none;
}

/* === 2026-03 Facebook-like body sidebar layout refresh === */
:root {
  --topbar-height: 78px;
  --body-sidebar-width: 320px;
}

.topbar {
  left: 0 !important;
  width: 100% !important;
  height: var(--topbar-height);
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  align-items: center;
  gap: 10px;
  padding: 8px 14px !important;
}

.header-identity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.header-identity img {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.header-identity #sidebar-greeting {
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 12px rgba(0, 0, 0, 0.14);
}

.app-body-shell {
  margin-top: var(--topbar-height);
  min-height: calc(100dvh - var(--topbar-height));
}

.content-panel {
  min-width: 0;
}

#grid {
  margin: 0 !important;
  padding-top: 16px !important;
}

.sidebar-menu-title {
  font-size: 1.1rem !important;
  color: #fff;
  margin: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Sidebar cukup pakai judul, logo sudah ada di header */
.sidebar-logo-wrap {
  display: none !important;
}

@media (min-width: 768px) {
  #hamburger {
    display: none !important;
  }

  #overlay {
    display: none !important;
  }

  .app-body-shell {
    display: grid;
    grid-template-columns: var(--body-sidebar-width) minmax(0, 1fr);
    align-items: stretch;
  }

  #sidebar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: var(--body-sidebar-width) !important;
    border-radius: 0 !important;
    z-index: 20 !important;
    background: linear-gradient(180deg, #9f2f56 0%, #7b1a3e 68%, #d3d3d3 100%) !important;
  }

  .content-panel {
    min-height: unset;
  }

  #grid,
  .pagination-container,
  .app-footer {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .topbar .search-icon-btn {
    display: inline-flex !important;
    justify-self: end;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .topbar #resultInfo {
    position: static !important;
    margin-left: auto !important;
    margin-right: 6px !important;
  }

  .topbar #searchBtn {
    position: static !important;
    margin-left: 0 !important;
  }
  .app-footer {
    width: calc(100% + var(--body-sidebar-width)) !important;
    margin: 0 0 0 calc(var(--body-sidebar-width) * -1) !important;
    border-radius: 0 !important;
    border: none !important;
    min-height: 44px;
  }
}

@media (max-width: 767px) {
  .topbar {
    grid-template-columns: auto 1fr auto auto !important;
  }

  #hamburger {
    order: 1;
    display: inline-flex !important;
  }

  .header-identity {
    order: 2;
  }

  .search-icon-btn {
    order: 3;
  }

  #resultInfo {
    display: none !important;
  }

  .header-identity #sidebar-greeting {
    font-size: 1.1rem !important;
    max-width: 42vw;
  }

  #sidebar {
    top: var(--topbar-height) !important;
    height: calc(100dvh - var(--topbar-height)) !important;
    z-index: 1000;
  }
}

/* =========================================
   PERBAIKAN HEADER: RESULT INFO -> SEARCH ICON
========================================= */

/* 1. Ubah topbar menjadi flexbox agar mudah diatur urutannya */
.topbar {
  display: flex !important;
  align-items: center !important;
  padding: 8px 14px !important;
}

/* 2. Bagian Kiri (Logo & Identitas) */
.header-identity,
.branding {
  order: 1 !important;
  margin-right: auto !important; /* KUNCI: Mendorong elemen lain ke kanan penuh */
}

/* 3. Bagian Tengah-Kanan (Kapsul Result Info) */
#resultInfo {
  order: 2 !important;
  position: static !important; /* Matikan absolute positioning sebelumnya */
  margin: 0 8px 0 auto !important; /* Kasih jarak 12px di sebelah kanan icon search */
  transform: none !important;
  display: inline-flex !important;
}

/* 4. Bagian Ujung Kanan (Search Icon SVG) */
#searchBtn, 
.search-icon-btn {
  order: 3 !important;
  position: static !important;
  margin: 0 !important;
}

/* --- Penyesuaian Responsif Mobile (HP) --- */
@media (max-width: 767px) {
  #hamburger {
    order: 0 !important; /* Hamburger tetap paling ujung kiri di HP */
    margin-right: 8px !important;
  }
  #resultInfo {
    display: inline-flex !important; /* Pastikan kapsul tetap muncul di HP */
    max-width: 35vw !important; /* Dibatasi agar teks panjang tidak merusak layout HP */
  }
}

/* =========================================
   Desktop split-scroll: sidebar + content independen
   FIX FINAL: position:fixed pada shell — reliable di semua browser mobile
========================================= */
@media (min-width: 768px) {
  html, body {
    height: 100%;
    overflow: hidden !important;
  }

  /* Shell menempel dari bawah topbar sampai benar-benar dasar layar,
     tidak peduli browser chrome — ini paling andal di semua browser */
  .app-body-shell {
    position: fixed !important;
    margin-top: 0 !important;      /* reset base margin-top, pakai top: langsung */
    top: var(--topbar-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    overflow: hidden !important;
  }

  #sidebar {
    width: var(--body-sidebar-width) !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
  }

  #sidebar::-webkit-scrollbar {
    display: none !important;
  }

  .content-panel {
    flex: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-left: 1px solid rgba(148, 21, 78, 0.24);
    padding-bottom: 60px !important; /* clearance untuk browser bottom bar */
  }
}

/* =========================================
   Hotfix feedback: pagination/footer overlap + sidebar feel + perf scroll
========================================= */
@media (min-width: 768px) {
  .duo-nav-details {
    border-radius: 14px;
    padding: 6px;
  }

  .duo-nav-details > summary {
    margin: 0;
  }

  .duo-nav-sub {
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 8px;
  }

  .duo-nav-subitem {
    width: 100%;
    margin: 0;
  }

  /* pastikan footer & pagination tidak tenggelam/ketiban */
  body:not(.training-session):not(.review-mode-active) .content-panel {
    display: block !important;
    contain: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* clearance untuk browser bottom toolbar HP (Chrome ~56px, Firefox ~72px, iOS ~83px) */
    padding-bottom: max(80px, env(safe-area-inset-bottom, 0px) + 80px) !important;
  }

  body:not(.training-session):not(.review-mode-active) #grid {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 14px 16px !important;
    overflow: visible !important;
    contain: none !important;
    flex: 0 0 auto !important; /* KUNCI: jangan expand, biarkan pagination tampil di bawah */
  }

  body:not(.training-session):not(.review-mode-active) .pagination-container {
    position: relative !important;
    display: flex !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 56px) !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid rgba(148, 163, 184, 0.3) !important;
    flex-shrink: 0 !important;
  }

  body:not(.training-session):not(.review-mode-active) .app-footer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    max-height: none !important;
    z-index: 1 !important;
  }

  /* tombol Dukung Pengembang tidak ketiban */
  #sidebar {
    padding-bottom: 72px !important;
  }

  /* samakan rasa tombol sidebar (ringan, tidak sesak) */
  #sidebar .sidebar-tree details {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  #sidebar .sidebar-tree > details > summary,
  #sidebar .sidebar-tree .sub-details > summary {
    min-height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15) !important;
    padding: 0.75rem 1rem !important;
  }

  #sidebar .sidebar-tree > details > summary:hover,
  #sidebar .sidebar-tree .sub-details > summary:hover,
  #sidebar .menu-btn:hover {
    background: rgba(255, 255, 255, 0.24) !important;
  }

  #sidebar .subfolder-list {
    margin-top: 8px;
    padding-left: 0 !important;
  }
}

/* =========================================
   Follow-up 2: samakan ukuran item sidebar + optimasi scroll grid desktop
========================================= */
@media (min-width: 768px) {
  /* Samakan semua item menu sidebar (button + summary) */
  #sidebar .menu-btn,
  #sidebar .sidebar-tree > details > summary,
  #sidebar .sidebar-tree .sub-details > summary {
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 0.75rem 1rem !important;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.14) !important;
  }

  #sidebar .menu-btn:hover,
  #sidebar .sidebar-tree > details > summary:hover,
  #sidebar .sidebar-tree .sub-details > summary:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.28);
  }

  /* Performa: render kartu seperlunya saat discroll */
  #grid .card {
    content-visibility: auto;
    contain-intrinsic-size: 280px;
  }

  /* Kurangi repaint berat saat hover di desktop */
  .card-image {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26) !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease !important;
    will-change: transform;
  }

  .card-image:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3) !important;
  }

  /* Hindari efek compositing berlebih di panel scroll */
  .content-panel {
    will-change: auto;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

/* =========================================
   Follow-up 3: sidebar font consistency + auto dot marker + forms local pagination
========================================= */
#sidebar .sidebar-tree > .menu-btn,
#sidebar .sidebar-tree > details > summary {
  font-weight: 700 !important;
  font-size: 0.93rem !important;
  letter-spacing: 0;
}

#sidebar .verb-form-menu-btn,
#sidebar .adjective-form-menu-btn {
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Dot marker otomatis untuk item subkategori (kecuali menu huruf) */
#sidebar .sidebar-tree details .subfolder-list .menu-btn:not(.letter-btn),
#sidebar .sidebar-tree details .level-list .menu-btn {
  position: relative;
  padding-left: 1.65rem !important;
}

#sidebar .sidebar-tree details .subfolder-list .menu-btn:not(.letter-btn)::before,
#sidebar .sidebar-tree details .level-list .menu-btn::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 50%;
  width: 6px;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

/* Pagination lokal untuk hub Bentuk Kata Kerja / Kata Sifat */
.forms-hub-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.forms-page-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #475569;
  font-weight: 700;
  cursor: pointer;
}

.forms-page-btn.active {
  background: #ff4d6d;
  border-color: #ff4d6d;
  color: #fff;
}

.forms-page-btn:hover {
  border-color: #ff8faa;
  color: #be123c;
}

.forms-page-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.forms-page-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: #64748b;
  font-weight: 700;
}

@media (max-width: 767px) {
  .forms-page-btn {
    width: 34px;
    height: 34px;
  }
}

/* =========================================
   Follow-up 4: sidebar background contrast (remove bright glow)
========================================= */
@media (min-width: 768px) {
  #sidebar {
    background: linear-gradient(180deg, #8f2a4f 0%, #6f1738 58%, #4b0f27 100%) !important;
  }

  /* pastikan area bawah sidebar tetap gelap agar teks terbaca */
  #sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.12) 100%);
    pointer-events: none;
    z-index: 0;
  }

  #sidebar > * {
    position: relative;
    z-index: 1;
  }
}

/* =========================================
   Follow-up 5: latihan spacing + greeting single-line + support poster lift
========================================= */
/* 1) Dropdown latihan tidak mepet ke folder induk */
#sidebar .latihan-dropdown .sub-details .level-list {
  margin-top: 8px;
}

#sidebar .latihan-dropdown .sub-details {
  margin-top: 10px;
}

/* 2) Sapaan user satu baris di header samping logo */
#sidebar-greeting {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  grid-template-rows: none !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sidebar-greeting .greet-jp,
#sidebar-greeting .greet-user {
  display: inline !important;
  white-space: nowrap !important;
}

/* Rapikan card forms saat title disembunyikan */
.form-brick-desc-only {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(1.4em * 2);
  font-size: 1.02rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.4;
}

/* Follow-up 6: title card bentuk kata kerja tampil suffix saja (~る, ~ます, dst) */
.form-brick-title-only {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 7px 14px;
  border-radius: 999px;
  background: #228b22;
  color: #ffffff;
  box-shadow: 0 10px 20px -16px rgba(16, 185, 129, 0.8);
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 6px;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
}

/* =========================================
   PERBAIKAN FINAL HASIL DOWNLOAD KARTU (PNG)
   (HD+ 1600x900 + Kartu Square 1:1 + Glass Lebih Smooth)
========================================= */

/* 1) STAGE EXPORT HD+ (16:9) */
.download-export-stage {
  position: fixed !important;
  left: -9999px !important;
  top: 0 !important;
  width: 1080px !important;
  height: 1080px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.22), transparent 44%),
    radial-gradient(circle at 90% 90%, rgba(255, 255, 255, 0.14), transparent 48%),
    linear-gradient(155deg, #5f0b1f 0%, #b5123e 52%, #f41d5b 100%) !important;
  box-sizing: border-box !important;
}

/* 2) KARTU UTAMA 1:1 (SQUARE) */
.download-export-card {
  position: relative !important;
  width: 900px !important;
  height: 900px !important;
  
  border-radius: 92px !important;
  
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.24), transparent 56%),
    radial-gradient(circle at 80% 86%, rgba(255, 255, 255, 0.15), transparent 52%),
    linear-gradient(150deg, #2f3031 0%, #242526 46%, #1d1e1f 100%) !important;
    
  /* Tidak pakai border agar aman dari artefak garis kotak html2canvas */
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 3) EFEK KACA & PANTULAN CAHAYA (Glossy) */
.download-export-glass-outline {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 92px !important;
  border: 5px solid rgba(255, 255, 255, 0.23) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 36%),
    linear-gradient(325deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 30%) !important;
  
  box-sizing: border-box !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

/* 4) BERSIHKAN pseudo lama agar tidak bikin garis artefak */
.download-export-card::before,
.download-export-card::after {
  display: none !important;
}

/* =========================================
   HOTFIX EXPORT DOWNLOAD FULL (SQUARE 1080x1080)
========================================= */
.download-export-stage {
  display: none !important;
}

.download-export-card {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 1080px !important;
  height: 1080px !important;
  pointer-events: none !important;
  z-index: -1 !important;
  border-radius: 78px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.22), transparent 44%),
    radial-gradient(circle at 90% 90%, rgba(255, 255, 255, 0.14), transparent 48%),
    #242526 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.download-export-glass-outline {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 78px !important;
  border: 6px solid rgba(255, 255, 255, 0.24) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.27) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(322deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 28%) !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

.download-export-card::before,
.download-export-card::after {
  display: none !important;
}

.download-export-content {
  padding: 72px 140px 74px !important;
  gap: 12px !important;
}

.download-export-watermark {
  width: 62% !important;
  max-width: 940px !important;
  opacity: 0.075 !important;
}

.download-export-kanji {
  margin-bottom: 4px !important;
}

/* Tuning spacing vertical untuk teks export */
.download-export-content {
  gap: 16px !important;
}

.download-export-kanji {
  margin-bottom: 16px !important;
}

.download-export-kana {
  margin-top: 6px !important;
  margin-bottom: 8px !important;
}

.download-export-romaji {
  margin-top: 4px !important;
  margin-bottom: 10px !important;
}

.download-export-meaning {
  margin-top: 6px !important;
}

/* === Mobile sidebar UX refinements (2026-03) === */
.sidebar-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

#sidebar-greeting {
  margin: 0;
  width: 100%;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  padding: 10px 12px;
  box-sizing: border-box;
}

.header-identity #sidebar-greeting {
  display: none !important;
}

#logged-in-view {
  align-items: center;
}

#logged-in-view .user-info {
  min-width: 0;
  flex: 1;
  padding: 4px 8px !important;
}

#logged-in-view .user-name {
  max-width: 100%;
}

#sidebar .sidebar-tree summary,
#sidebar .menu-btn,
#sidebar .sub-details summary {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
  min-height: 38px;
}

#sidebar .sidebar-tree details {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 767px) {
  .topbar {
    z-index: 1100 !important;
  }

  #sidebar {
    top: 0 !important;
    height: 100dvh !important;
    z-index: 1300 !important;
    width: min(86vw, 320px) !important;
    padding-top: 16px !important;
  }

  .sidebar-head {
    margin-bottom: 10px;
  }

  .sidebar-menu-title {
    display: none !important;
  }

  .header-identity #sidebar-greeting {
    display: none !important;
  }

  #logged-in-view {
    border-radius: 16px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
  }

  #logged-in-view .user-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
  }

  #logged-in-view .user-info {
    gap: 4px;
  }

  #logged-in-view .user-actions {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  #sidebar .sidebar-tree details,
  #sidebar .sidebar-tree summary,
  #sidebar .menu-btn,
  #sidebar .sub-details summary {
    border-radius: 14px;
  }
}

/* === Fix follow-up mobile sidebar alignment + desktop/mobile greeting split === */
.header-greeting {
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 12px rgba(0, 0, 0, 0.14);
}

#header-greeting .greet-jp,
#header-greeting .greet-user,
#sidebar-greeting .greet-jp,
#sidebar-greeting .greet-user {
  line-height: 1.15;
}

/* default: desktop pakai greeting di header */
#header-greeting {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#sidebar-greeting {
  display: none;
}

/* rapikan blok profil + logout agar center sejajar */
#logged-in-view {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 10px;
  padding: 10px 12px !important;
}

#logged-in-view .user-avatar {
  margin: 0;
}

#logged-in-view .user-info {
  padding: 0 !important;
  min-width: 0;
}

#logged-in-view .logout-floating-btn {
  align-self: center;
  justify-self: end;
  margin: 0;
}

#logged-in-view[style*="display: none"] {
  display: none !important;
}

#sidebar .sidebar-tree > .menu-btn,
#sidebar .sidebar-tree > details > summary,
#sidebar .sidebar-tree .sub-details > summary,
#sidebar .sidebar-tree details .subfolder-list .menu-btn,
#sidebar .sidebar-tree details .level-list .menu-btn {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.75rem 1rem !important;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.14) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

#sidebar .sidebar-tree > .menu-btn:hover,
#sidebar .sidebar-tree > details > summary:hover,
#sidebar .sidebar-tree .sub-details > summary:hover,
#sidebar .sidebar-tree details .subfolder-list .menu-btn:hover,
#sidebar .sidebar-tree details .level-list .menu-btn:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.28);
}

#sidebar .inline-menu-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

@media (max-width: 767px) {
  /* mobile: sapaan pindah ke sidebar */
  #header-greeting {
    display: none !important;
  }

  #sidebar-greeting {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
  }

  #sidebar .sidebar-tree > .menu-btn,
  #sidebar .sidebar-tree > details > summary,
  #sidebar .sidebar-tree .sub-details > summary,
  #sidebar .sidebar-tree details .subfolder-list .menu-btn,
  #sidebar .sidebar-tree details .level-list .menu-btn {
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.14) !important;
    padding: 0.75rem 1rem !important;
  }

  #logged-in-view {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center !important;
    gap: 10px;
    padding: 10px 12px !important;
    border-radius: 16px;
  }

  #logged-in-view .logout-floating-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
  }
}

@media (min-width: 768px) {
  #header-greeting {
    display: inline-flex !important;
  }

  #sidebar-greeting {
    display: none !important;
  }
}

/* === Guest mode restriction cursor + greeting typography + mobile sidebar parity === */
:root {
  --stop-cursor-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ef4444'/%3E%3Cpath d='M7.5 16.5L16.5 7.5' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.search-icon-btn.guest-restricted,
.search-icon-btn.guest-restricted:hover,
.download-card-btn.guest-restricted,
.download-card-btn.guest-restricted:hover {
  cursor: var(--stop-cursor-svg) 8 8, not-allowed !important;
}

body.guest-mode .download-card-btn.guest-restricted {
  opacity: 0.6;
  transform: none !important;
  box-shadow: none !important;
}

@media (min-width: 768px) {
  #header-greeting {
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 767px) {
  #sidebar .sidebar-tree > .menu-btn,
  #sidebar .sidebar-tree > details > summary,
  #sidebar .sidebar-tree .sub-details > summary,
  #sidebar .sidebar-tree details .subfolder-list .menu-btn,
  #sidebar .sidebar-tree details .level-list .menu-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  .topbar {
    gap: 6px !important;
    padding: 8px 10px !important;
  }

  .header-identity img {
    margin-left: -1px !important;
  }
}

#supportBtn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffdce8 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
  transition: none !important;
}

#supportBtn:hover,
#supportBtn:active {
  transform: none !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.18) !important;
}

#supportBtn::before {
  content: none !important;
  animation: none !important;
}

#supportBtn .support-dev-icon {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  fill: none;
  stroke: #ff86b4;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-1.5px);
}

/* ====================================================
   FIX MOBILE: REKOMENDASI KANJI (ANTI NGINTIP)
   Wajib taruh di paling bawah style.css
==================================================== */
@media (max-width: 767px) {
  
  #kanjiModal #recommendationRow,
  #kanjiModal .recommendation-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    
    /* 🚀 KUNCI 1: Hilangkan padding kiri-kanan biar ngitungnya presisi 100% */
    padding: 5px 0px 15px !important; 
    gap: 12px !important;
    
    overflow-x: auto !important;
    overflow-y: hidden !important;
    align-items: center !important;
    
    height: 125px !important;
    min-height: 125px !important;
    max-height: 125px !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important; 
  }
  
  #kanjiModal .recommendation-item {
    /* 🚀 KUNCI 2: Lebar persis 50% dikurangi setengah jarak (gap) */
    flex: 0 0 calc(50% - 6px) !important; 
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    
    height: 95px !important;
    min-height: 95px !important;
    max-height: 95px !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;      
    justify-content: center !important;  
    text-align: center !important;
    
    scroll-snap-align: start !important; 
    position: relative !important;
  }

  /* Teks center & proporsional */
  #kanjiModal .recommendation-item .rec-kanji {
    font-size: clamp(1.4rem, 6vw, 1.8rem) !important; 
    margin-bottom: 2px !important;
    line-height: 1.2 !important;
    width: 100% !important;
  }

  #kanjiModal .recommendation-item .rec-kana {
    font-size: 0.8rem !important;
    color: #4b5563 !important;
    width: 100% !important;
  }

  /* Tombol dipaku di pojok bawah biar teks gak kegeser */
  #kanjiModal .recommendation-item .rec-audio-btn {
    position: absolute !important;
    right: 6px !important;
    bottom: 6px !important;
    margin: 0 !important;
  }
}

.language-switch {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(148,163,184,.4);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #1e293b;
  cursor: pointer;
}

.language-switch svg {
  width: 24px;
  height: 24px;
}

/* =========================================================
   Mobile Bottom Navigation (Facebook-ish, versi NihonByte)
   - Clean, native, tidak 100% mirip FB
   - Aman untuk mode latihan (dokkai split-screen tetap utuh)
========================================================= */

:root {
  --bottom-nav-height: 66px;
}

.bottom-nav {
  display: none;
}

@media (max-width: 767px) {
  /* languageSwitch di sidebar-head tetap tampil di mobile */
  body.duo-nav-enabled #languageSwitch { display: flex !important; }

  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
    display: flex;
    gap: 6px;
    justify-content: space-between;
    align-items: center;

    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(148, 163, 184, 0.28);

    z-index: 1005;
  }

  .bottom-nav__item {
    flex: 1;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px;
    border-radius: 12px;

    color: rgba(15, 23, 42, 0.62);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.1px;
  }

  .bottom-nav__item svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.95;
  }

  .bottom-nav__item.is-active {
    color: #ff4d6d;
    background: rgba(255, 77, 109, 0.09);
  }

  .bottom-nav__item:active {
    transform: translateY(1px);
  }

  /* Biar konten + footer tidak ketiban bottom nav */
  body:not(.training-session):not(.review-mode-active) .content-panel {
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 18px) !important;
  }

  body:not(.training-session):not(.review-mode-active) .pagination-container {
    margin-bottom: calc(55px + var(--bottom-nav-height)) !important;
  }
}

/* Jangan ganggu flow latihan / review */
body.training-session .bottom-nav,
body.review-mode-active .bottom-nav {
  display: none !important;
}

/* =========================================================
   Hub Screen (Menu & Latihan) — clean card layout
========================================================= */

.hub-mode {
  display: block !important;
  padding: 14px 14px 6px !important;
}

@media (max-width: 768px) {
  .hub-mode {
    padding: 52px 12px 6px !important;
  }
}

.hub-screen {
  max-width: 980px;
  margin: 0 auto;
}

.hub-header {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 14px 14px;
  margin-bottom: 14px;
}

.hub-header h2 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
}

.hub-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  line-height: 1.35;
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 540px) {
  .hub-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.hub-card {
  border: 1px solid rgba(148, 21, 78, 0.18);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  padding: 14px 12px;
  text-align: left;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
}

.hub-card svg {
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 14px;
  background: rgba(255, 77, 109, 0.10);
  color: #ff4d6d;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hub-card strong {
  display: block;
  font-weight: 900;
  color: #111827;
  line-height: 1.1;
}

.hub-card span {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(17, 24, 39, 0.68);
  line-height: 1.25;
}

.hub-card:active {
  transform: translateY(1px);
}

/* =========================================
   Menu hub grid (terpisah dari hub utama)
========================================= */

.menu-hub-screen {
  width: 100%;
  max-width: none;
}

.menu-hub-header {
  margin-bottom: 14px;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.menu-hub-header h2 {
  margin: 0 0 6px;
  color: #0f172a;
  text-shadow: none;
  font-weight: 950;
}

.menu-hub-title-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 0;
  background: none;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 950;
  letter-spacing: 0.2px;
  box-shadow: none;
}

.menu-hub-header p {
  color: #334155;
}

.menu-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
  width: 100%;
  align-items: stretch;
}

#grid.hub-mode {
  grid-template-columns: minmax(0, 1fr) !important;
}

.menu-panel-card {
  border: 1px solid rgba(148, 21, 78, 0.18);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  padding: 14px 12px;
  box-sizing: border-box;
  text-align: left;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 106px;
}

.menu-panel-card svg {
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 14px;
  background: rgba(255, 77, 109, 0.10);
  color: #ff4d6d;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-panel-card strong {
  display: block;
  font-weight: 900;
  color: #111827;
  line-height: 1.15;
  font-size: 1.08rem;
}

.menu-panel-card span {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 750;
  color: rgba(17, 24, 39, 0.72);
  line-height: 1.28;
}

.menu-panel-card__body {
  min-width: 0;
}

.menu-panel-card strong {
  font-size: 1.1rem;
  word-break: break-word;
}

.menu-panel-card:active {
  transform: translateY(1px);
}

.hub-section {
  margin-top: 16px;
}

.hub-section h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

.menu-hub-screen .hub-section h3 {
  color: #ffe8ef;
  text-shadow: none;
  font-size: 1.05rem;
  letter-spacing: 0.1px;
}

.menu-section-title-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  color: #ffffff !important;
  font-size: 1.14rem !important;
  font-weight: 950 !important;
  line-height: 1.2;
  text-shadow: none;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.16);
}

.menu-hub-screen .hub-section:nth-of-type(1) .menu-section-title-pill {
  background: linear-gradient(135deg, #f97316, #ef4444);
}

.menu-hub-screen .hub-section:nth-of-type(2) .menu-section-title-pill {
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
}

.menu-hub-screen .hub-section:nth-of-type(3) .menu-section-title-pill {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

@media (min-width: 768px) {
  .menu-hub-screen .menu-hub-section-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 24px;
    padding: 10px 12px 12px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    width: fit-content;
    max-width: 100%;
  }

  .menu-hub-screen .menu-hub-section-card .hub-levels {
    gap: 8px;
  }
}

.hub-screen--practice .hub-section {
  margin-top: 14px;
}

.hub-section-capsule {
  display: inline-flex;
  align-items: center;
  margin: 0 0 10px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.25;
  color: #fff;
  text-shadow: none;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14);
}

.hub-section-capsule--goi {
  background: linear-gradient(135deg, #ec4899, #db2777);
}

.hub-section-capsule--bunpou {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

.hub-section-capsule--dokkai {
  background: linear-gradient(135deg, #f97316, #ef4444);
}

.hub-section-capsule--choukai {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.hub-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hub-level-btn {
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  letter-spacing: 0.2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 18px rgba(0, 0, 0, 0.14);
}

.hub-level-btn:active {
  transform: translateY(1px);
}

.menu-hub-screen .hub-level-btn {
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.16);
}

.menu-hub-screen .hub-level-btn--letters {
  background: linear-gradient(135deg, #fb7185, #ec4899);
}

.hub-level-btn--patterns {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.16);
}

.hub-screen--practice .hub-level-btn--patterns {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.hub-screen--practice .hub-section:nth-of-type(2) .hub-level-btn--patterns {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

.hub-screen--practice .hub-section:nth-of-type(3) .hub-level-btn--patterns {
  background: linear-gradient(135deg, #fb7185, #e11d48);
}

.hub-screen--practice .hub-section:nth-of-type(4) .hub-level-btn--patterns {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.menu-hub-screen .hub-level-btn--category {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

.menu-hub-screen .hub-level-btn:hover {
  filter: brightness(1.04);
}

.hub-note {
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 650;
  line-height: 1.45;
}

.menu-hub-screen .hub-note {
  background: linear-gradient(135deg, #fb7185, #e11d48);
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}

.hub-details {
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.menu-hub-screen .hub-details {
  background: linear-gradient(140deg, #db2777, #7c3aed);
  border-color: rgba(255, 255, 255, 0.28);
}

.hub-details--always-open {
  margin-top: 4px;
  padding: 12px;
}

.menu-hub-screen .hub-details--always-open {
  background: linear-gradient(140deg, #eef2ff, #ddd6fe);
  border-color: rgba(99, 102, 241, 0.32);
}

.hub-details > summary {
  cursor: pointer;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.95);
  list-style: none;
  user-select: none;
}

.hub-details > summary::-webkit-details-marker {
  display: none;
}

.hub-details[open] > summary {
  margin-bottom: 10px;
}

/* === Mobile UX cleanup (topbar, sidebar, footer, bottom-nav) === */
.sidebar-language-switch {
  width: fit-content !important;
  border-radius: 12px;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-color: rgba(255,255,255,0.24);
  background: #242526 !important;
  color: #fff;
  font-weight: 700;
}

.sidebar-language-switch svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

@media (max-width: 767px) {
  :root {
    --topbar-height: 20px;
    --bottom-nav-height: 62px;
  }

  .topbar {
    min-height: var(--topbar-height) !important;
    height: var(--topbar-height) !important;
    padding: 4px 10px !important;
    gap: 8px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
  }

  .header-identity img {
    width: 40px;
    height: 40px;
  }

  #header-greeting,
  #sidebar-greeting {
    display: none !important;
  }

  #hamburger {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  #searchBtn,
  .search-icon-btn {
    width: 40px;
    height: 40px;
  }

  #grid,
  #grid.pattern-grid-layout {
    padding-top: calc(var(--topbar-height) + 8px) !important;
  }

  .pagination-container {
    margin-bottom: calc(var(--bottom-nav-height) + 10px) !important;
    padding-top: 10px !important;
  }

  .app-footer {
    display: none !important;
  }

  .bottom-nav {
    background: #d3d3d3 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid rgba(15, 23, 42, 0.12);
    transition: transform 0.22s ease;
  }

  .bottom-nav.is-hidden {
    transform: translateY(calc(100% + env(safe-area-inset-bottom)));
  }

  .bottom-nav__item.is-active {
    background: rgba(255, 77, 109, 0.15);
  }

  .sidebar-head {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
}

/* === Bottom navbar dedicated hubs (MENU & LATIHAN only) === */
.bottom-nav-hub {
  display: none;
}

@media (max-width: 767px) {
  body.bottom-nav-hub-open #grid,
  body.bottom-nav-hub-open .pagination-container,
  body.bottom-nav-hub-open .app-footer {
    display: none !important;
  }

  .bottom-nav-hub {
    display: block;
    padding: calc(var(--topbar-height) + 8px) 12px calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 10px);
    min-height: calc(100dvh - var(--topbar-height));
    box-sizing: border-box;
  }

  .bottom-nav-hub[hidden] {
    display: none !important;
  }

  .bottom-nav-hub__screen {
    display: grid;
    gap: 12px;
  }

  .bottom-nav-hub__header {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px;
    color: #111827;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
  }

  .bottom-nav-hub__header h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 1000;
  }

  .bottom-nav-hub__header p {
    margin: 4px 0 0;
    font-size: 0.84rem;
    font-weight: 600;
    color: #374151;
  }

  .bottom-nav-hub__group {
    background: rgba(255,255,255,0.9);
    border-radius: 16px;
    padding: 12px;
    border: 1px solid rgba(148,163,184,0.28);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  }

  .bottom-nav-hub__group h3 {
    margin: 0 0 10px;
    font-size: 0.92rem;
    font-weight: 900;
    color: #1f2937;
  }

  .bottom-nav-hub__capsule {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.97rem !important;
    line-height: 1.25;
    color: #fff !important;
    text-shadow: none;
    box-shadow: 0 8px 14px rgba(15, 23, 42, 0.14);
  }

  .bottom-nav-hub__capsule--goi,
  .bottom-nav-hub__capsule--letters {
    background: linear-gradient(135deg, #ec4899, #db2777);
  }

  .bottom-nav-hub__capsule--bunpou {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
  }

  .bottom-nav-hub__capsule--dokkai,
  .bottom-nav-hub__capsule--patterns {
    background: linear-gradient(135deg, #f97316, #ef4444);
  }

  .bottom-nav-hub__capsule--choukai {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
  }

  .bottom-nav-hub__capsule--kotoba {
    background: linear-gradient(135deg, #7c3aed, #6366f1);
  }

  .bottom-nav-hub__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .bottom-nav-hub__chip {
    border: 1px solid rgba(148,163,184,0.35);
    background: #fff;
    border-radius: 999px;
    min-height: 36px;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 850;
    color: #334155;
    white-space: normal;
    word-break: break-word;
    line-height: 1.15;
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chip {
    flex: 0 1 auto;
    text-align: center;
  }

  .bottom-nav-hub__menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .bottom-nav-hub__menu-card {
    border: 1px solid rgba(148, 21, 78, 0.18);
    background: rgba(255,255,255,0.95);
    border-radius: 16px;
    padding: 12px;
    text-align: left;
    display: grid;
    gap: 4px;
    min-height: 86px;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
  }

  .bottom-nav-hub__menu-card strong {
    font-size: 0.95rem;
    color: #111827;
    font-weight: 900;
  }

  .bottom-nav-hub__menu-card span {
    font-size: 0.78rem;
    color: #475569;
    font-weight: 700;
    line-height: 1.24;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__header {
    background: #ffffff !important;
    border-color: rgba(236, 72, 153, 0.24);
    margin-top: 0px !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__header {
    background: linear-gradient(140deg, #eff6ff, #e0e7ff);
    border-color: rgba(59, 130, 246, 0.25);
    margin-top: 0px !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group:nth-of-type(3n + 1) {
    background: linear-gradient(140deg, #fde2e8, #ffd6e2);
    border-color: rgba(236, 72, 153, 0.26);
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group:nth-of-type(3n + 2) {
    background: linear-gradient(140deg, #e0f2fe, #dbeafe);
    border-color: rgba(37, 99, 235, 0.24);
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group:nth-of-type(3n) {
    background: linear-gradient(140deg, #ede9fe, #e0e7ff);
    border-color: rgba(139, 92, 246, 0.26);
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__group:nth-of-type(2n + 1) {
    background: linear-gradient(140deg, #fef3c7, #ffedd5);
    border-color: rgba(249, 115, 22, 0.25);
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__group:nth-of-type(2n) {
    background: linear-gradient(140deg, #ecfeff, #dbeafe);
    border-color: rgba(37, 99, 235, 0.22);
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__chip,
  .bottom-nav-hub__screen--practice .bottom-nav-hub__chip {
    border-color: rgba(100, 116, 139, 0.28);
    background: #242526;
    color: #ffffff;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__header p {
    font-size: 0.9rem;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__header h2 {
    display: block;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__capsule {
    font-weight: 920;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__capsule--letters {
    background: linear-gradient(135deg, #ec4899, #f43f5e);
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__capsule--patterns {
    background: linear-gradient(135deg, #fb7185, #f97316);
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__capsule--kotoba {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group:nth-of-type(1) .bottom-nav-hub__chip {
    background: linear-gradient(135deg, #fff1f2, #ffe4e6);
    border-color: rgba(251, 113, 133, 0.3);
    color: #9f1239;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group:nth-of-type(2) .bottom-nav-hub__chip {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border-color: rgba(249, 115, 22, 0.3);
    color: #9a3412;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chip {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border-color: rgba(99, 102, 241, 0.34);
    color: #3730a3;
  }

  .bottom-nav-hub__menu-card strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .bottom-nav-hub__menu-icon {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
  }

  .bottom-nav-hub__menu-icon img,
  .bottom-nav-hub__menu-icon svg {
    width: 13px;
    height: 13px;
    display: block;
  }

  .bottom-nav-hub__menu-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .bottom-nav-hub__menu-icon--letters {
    background: linear-gradient(135deg, #fbcfe8, #f472b6);
    color: #9d174d;
  }

  .bottom-nav-hub__menu-icon--verb {
    background: linear-gradient(135deg, #93c5fd, #60a5fa);
    color: #1e3a8a;
  }

  .bottom-nav-hub__menu-icon--grammar {
    background: linear-gradient(135deg, #fecaca, #fb7185);
    color: #9f1239;
  }

  .bottom-nav-hub__menu-icon--adjective {
    background: linear-gradient(135deg, #c4b5fd, #a78bfa);
    color: #581c87;
  }

  .bottom-nav-hub__menu-icon--expressions {
    background: linear-gradient(135deg, #fcd34d, #fb923c);
    color: #9a3412;
  }
}

/* =========================================
   MENU HUB LAYOUT (TERPISAH DARI GRID)
========================================= */

.menu-hub-container {
  display: none;
  padding-top: 110px;
  padding-left: 340px;
  padding-right: 40px;
  padding-bottom: 40px;
  box-sizing: border-box;
}

.menu-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: 18px;
  max-width: 900px;
}

.menu-hub-card {
  background: rgba(255,255,255,0.92);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}

.menu-hub-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

#grid.hub-mode,
#grid.hub-mode * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

@media (max-width: 767px) {
  .menu-hub-header {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .menu-hub-header h2 {
    color: #111827;
    text-shadow: none;
    font-weight: 900;
  }

  .menu-hub-title-pill {
    font-size: 1.1rem;
    padding: 6px 12px;
  }

  .menu-hub-header p {
    color: #374151;
    font-weight: 500;
  }

  .menu-hub-screen .menu-section-title-pill {
    border: 0;
    font-size: 1.02rem !important;
    padding: 7px 12px;
  }
}

/* === Mobile spacing fix: rapat ke topbar + search button perfect circle === */
@media (max-width: 767px) {
  #grid,
  #grid.pattern-grid-layout,
  body.history-mode #grid {
    padding-top: 8px !important;
  }

  body.history-mode #grid {
    align-items: flex-start !important;
    align-content: flex-start !important;
    justify-content: start !important;
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 16px) !important;
  }

  .dashboard-shell {
    margin-top: -10px !important;
  }

  .bottom-nav-hub,
  .menu-hub-container {
    padding-top: 35px !important;
  }

  #searchBtn,
  .search-icon-btn {
    width: 40px !important;
    min-width: 34px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 34px !important;
    max-height: 40px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1;
  }

  #searchBtn svg,
  .search-icon-btn svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* === Refresh: menu kotoba + latihan container overrides === */
.menu-hub-screen .menu-hub-section-card--kotoba,
.menu-hub-screen .menu-hub-section-card--kotoba .hub-details,
.menu-hub-screen .menu-hub-section-card--kotoba .hub-details--always-open {
  background: #ffffff !important;
}

.menu-hub-screen .menu-hub-section-card--kotoba .menu-section-title-pill {
  background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
}

.hub-practice-wrapper {
  background: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  padding: 16px;
  margin: 16px auto 22px;
  width: min(100%, 860px);
}

.hub-practice-wrapper .hub-section:first-child {
  margin-top: 0;
}

.hub-note--choukai {
  background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  font-weight: 800;
}

@media (min-width: 768px) {
  .hub-screen--practice .hub-practice-shell {
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 20px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
    padding: 18px 18px 20px;
    width: min(100%, 900px);
    margin: 0px auto 26px;
  }

  .hub-screen--practice .hub-header--practice {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    width: 96%;
    max-width: 100%;
    background: linear-gradient(140deg, #f9a8d4, #f472b6);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
    margin-bottom: 12px;
  }

  .hub-screen--practice .hub-header--practice h2 {
    margin: 0 0 4px;
  }

  .practice-hub-title-pill {
    display: inline-flex;
    align-items: center;
    font-size: 2rem;
    font-weight: 1000;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .hub-screen--practice .hub-header--practice p {
    margin: 0;
    color: rgba(255, 255, 255, 0.96);
    font-weight: 800;
    font-size: 1.02rem;
    line-height: 1.35;
  }

  .hub-practice-divider {
    width: 100%;
    border-bottom: 2px solid rgba(148, 163, 184, 0.35);
    margin: 2px 0 10px;
  }

  .hub-screen--practice .hub-practice-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent !important;
  }

  .menu-hub-screen button,
  .hub-screen--practice button,
  .hub-screen--practice [data-main],
  .hub-screen--practice [data-hub] {
    cursor: pointer !important;
  }
}

@media (max-width: 767px) {
  .menu-hub-screen .menu-hub-section-card,
  .menu-hub-screen .menu-hub-section-card--kotoba,
  .menu-hub-screen .menu-hub-section-card--kotoba .hub-details,
  .menu-hub-screen .menu-hub-section-card--kotoba .hub-details--always-open {
    background: #ffffff !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group {
    background: #ffffff !important;
    border-color: rgba(148, 163, 184, 0.32) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group .bottom-nav-hub__chip,
  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chip,
  .bottom-nav-hub__screen--menu .bottom-nav-hub__group:nth-of-type(1) .bottom-nav-hub__chip,
  .bottom-nav-hub__screen--menu .bottom-nav-hub__group:nth-of-type(2) .bottom-nav-hub__chip {
    background: #242526 !important;
    color: #ffffff !important;
    border-color: rgba(100, 116, 139, 0.28) !important;
  }

  .bottom-nav-hub__practice-wrapper {
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    margin: 4px 0 8px;
  }

  .bottom-nav-hub__practice-wrapper .bottom-nav-hub__group {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 12px;
    margin: 0;
    border-radius: 0;
  }

  .bottom-nav-hub__practice-wrapper .bottom-nav-hub__group:last-child {
    padding-bottom: 0;
  }

  .bottom-nav-hub__note {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.35;
  }

  .bottom-nav-hub__note--choukai {
    background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
    color: #ffffff !important;
  }

  .hub-practice-wrapper {
    margin: 12px 0 calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 16px);
    width: 100%;
  }
}

/* === Requested tweaks: profile-to-dashboard, language flag, mobile menu spacing === */
.user-avatar {
  cursor: pointer;
}

.sidebar-language-switch svg,
.duo-flag-icon {
  border-radius: 999px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .bottom-nav-hub__screen--menu .bottom-nav-hub__header p {
    margin-top: 10px;
  }
}

/* === Desktop-only refinement: compact native header + neutral sidebar === */
@media (min-width: 769px) {
  .topbar {
    height: 56px !important;
    min-height: 56px !important;
    padding: 4px 12px !important;
    gap: 8px !important;
  }

  .header-identity {
    margin-right: auto !important;
  }

  .header-identity img {
    width: 34px !important;
    height: 34px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16) !important;
  }

  .search-icon-btn {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
  }

  .search-icon-btn svg {
    width: 19px !important;
    height: 19px !important;
    stroke-width: 2.25 !important;
  }

  .app-body-shell {
    margin-top: 0 !important;
    top: 56px !important;
  }

  #sidebar {
    background: #d3d3d3 !important;
    border-right: 1px solid rgba(15, 23, 42, 0.14) !important;
  }

  #sidebar .sidebar-tree > .menu-btn,
  #sidebar .sidebar-tree > details > summary,
  #sidebar .sidebar-tree .sub-details > summary,
  #sidebar .sidebar-tree details .subfolder-list .menu-btn,
  #sidebar .sidebar-tree details .level-list .menu-btn,
  #languageSwitch,
  #supportBtn {
    background: #07090d !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 3px 10px rgba(2, 6, 23, 0.34) !important;
  }

  #grid {
    padding-top: 10px !important;
  }
}

/* === Follow-up fix: desktop logo fit, sidebar flat, profile version, footer removed === */
.app-footer {
  display: none !important;
}

#logged-in-view {
  border: 1px solid rgba(17, 24, 39, 0.18) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.24) !important;
}

#logged-in-view .profile-version {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.72);
  line-height: 1.25;
}

@media (min-width: 769px) {
  .topbar {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 12px !important;
  }

  .header-identity {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  .header-identity img {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    display: block !important;
    box-shadow: none !important;
  }

  #sidebar {
    background: #D3D3D3 !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    border-right: 1px solid rgba(15, 23, 42, 0.14) !important;
  }

  #sidebar::before,
  #sidebar::after {
    content: none !important;
    display: none !important;
  }

  #sidebar .sidebar-tree > .menu-btn,
  #sidebar .sidebar-tree > details > summary,
  #sidebar .sidebar-tree .sub-details > summary,
  #sidebar .sidebar-tree details .subfolder-list .menu-btn,
  #sidebar .sidebar-tree details .level-list .menu-btn,
  #sidebar-duo-nav .duo-nav-item,
  #sidebar-duo-nav .duo-nav-support,
  #sidebar-duo-nav .duo-nav-subitem,
  #languageSwitch,
  #supportBtn {
    background: #05070b !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
  }

  #sidebar .sidebar-tree > .menu-btn:hover,
  #sidebar .sidebar-tree > details > summary:hover,
  #sidebar .sidebar-tree .sub-details > summary:hover,
  #sidebar .sidebar-tree details .subfolder-list .menu-btn:hover,
  #sidebar .sidebar-tree details .level-list .menu-btn:hover,
  #sidebar-duo-nav .duo-nav-item:hover,
  #sidebar-duo-nav .duo-nav-support:hover,
  #sidebar-duo-nav .duo-nav-subitem:hover,
  #languageSwitch:hover,
  #supportBtn:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .app-body-shell {
    margin-top: 0 !important;
    top: 52px !important;
  }
}

/* === Follow-up desktop refinement: capsule tone #242526 + stronger reset logo === */
@media (min-width: 769px) {
  .header-identity img {
    width: 50px !important;
    height: 50px !important;
  }

  #logged-in-view {
    background: #242526 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
  }

  #logged-in-view .user-name,
  #logged-in-view .profile-version {
    color: #e8eaed !important;
  }

  #logged-in-view .profile-version {
    opacity: 0.8;
  }

  #logged-in-view .logout-floating-btn,
  .logout-floating-btn {
    color: #ffffff !important;
    border-color: rgba(125, 211, 252, 0.42) !important;
    background: rgba(3, 7, 18, 0.55) !important;
    box-shadow: none !important;
  }

  #sidebar-duo-nav .duo-nav-item,
  #sidebar-duo-nav .duo-nav-support,
  #sidebar-duo-nav .duo-nav-subitem,
  #sidebar .sidebar-tree > .menu-btn,
  #sidebar .sidebar-tree > details > summary,
  #sidebar .sidebar-tree .sub-details > summary,
  #sidebar .sidebar-tree details .subfolder-list .menu-btn,
  #sidebar .sidebar-tree details .level-list .menu-btn,
  #languageSwitch,
  #supportBtn {
    background: #242526 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f5f6f7 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }

  #sidebar .sidebar-tree details {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}

/* === Desktop-only follow-up: topbar dark, menu title capsule, extra top logo === */
@media (min-width: 769px) {
  .topbar {
    background: #242526 !important;
  }

  .header-identity {
    gap: 8px !important;
  }

  .header-identity .js-reset-logo {
    width: 50px !important;
    height: 50px !important;
  }

  .header-identity > img.js-reset-logo:not(.topbar-side-logo) {
    display: none !important;
  }

  .header-identity .topbar-side-logo {
    width: auto !important;
    height: 48px !important;
    object-fit: contain;
    max-width: 140px !important;
    display: block;
    border-radius: 0;
  }

  .sidebar-section-title {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    background: #242526 !important;
    color: #f5f6f7 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    margin: 8px 0 12px !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  html,
  body {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  /* Desktop only: kanji/activity/expression/pattern cards tone #242526 + aksen gradient */
  .card-image,
  .card-image.expanded,
  .expression-wide-card,
  .pattern-card {
    background:
      radial-gradient(circle at 14% 16%, rgba(255, 255, 255, 0.08), transparent 34%),
      radial-gradient(circle at 85% 84%, rgba(125, 211, 252, 0.13), transparent 42%),
      linear-gradient(158deg, #2b2d2f 0%, #242526 56%, #1f2021 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 12px 26px rgba(0, 0, 0, 0.34) !important;
  }

  /* Desktop only: ubah warna icon download SVG saja, border tombol tetap */
  .download-card-btn svg {
    color: #242526 !important;
    stroke: #242526 !important;
  }

  .download-card-btn:hover svg {
    color: #242526 !important;
    stroke: #242526 !important;
  }

  /* Desktop only: samakan border expanded kanji card dengan warna body */
  #kanjiModal #expandedCard .card-image.expanded,
  #kanjiModal .expanded-card .card-image.expanded {
    border: 2px solid #D3D3D3 !important;
  }
}

/* === Requested: Desktop training dedicated page + dashboard scrollbar visibility === */
@media (min-width: 769px) {
  /* Halaman latihan berdiri sendiri: hanya result info, konten center */
  body.training-session .header-identity,
  body.training-session #searchBtn,
  body.training-session .search-icon-btn {
    display: none !important;
  }

  body.training-session .topbar {
    justify-content: center !important;
  }

  body.training-session .app-body-shell {
    display: block !important;
    height: calc(100vh - var(--topbar-height)) !important;
    min-height: calc(100vh - var(--topbar-height)) !important;
    overflow: hidden !important;
  }

  body.training-session .content-panel {
    height: calc(100vh - var(--topbar-height)) !important;
    min-height: calc(100vh - var(--topbar-height)) !important;
    overflow: auto !important;
    border-left: none !important;
  }

  body.training-session #grid.quiz-active-mode {
    margin-top: 0 !important;
    padding: 10px !important;
    min-height: calc(100vh - var(--topbar-height)) !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.training-session .quiz-wrapper-pro,
  body.training-session .dokkai-wrapper-pro {
    width: min(1280px, 96vw) !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
  }

  /* Dasbor: tampilkan scrollbar agar riwayat latihan bisa di-scroll jelas */
  body.history-mode .content-panel {
    overflow-y: auto !important;
    scrollbar-width: auto !important;
    -ms-overflow-style: auto !important;
  }

  body.history-mode .content-panel::-webkit-scrollbar {
    width: 10px !important;
  }

  body.history-mode .content-panel::-webkit-scrollbar-thumb {
    background: rgba(36, 37, 38, 0.45) !important;
    border-radius: 999px !important;
  }

  body.history-mode .content-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.24) !important;
  }
}

/* === Requested follow-up: dashboard scrollbar visible + block dashboard text selection === */
body.history-mode .content-panel {
  overflow-y: scroll !important;
  scrollbar-gutter: stable both-edges !important;
}

body.history-mode .dashboard-shell,
body.history-mode .dashboard-shell * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

body.history-mode .dashboard-shell input,
body.history-mode .dashboard-shell textarea {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* =========================================
   🔥 FIX FINAL: SIDEBAR DIAM + KANAN SCROLL + GAK TENGGELAM 🔥
========================================= */
@media (min-width: 768px) {
  /* 1. Gembok global, Sidebar fix 100% DIAM */
  html, body.history-mode {
    overflow: hidden !important;
  }

  /* 2. Kerangka utama dipotong topbar biar gak tembus ke bawah layar */
  body.history-mode .app-body-shell {
    height: calc(100vh - var(--topbar-height, 60px)) !important;
    overflow: hidden !important;
  }

  /* 3. Panel kanan aja yang SCROLLABLE (Wajib block, JANGAN flex) */
  body.history-mode .content-panel {
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important; 
  }

  /* 4. Bebaskan grid bawaan */
  body.history-mode #grid {
    display: block !important;
    height: auto !important;
  }

  /* 5. GANJELAN GAIB: Solusi elegan biar poster bawah gak tenggelam */
  body.history-mode .content-panel::after {
    content: "";
    display: block;
    height: 10px !important; /* Besaran ruang kosong di bawah, sesuaikan seleramu */
    width: 100%;
  }
}

/* ==========================================
   CARD ACTION BUTTONS — HOVER REVEAL SYSTEM
   ========================================== */

/* Base style semua tombol aksi di kartu */
.card-action-btn {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ff4d6d;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  /* Sembunyiin by default */
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

/* Play button posisi kanan bawah */
.card-action-btn.play-audio-btn {
  bottom: 12px !important;
  right: 12px !important;
  top: auto !important;
  left: auto !important;
}

/* Bookmark button posisi kiri atas */
.card-action-btn.bookmark-card-btn {
  top: 10px !important;
  left: 10px !important;
}

/* Download button posisi kanan atas */
.card-action-btn.download-card-btn {
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
}

/* Saat sudah di-bookmark, warnanya pink */
.card-action-btn.bookmark-card-btn.is-bookmarked {
  background: rgba(255,77,109,0.2);
  border-color: rgba(255,77,109,0.6);
}

/* Hover pada kartu → semua tombol muncul */
.card-image:hover .card-action-btn {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Mobile: tap reveal state */
.card-image.touch-revealed .card-action-btn {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Override style lama play-audio-btn biar gak bentrok */
.play-audio-btn {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
}

/* Di modal expanded, tombol tetap selalu keliatan */
#kanjiModal .card-action-btn {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}

/* ==========================================
   HALAMAN FAVORIT
   ========================================== */

/* Badge di tombol sidebar */
.favorit-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ff4d6d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  margin-left: 6px;
}

/* Title pill warna pink bookmark */
.favorit-title-pill {
  background: linear-gradient(135deg, #ff4d6d, #ff8fab) !important;
  display: inline-flex;
  align-items: center;
}

/* Header deskripsi & clear button */
.favorit-hub-header p {
  margin-bottom: 10px;
}
.favorit-clear-btn {
  display: inline-block;
  font-size: 12px;
  color: #ff4d6d;
  background: rgba(255,77,109,0.08);
  border: 1px solid rgba(255,77,109,0.2);
  border-radius: 8px;
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 4px;
}
.favorit-clear-btn:hover {
  background: rgba(255,77,109,0.15);
}

/* Section container kartu */
.favorit-card-section {
  overflow-x: auto;
  padding-bottom: 16px !important;
}

/* Row kartu favorit — 3 kolom grid */
.favorit-cards-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  padding: 8px 4px 16px;
}
.favorit-cards-row::-webkit-scrollbar {
  display: none;
}

/* Empty state */
.favorit-empty {
  text-align: center;
  padding: 50px 20px;
}
.favorit-empty-icon { font-size: 44px; margin-bottom: 14px; }
.favorit-empty-title { font-size: 16px; font-weight: 600; color: #555; margin-bottom: 6px; }
.favorit-empty-sub { font-size: 13px; color: #aaa; line-height: 1.6; }

/* Mini card */
.favorit-mini-card {
  cursor: pointer;
  border-radius: 16px;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
}
.favorit-mini-card:hover {
  transform: scale(1.15) translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
  z-index: 50;
}
.favorit-mini-inner {
  background:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,0.22), transparent 56%),
    radial-gradient(circle at 84% 86%, rgba(255,255,255,0.14), transparent 50%),
    linear-gradient(155deg, #2f3031 0%, #242526 45%, #1d1e1f 100%);
  border: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.14),
    inset 0 10px 24px rgba(255,255,255,0.07),
    inset 0 -12px 20px rgba(35,8,15,0.2),
    0 8px 26px rgba(0,0,0,0.35);
  border-radius: 16px;
  padding: 14px 12px 12px;
  text-align: center;
  width: 100%;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  transition: box-shadow 0.2s ease;
}
.favorit-mini-card:hover .favorit-mini-inner {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.2),
    inset 0 10px 24px rgba(255,255,255,0.1),
    inset 0 -12px 20px rgba(35,8,15,0.25),
    0 15px 40px rgba(0,0,0,0.5);
}
.favorit-mini-kanji {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 2px;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.25);
}
.favorit-mini-kana {
  font-size: 11px;
  color: #ffffff;
  font-weight: 500;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.2s ease;
}
.favorit-mini-card:hover .favorit-mini-kana {
  opacity: 1;
  max-height: 20px;
}
.favorit-mini-meaning {
  font-size: 11px;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tombol hapus, muncul saat hover */
.favorit-mini-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
}
.favorit-mini-card:hover .favorit-mini-remove {
  opacity: 1;
}
.favorit-mini-remove:hover {
  background: rgba(255,77,109,0.35);
}

.menu-hub-screen .menu-hub-section-card.favorit-card-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .favorit-cards-row {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .favorit-mini-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  .favorit-mini-inner {
    width: 100% !important;
    height: 130px !important;
    padding: 10px 8px !important;
    box-sizing: border-box !important;
  }

  .favorit-mini-kanji {
    font-size: 18px !important;
  }

  .favorit-mini-meaning {
    font-size: 10px !important;
  }

@media (max-width: 480px) {
  .favorit-mini-inner { width: 100px; height: 115px; }
  .favorit-mini-card:hover { transform: scale(1.08) translateY(-4px); }
}

/* =========================================
   MOBILE OVERHAUL — fokus max-width: 768px
   JANGAN SENTUH DESKTOP
========================================= */

/* ─── 1. Mobile card: dark glass gradient kayak desktop ─── */
@media (max-width: 768px) {
  .card-image,
  .card-image.expanded {
    background:
      radial-gradient(circle at 14% 16%, rgba(255,255,255,0.08), transparent 34%),
      radial-gradient(circle at 85% 84%, rgba(125,211,252,0.1), transparent 42%),
      linear-gradient(158deg, #2b2d2f 0%, #242526 56%, #1f2021 100%) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.07),
      0 8px 20px rgba(0,0,0,0.38) !important;
  }

  /* Download btn icon — dark card, icon jadi putih */
  .download-card-btn svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
  }

  /* ─── 2. Hide top.png, tampilkan favicon di mobile ─── */
  .header-identity .topbar-side-logo {
    display: none !important;
  }
  .header-identity img.js-reset-logo:not(.topbar-side-logo) {
    display: block !important;
    width: 34px !important;
    height: 34px !important;
  }

  /* ─── 3. Topbar lebih kecil dan kompak ─── */
  .topbar {
    min-height: 30px !important;
    height: 45px !important;
    padding: 0 10px !important;
  }

  /* Hamburger rapat ke logo */
  #hamburger {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    margin-right: 1px !important;
  }

  #hamburger .hamburger-svg {
    width: 34px !important;
    height: 34px !important;
    color: #ffffff !important;
  }

  /* Logo lebih kecil */
  .branding {
    margin: 0 0 0 2px !important;
  }
  .branding img {
    height: 34px !important;
  }

  /* Topbar warna #242526 */
  .topbar {
    background: #242526 !important;
  }

  /* Hamburger rapat ke logo */
  #hamburger {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  /* Search btn — circle diperkecil, icon SVG tetap jelas */
  #searchBtn,
  .topbar .search-icon-btn {
    height: 30px !important;
    width: 30px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.95) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  #searchBtn svg,
  .topbar .search-icon-btn svg {
    width: 15px !important;
    height: 15px !important;
    stroke: #1f2937 !important;
    color: #1f2937 !important;
  }

  #resultInfo {
    height: 28px !important;
    font-size: 11px !important;
    padding: 0 10px !important;
    max-width: calc(100vw - 150px) !important;
  }

  #grid {
    padding-top: 12px !important;
  }

  /* ─── 4. iOS version tag no-wrap + profile look fix ─── */
  .profile-version {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
    max-width: 180px !important;
    display: block !important;
  }

  #logged-in-view {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
  }

  #logged-in-view .user-info {
    flex: 1 !important;
    min-width: 0 !important;
  }

  #logged-in-view .user-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    font-weight: 700 !important;
  }

  /* ─── 5. Language switch di sidebar-head tampil di mobile ─── */
  #languageSwitch.sidebar-language-switch {
    display: flex !important;
    width: fit-content !important;
    margin-bottom: 8px !important;
  }
}

/* ─── iOS-specific autohide scroll fix ─── */
.ios-device .bottom-nav {
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}
.ios-device .bottom-nav.is-hidden {
  transform: translateY(100%) !important;
}

/* ─── Mobile: expression/activity grid mulai dari bawah topbar ─── */
@media (max-width: 768px) {
  .expression-wide-grid {
    margin: 0 !important;
    padding: 0 12px !important;
    gap: 12px !important;
    grid-template-columns: 1fr !important;
  }

  #grid {
    padding-top: 52px !important;
  }

  /* Sidebar body-color override for mobile */
  #sidebar {
    background: #D3D3D3 !important;
  }

  /* Sidebar divider warna gelap biar kontras */
  .sidebar-divider,
  #sidebar hr {
    border-color: rgba(0,0,0,0.15) !important;
  }

  /* Sidebar section title (MENU) */
  .sidebar-section-title {
    color: #ffffff !important;
    background: #242526 !important;
  }

  /* Duo nav items */
  .duo-nav-item,
  .duo-nav-subitem,
  .duo-nav-support {
    background: #242526 !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    text-shadow: none !important;
  }

  .duo-nav-item:hover,
  .duo-nav-subitem:hover,
  .duo-nav-support:hover {
    background: #333537 !important;
  }

  /* Profile card warna gelap di atas sidebar terang */
  #logged-in-view {
    background: #242526 !important;
    border-radius: 999px !important;
    color: #ffffff !important;
  }

  #logged-in-view .user-name,
  #logged-in-view .profile-version {
    color: #e8eaed !important;
  }
}

/* === Mobile fix only (tanpa sentuh desktop): favorit + jarak header + warna pola === */
@media (max-width: 767px) {
  /* Semua kartu utama mulai rapat tepat di bawah header */
  #grid,
  #grid.pattern-grid-layout,
  #grid.hub-mode {
    padding-top: 0 !important;
  }

  /* Halaman favorit: 3 mini card pas layar, tanpa horizontal scroll */
  .favorit-card-section {
    overflow-x: hidden !important;
    padding-bottom: 10px !important;
  }

  .favorit-cards-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 6px 0 12px !important;
  }

  .favorit-mini-inner {
    width: 100% !important;
    height: 102px !important;
    border-radius: 14px !important;
    padding: 12px 8px 10px !important;
  }

  .favorit-mini-kanji {
    font-size: clamp(18px, 5.5vw, 26px) !important;
  }

  .favorit-mini-meaning {
    font-size: 10px !important;
  }

  /* Kotoba / Aktivitas / Ungkapan: hilangkan jarak renggang antarkartu */
  .expression-wide-grid {
    margin: 0 !important;
    padding-top: 0 !important;
    gap: 8px !important;
  }

  /* Pola kalimat: samakan warna kartu dengan kartu utama #242526 gradasi */
  .pattern-card,
  .expression-wide-card {
    background:
      radial-gradient(circle at 14% 16%, rgba(255,255,255,0.08), transparent 34%),
      radial-gradient(circle at 85% 84%, rgba(125,211,252,0.1), transparent 42%),
      linear-gradient(158deg, #2b2d2f 0%, #242526 56%, #1f2021 100%) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.07),
      0 8px 20px rgba(0,0,0,0.38) !important;
  }

  /* 1. KUNCI UTAMA: Potong habis padding dobel!
     (Karena sistem udah ngedorong 50px, kita cuma butuh 10px biar pas) */
  #grid,
  #grid.pattern-grid-layout,
  #grid.hub-mode {
    margin-top: 40px !important;
  }

  /* 2. Kartu Ungkapan Umum & Aktivitas */
  .expression-wide-grid {
    margin-top: 0 !important;
    padding-top: 0 !important;
    gap: 12px !important; /* Jarak antar kartunya aja biar gak nempel */
  }

  /* 3. Poster & Jarak Halaman Favorit */
  .favorit-hub-header {
    margin-top: 0 !important; 
    margin-bottom: 5px !important;
  }

  /* 4. Kartu Mini Favorit (Tetap 3 Kolom Native & Rapi) */
  .favorit-card-section {
    background: #ffffff !important; 
    border-radius: 20px !important; 
    padding: 16px 12px 20px !important; 
    margin-bottom: 20px !important; 
    overflow: hidden !important; 
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important; 
  }
  
  .favorit-cards-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 0 !important; 
    width: 100% !important;
  }

  .favorit-mini-card {
    width: 100% !important;
    height: auto !important; 
    margin: 0 !important;
  }

  .favorit-mini-inner {
    width: 100% !important;
    height: 105px !important; 
    border-radius: 14px !important; 
    padding: 10px 4px !important; 
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .favorit-mini-kanji {
    font-size: clamp(16px, 4.5vw, 22px) !important; 
    margin-bottom: 2px !important;
    line-height: 1.1 !important;
  }

  .favorit-mini-meaning {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 768px) {
    .review-wrapper {
        width: 95% !important;
        max-width: 100% !important;
        margin: 10px auto !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
        top: 0 !important;
    }
}

/* =====================================================
   FAVORIT OVERVIEW + GRAMMAR BOOKMARK
   ===================================================== */

.gr-brick {
  position: relative;
}

.gr-brick .card-action-btn.bookmark-card-btn {
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
}

.gr-brick:hover .card-action-btn.bookmark-card-btn,
.gr-brick.touch-revealed .card-action-btn.bookmark-card-btn {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.favorit-overview-screen,
.favorit-full-screen {
  display: grid;
  gap: 18px;
}

.favorit-overview-screen {
  align-content: start;
}

.favorit-detail-shell {
  grid-column: 1 / -1;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  display: grid;
  gap: 18px;
}

.favorit-detail-header,
.favorit-detail-body {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 24px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.favorit-detail-header {
  padding: 18px 20px;
}

.favorit-detail-header h2 {
  margin: 0;
}

.favorit-detail-header p {
  margin: 12px 0 0;
  color: #475569;
  font-size: 1rem;
  font-weight: 700;
}

.favorit-detail-body {
  padding: 16px 18px 18px;
}

.favorit-detail-body .favorit-cards-row,
.favorit-detail-body .favorit-grammar-grid {
  width: 100%;
}

.favorit-vocab-detail {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  display: grid;
  gap: 18px;
}

.favorit-vocab-detail__header,
.favorit-vocab-detail__body {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 24px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.favorit-vocab-detail__header {
  padding: 18px 20px;
}

.favorit-vocab-detail__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 10px;
}

.favorit-vocab-detail__title {
  margin: 0;
  min-width: 0;
}

.favorit-vocab-detail__count {
  margin: 12px 0 0;
  color: #475569;
  font-size: 1rem;
  font-weight: 700;
}

.favorit-vocab-detail__icon-btn,
.favorit-vocab-detail__icon-spacer,
.favorit-vocab-detail__subrow-spacer {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.favorit-vocab-detail__icon-btn {
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: #ffffff;
  color: #334155;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  padding: 0;
}

.favorit-vocab-detail__icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
}

.favorit-vocab-detail__icon-btn svg {
  width: 18px;
  height: 18px;
}

.favorit-vocab-detail__body {
  padding: 16px 18px 18px;
}

.favorit-vocab-detail__subrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  margin-top: 10px;
}

.favorit-vocab-detail__clear-btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 77, 109, 0.28);
  background: rgba(255, 77, 109, 0.08);
  color: #ff4d6d;
  box-shadow: 0 6px 14px rgba(255, 77, 109, 0.12);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.favorit-vocab-detail__clear-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(255, 77, 109, 0.16);
  background: rgba(255, 77, 109, 0.12);
}

.favorit-vocab-detail__clear-btn svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.favorit-vocab-detail__clear-btn span {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.favorit-vocab-detail__body .favorit-cards-row--full {
  width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 6px 0 12px !important;
}

.favorit-grammar-detail {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  display: grid;
  gap: 18px;
}

.favorit-grammar-detail__header,
.favorit-grammar-detail__body {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 24px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.favorit-grammar-detail__header {
  padding: 18px 20px;
}

.favorit-grammar-detail__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 10px;
}

.favorit-grammar-detail__title {
  margin: 0;
  min-width: 0;
}

.favorit-grammar-detail__icon-btn,
.favorit-grammar-detail__subrow-spacer {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.favorit-grammar-detail__icon-btn {
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: #ffffff;
  color: #334155;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  padding: 0;
}

.favorit-grammar-detail__icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
}

.favorit-grammar-detail__icon-btn svg {
  width: 18px;
  height: 18px;
}

.favorit-grammar-detail__subrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  margin-top: 10px;
}

.favorit-grammar-detail__clear-btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 77, 109, 0.28);
  background: rgba(255, 77, 109, 0.08);
  color: #ff4d6d;
  box-shadow: 0 6px 14px rgba(255, 77, 109, 0.12);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.favorit-grammar-detail__clear-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(255, 77, 109, 0.16);
  background: rgba(255, 77, 109, 0.12);
}

.favorit-grammar-detail__clear-btn svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.favorit-grammar-detail__clear-btn span {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.favorit-grammar-detail__body {
  padding: 16px 18px 18px;
}

.favorit-grammar-detail__body .favorit-grammar-grid--full {
  width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 6px 0 12px;
}

.favorit-grammar-detail__body .favorit-grammar-grid--full .favorit-grammar-card {
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
}

.favorit-grammar-detail__body .favorit-grammar-grid--full .favorit-grammar-card:hover {
  transform: scale(1.04) translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
  z-index: 8;
}

.favorit-grammar-detail__body .favorit-grammar-grid--full .favorit-grammar-card-inner {
  width: 100% !important;
  min-height: 130px;
  height: 130px;
  padding: 12px 8px !important;
  border: none;
  background:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,0.22), transparent 56%),
    radial-gradient(circle at 84% 86%, rgba(255,255,255,0.14), transparent 50%),
    linear-gradient(155deg, #2f3031 0%, #242526 45%, #1d1e1f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 10px 22px rgba(255,255,255,0.06),
    inset 0 -12px 18px rgba(35,8,15,0.18),
    0 14px 30px rgba(0,0,0,0.16);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.favorit-grammar-detail__body .favorit-grammar-title {
  color: #ffffff;
  text-align: center;
  width: 100%;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,0.22);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.favorit-grammar-detail__body .favorit-grammar-level {
  justify-self: center;
  align-self: center;
  background: rgba(255,255,255,0.12);
  color: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}

.favorit-detail-body .favorit-cards-row--full {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 6px 0 12px !important;
}

.favorit-section {
  display: grid;
  gap: 14px;
  overflow: hidden;
}

.favorit-overview-screen .favorit-section:first-of-type {
  margin-top: -8px;
}

.favorit-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.favorit-section-head h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #242526;
  font-weight: 800;
}

.favorit-overview-screen .favorit-section--vocab .favorit-section-head h3,
.favorit-overview-screen .favorit-section--grammar .favorit-section-head h3 {
  color: #242526 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.favorit-section-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 0.95rem;
}

.favorit-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.favorit-ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: #ffffff;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.favorit-section-footer {
  display: flex;
  justify-content: flex-end;
}

.favorit-see-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border: none;
  background: transparent;
  color: #334155;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}

.favorit-see-more-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.08);
  color: #2563eb;
}

.favorit-see-more-icon svg {
  width: 14px;
  height: 14px;
}

.favorit-empty--section {
  padding: 26px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(248, 250, 252, 0.88), rgba(255, 255, 255, 0.98));
  border: 1px dashed rgba(148, 163, 184, 0.4);
}

.favorit-grammar-grid {
  display: grid;
  gap: 10px;
}

.favorit-grammar-card {
  cursor: pointer;
  border-radius: 16px;
  position: relative;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.favorit-grammar-card:hover {
  transform: translateY(-2px);
}

.favorit-grammar-card-inner {
  position: relative;
  min-height: 78px;
  padding: 14px 16px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(160deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
  box-shadow: 0 10px 24px -20px rgba(15, 23, 42, 0.5);
  display: grid;
  align-content: center;
  gap: 10px;
}

.favorit-grammar-title {
  display: block;
  min-width: 0;
  max-width: 100%;
  font-size: 1rem;
  font-weight: 800;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.favorit-grammar-level {
  justify-self: start;
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(34, 139, 34, 0.12);
  color: #228b22;
  font-size: 0.75rem;
  font-weight: 800;
}

.favorit-grammar-remove {
  opacity: 0;
}

.favorit-grammar-card:hover .favorit-grammar-remove {
  opacity: 1;
}

.favorit-grammar-grid--full .favorit-grammar-card-inner {
  padding-right: 40px;
}

.favorit-grammar-grid--preview .favorit-grammar-card-inner {
  min-height: 74px;
}

.favorit-grammar-grid--preview .favorit-grammar-card {
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
}

.favorit-grammar-grid--preview .favorit-grammar-card:hover {
  transform: scale(1.04) translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
  z-index: 8;
}

.favorit-grammar-grid--preview .favorit-grammar-card-inner {
  width: 100% !important;
  min-height: 130px;
  height: 130px;
  padding: 12px 8px !important;
  border: none;
  background:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,0.22), transparent 56%),
    radial-gradient(circle at 84% 86%, rgba(255,255,255,0.14), transparent 50%),
    linear-gradient(155deg, #2f3031 0%, #242526 45%, #1d1e1f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 10px 22px rgba(255,255,255,0.06),
    inset 0 -12px 18px rgba(35,8,15,0.18),
    0 14px 30px rgba(0,0,0,0.16);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

.favorit-grammar-grid--preview .favorit-grammar-title {
  color: #ffffff;
  text-align: center;
  width: 100%;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,0.22);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.favorit-grammar-grid--preview .favorit-grammar-level {
  justify-self: center;
  align-self: center;
  background: rgba(255,255,255,0.12);
  color: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}

.favorit-cards-row--preview .favorit-mini-remove,
.favorit-grammar-grid--preview .favorit-grammar-remove {
  display: none !important;
}

@media (min-width: 769px) {
  .favorit-cards-row--preview {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .favorit-grammar-grid--preview {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .favorit-grammar-grid--full {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .favorit-grammar-grid--preview .favorit-grammar-card-inner {
    min-height: 130px;
    height: 130px;
  }
}

@media screen and (orientation: landscape) and (max-height: 520px) {
  .favorit-cards-row--preview {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .favorit-detail-body .favorit-cards-row--full {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .favorit-vocab-detail__body .favorit-cards-row--full {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .favorit-grammar-detail__body .favorit-grammar-grid--full {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .favorit-grammar-grid--preview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .favorit-grammar-grid--full {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .favorit-grammar-grid--preview .favorit-grammar-card-inner {
    min-height: 105px;
    height: 105px;
    padding: 10px 6px !important;
  }

  .favorit-grammar-grid--preview .favorit-grammar-title {
    font-size: 0.82rem;
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  .favorit-detail-header,
  .favorit-detail-body {
    border-radius: 20px;
  }

  .favorit-vocab-detail__header,
  .favorit-vocab-detail__body {
    border-radius: 20px;
  }

  .favorit-grammar-detail__header,
  .favorit-grammar-detail__body {
    border-radius: 20px;
  }

  .favorit-detail-header {
    padding: 16px 14px;
  }

  .favorit-vocab-detail__header {
    padding: 16px 14px;
  }

  .favorit-grammar-detail__header {
    padding: 16px 14px;
  }

  .favorit-detail-header p {
    font-size: 0.88rem;
  }

  .favorit-vocab-detail__count {
    font-size: 0.88rem;
  }

  .favorit-detail-body {
    padding: 14px 12px 16px;
  }

  .favorit-vocab-detail__body {
    padding: 14px 12px 16px;
  }

  .favorit-grammar-detail__body {
    padding: 14px 12px 16px;
  }

  .favorit-section {
    gap: 12px;
  }

  .favorit-overview-screen .favorit-section:first-of-type {
    margin-top: -6px;
  }

  .favorit-cards-row--preview {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .favorit-detail-body .favorit-cards-row--full {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .favorit-vocab-detail__body .favorit-cards-row--full {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .favorit-grammar-detail__body .favorit-grammar-grid--full {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .favorit-grammar-detail__body .favorit-grammar-grid--full .favorit-grammar-card-inner {
    min-height: 105px;
    height: 105px;
    padding: 10px 6px !important;
  }

  .favorit-grammar-detail__body .favorit-grammar-title {
    font-size: 0.82rem;
  }

  .favorit-grammar-grid--preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .favorit-grammar-grid--full {
    grid-template-columns: 1fr;
  }

  .favorit-grammar-grid--preview .favorit-grammar-card-inner {
    min-height: 105px;
    height: 105px;
    padding: 10px 6px !important;
  }

  .favorit-grammar-grid--preview .favorit-grammar-title {
    font-size: 0.82rem;
  }

  .favorit-vocab-detail__top {
    column-gap: 10px;
    row-gap: 8px;
  }

  .favorit-grammar-detail__top {
    column-gap: 10px;
    row-gap: 8px;
  }

  .favorit-vocab-detail__icon-btn,
  .favorit-vocab-detail__icon-spacer,
  .favorit-vocab-detail__subrow-spacer {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .favorit-vocab-detail__icon-btn svg {
    width: 16px;
    height: 16px;
  }

  .favorit-grammar-detail__icon-btn,
  .favorit-grammar-detail__subrow-spacer {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .favorit-grammar-detail__icon-btn svg {
    width: 16px;
    height: 16px;
  }

  .favorit-vocab-detail__subrow {
    column-gap: 10px;
    margin-top: 8px;
  }

  .favorit-grammar-detail__subrow {
    column-gap: 10px;
    margin-top: 8px;
  }

  .favorit-vocab-detail__clear-btn {
    min-height: 36px;
    padding: 0 12px;
    gap: 7px;
  }

  .favorit-vocab-detail__clear-btn svg {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  .favorit-vocab-detail__clear-btn span {
    font-size: 0.76rem;
  }

  .favorit-grammar-detail__clear-btn {
    min-height: 36px;
    padding: 0 12px;
    gap: 7px;
  }

  .favorit-grammar-detail__clear-btn svg {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  .favorit-grammar-detail__clear-btn span {
    font-size: 0.76rem;
  }

  .favorit-section-head h3 {
    font-size: 1rem;
  }

  .favorit-section-head p,
  .favorit-see-more-btn {
    font-size: 0.82rem;
  }

  .favorit-grammar-card-inner {
    min-height: 72px;
    padding: 12px 14px;
  }

  .favorit-grammar-title {
    font-size: 0.94rem;
  }

  .favorit-head-actions {
    width: 100%;
  }
}

/* =========================================
   📱 MOBILE LANDSCAPE — Native Desktop-Feel Layout
   Target: perangkat sentuh yang diputar horizontal
   (max-height: 520px = identifikasi paling andal utk HP landscape)
   JANGAN SENTUH RULES DI LUAR BLOK INI
========================================= */
@media screen and (orientation: landscape) and (max-height: 520px) {

  /* ── 0. Override CSS variables khusus landscape ── */
  :root {
    --topbar-height: 44px !important;
    --body-sidebar-width: 200px !important;
    --sidebar-width: 200px !important;
    --bottom-nav-height: 0px !important;
  }

  /* ── 1. Topbar: ramping & rapat ── */
  .topbar {
    height: var(--topbar-height) !important;
    min-height: var(--topbar-height) !important;
    padding: 0 10px !important;
    gap: 8px !important;
  }

  /* Hamburger disembunyikan (sidebar sudah tampil permanen) */
  #hamburger {
    display: none !important;
  }

  .header-identity img {
    width: 28px !important;
    height: 28px !important;
  }

  #searchBtn,
  .search-icon-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
  }

  #searchBtn svg,
  .search-icon-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  #resultInfo {
    height: 26px !important;
    font-size: 11px !important;
    padding: 0 10px !important;
    max-width: calc(100vw - 300px) !important;
    display: inline-flex !important;
  }

  /* ── 2. App body shell: desktop split layout ── */
  body {
    overflow: hidden !important;
  }

  .app-body-shell {
    position: fixed !important;
    display: flex !important;
    top: var(--topbar-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin-top: 0 !important;
    height: auto !important;
    min-height: unset !important;
    overflow: hidden !important;
  }

  /* ── 3. Sidebar: permanen di kiri seperti desktop ── */
  #overlay {
    display: none !important;
  }

  #sidebar {
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    transform: none !important;
    width: var(--body-sidebar-width) !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    z-index: 20 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px 8px 16px !important;
    border-right: 1px solid rgba(15, 23, 42, 0.14) !important;
    background: #D3D3D3 !important;
    box-shadow: none !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  #sidebar::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  /* Sidebar nav items: compact */
  .duo-nav-item,
  .duo-nav-subitem,
  .duo-nav-support {
    padding: 0.46rem 0.7rem !important;
    font-size: 0.8rem !important;
    background: #242526 !important;
    color: #ffffff !important;
  }

  .duo-nav-item svg,
  .duo-nav-subitem svg,
  .duo-nav-support svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
  }

  .duo-nav-item .duo-nav-icon,
  .duo-nav-subitem .duo-nav-icon,
  .duo-nav-support .duo-nav-icon {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
  }

  .sidebar-section-title {
    font-size: 0.68rem !important;
    padding: 3px 10px !important;
    margin: 1px 0 4px !important;
    background: #242526 !important;
    color: #f5f6f7 !important;
  }

  .sidebar-duo-nav {
    gap: 5px !important;
  }

  .sidebar-head {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    margin: 0 !important;
  }

  #logged-in-view {
    padding: 5px 8px !important;
    padding-right: 40px !important;
    min-height: 40px !important;
    border-radius: 12px !important;
    background: #242526 !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    /* ── version tag nempel di bawah border, tetap di atas garis MENU ── */
    position: relative !important;
    overflow: visible !important;
    margin-bottom: -10px !important;
  }

  #logged-in-view .user-name {
    font-size: 0.75rem !important;
    color: #e8eaed !important;
  }

  /* version tag: di dalam border profil, di bawah username */
  #logged-in-view .profile-version {
    position: static !important;
    font-size: 0.58rem !important;
    color: rgba(232, 234, 237, 0.50) !important;
    background: transparent !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  .logout-floating-btn {
    width: 26px !important;
    height: 26px !important;
    right: 8px !important;
    border-radius: 7px !important;
  }

  .sidebar-language-switch {
    padding: 5px 10px !important;
    font-size: 0.78rem !important;
    border-radius: 999px !important;
    width: fit-content;
  }

  #sidebar-greeting,
  #sidebar-greeting .greet-jp,
  #sidebar-greeting .greet-user {
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── 4. Content panel: scrollable kanan ── */
  .content-panel {
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-left: 1px solid rgba(148, 21, 78, 0.18) !important;
    display: block !important;
  }

  /* ── 5. Grid utama: 3 kolom compact ── */
  #grid {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding-top: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 10px !important;
    overflow: visible !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .card-image {
    height: 135px !important;
  }

  /* ── 6. Bottom nav: hilangkan (sidebar sudah tampil) ── */
  .bottom-nav {
    display: none !important;
  }

  .bottom-nav-hub {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: auto !important;
  }

  /* ── 7. Pagination: tampil & tidak tenggelam ── */
  .pagination-container {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 6px 0 8px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.3) !important;
  }

  /* ── 8. Halaman Latihan (practice hub) ── */
  #grid.hub-mode {
    padding: 10px !important;
  }

  .menu-hub-header {
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
  }

  .menu-hub-header h2 {
    font-size: 1rem !important;
  }

  .menu-hub-header p {
    font-size: 0.8rem !important;
  }

  .menu-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .menu-panel-card {
    padding: 10px !important;
    min-height: 70px !important;
    gap: 8px !important;
  }

  .menu-panel-card svg {
    width: 32px !important;
    height: 32px !important;
  }

  .menu-panel-card strong {
    font-size: 0.86rem !important;
  }

  .menu-panel-card span {
    font-size: 0.72rem !important;
  }

  .hub-section-capsule {
    font-size: 0.78rem !important;
    padding: 5px 10px !important;
  }

  .hub-level-btn {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
  }

  .hub-levels {
    gap: 6px !important;
  }

  /* ── 9. Flashcard / Review mode ── */
  #grid.review-active-mode {
    padding: 10px !important;
    min-height: auto !important;
    align-items: flex-start !important;
  }

  .review-wrapper {
    height: calc(100vh - var(--topbar-height) - 16px) !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ── 10. Quiz active mode ── */
  #grid.quiz-active-mode {
    padding: 10px !important;
    overflow-y: auto !important;
  }

  .quiz-wrapper-pro {
    max-height: calc(100vh - var(--topbar-height) - 20px) !important;
    padding: 12px !important;
    gap: 10px !important;
  }

  .quiz-qcard-pro {
    min-height: 80px !important;
    padding: 10px !important;
  }

  .quiz-question-main {
    font-size: clamp(1.2rem, 3.5vw, 1.8rem) !important;
  }

  .quiz-opt-btn-pro {
    min-height: 38px !important;
    font-size: 0.88rem !important;
    padding: 6px 10px !important;
  }

  .quiz-options-pro {
    gap: 8px !important;
  }

  /* ── 12. Favorit page ── */
  .favorit-cards-row {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .favorit-mini-inner {
    height: 88px !important;
    padding: 8px 5px !important;
  }

  .favorit-mini-kanji {
    font-size: clamp(14px, 3vw, 22px) !important;
  }

  /* ── 13. Footer: sembunyikan ── */
  .app-footer {
    display: none !important;
  }

  /* ── 14. Dashboard / History ── */
  body.history-mode #grid {
    padding: 12px !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
  }

  .dashboard-shell {
    width: 100% !important;
    border-radius: 14px !important;
  }

  .dashboard-cover {
    min-height: 80px !important;
  }

  /* ── 15. Expression / Aktivitas grid ── */
  .expression-wide-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ── 16. Sidebar body-mode #grid (landscape fix) ── */
  #grid,
  #grid.pattern-grid-layout,
  #grid.hub-mode {
    margin-top: 0 !important;
  }

  /* ── 17. Training session (quiz full-page) landscape ── */
  body.training-session .topbar {
    height: var(--topbar-height) !important;
    min-height: var(--topbar-height) !important;
  }

  body.training-session .content-panel {
    height: calc(100vh - var(--topbar-height)) !important;
    overflow: auto !important;
  }
}

/* =========================================
   📱 LOGIN POPUP — Compact Mode untuk Mobile Landscape
========================================= */
@media screen and (orientation: landscape) and (max-height: 520px) {

  .auth-gate {
    padding: 6px 10px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .auth-gate-card {
    width: min(680px, 100%) !important;
    border-radius: 16px !important;
    padding: 14px 20px !important;
    display: grid !important;
    grid-template-columns: 60px 1fr !important;
    grid-template-rows: auto !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
    text-align: left !important;
    align-items: start !important;
    max-height: calc(100vh - 16px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.35) !important;
  }

  /* Logo kolom kiri — span semua baris */
  .auth-gate-logo {
    grid-column: 1 !important;
    grid-row: 1 / 7 !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    align-self: center !important;
  }

  /* Semua child lain masuk kolom kanan */
  .auth-gate-badge,
  .auth-gate-card h1,
  .auth-gate-subtext,
  .auth-gate-google-btn,
  .auth-gate-guest-btn,
  .auth-gate-email-btn,
  .email-auth-form {
    grid-column: 2 !important;
  }

  .auth-gate-badge {
    margin: 0 0 4px !important;
    font-size: 0.68rem !important;
    padding: 3px 10px !important;
  }

  .auth-gate-card h1 {
    margin: 2px 0 4px !important;
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  .auth-gate-subtext {
    margin: 0 0 8px !important;
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
  }

  .auth-gate-google-btn {
    padding: 8px 12px !important;
    font-size: 0.82rem !important;
    gap: 8px !important;
  }

  .auth-gate-google-btn img {
    width: 15px !important;
    height: 15px !important;
  }

  .auth-gate-guest-btn,
  .guest-btn,
  .auth-gate-email-btn {
    margin-top: 5px !important;
    padding: 7px 12px !important;
    font-size: 0.8rem !important;
  }

  .email-auth-form {
    gap: 5px !important;
    margin-top: 5px !important;
  }

  .email-auth-form input {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
    border-radius: 10px !important;
  }

  .email-auth-form button[type="submit"] {
    padding: 7px 12px !important;
    font-size: 0.8rem !important;
  }
}

/* =========================================
   📱 MOBILE LANDSCAPE — BUG FIX ROUND 2
   Semua perbaikan dari feedback screenshot:
   kanji acak, resultInfo, profil, latihan, quiz popup,
   expand kanji, rekomendasi, poster huruf, foto profil
========================================= */
@media screen and (orientation: landscape) and (max-height: 520px) {

  /* ══ 1. KANJI GRID — pastikan seragam & tidak berantakan ══ */
  #grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-content: start !important;
  }

  .card-image {
    height: 130px !important;
    min-height: 0 !important;
  }

  .card-overlay .kanji {
    font-size: clamp(1.6rem, 5vw, 2.4rem) !important;
    margin-bottom: 6px !important;
    margin-top: -4px !important;
  }

  .card-overlay .kana {
    font-size: 0.7rem !important;
  }

  .card-overlay .romaji {
    font-size: 0.65rem !important;
  }

  .card-overlay .meaning {
    font-size: 0.75rem !important;
  }

  /* ══ 2. RESULT INFO — center vertikal dalam topbar ══ */
  #resultInfo {
    align-self: center !important;
    margin: 0 6px !important;
    height: auto !important;
    line-height: 1 !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    max-width: calc(100vw - 290px) !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ══ 3. PROFIL SIDEBAR — border tidak terpeped logout btn ══ */
  #logged-in-view {
    padding: 6px 8px 6px 8px !important;
    padding-right: 46px !important;
    min-height: 44px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    position: relative !important;
  }

  .logout-floating-btn {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 999px !important;
    z-index: 5 !important;
  }

  /* ══ 4. POPUP NILAI AKHIRI LATIHAN — compact & bisa diklik ══ */
  /* Result/score popup setelah quiz selesai */
  body.training-session {
    touch-action: auto !important; /* izinkan klik di result popup */
  }

  /* Target semua fixed overlay/modal yang mungkin muncul setelah latihan */
  .filter-modal,
  .kanji-modal,
  #kanjiModal,
  [class*="result"],
  [class*="score"],
  [class*="finish"],
  [id*="result"],
  [id*="score"],
  [id*="finish"] {
    z-index: 99999 !important;
  }

  /* Pastikan semua modal/overlay full-screen bisa diklik */
  .filter-modal.active,
  .kanji-modal.active,
  #kanjiModal.active {
    display: flex !important;
    pointer-events: auto !important;
    touch-action: auto !important;
  }

  /* Popup dengan backdrop gelap (termasuk quiz result) */
  [style*="position: fixed"][style*="inset"],
  [style*="position:fixed"][style*="inset"] {
    pointer-events: auto !important;
    touch-action: auto !important;
    z-index: 99999 !important;
  }

  /* ══ 7. EXPAND KANJI MODAL — compact & tidak oversized ══ */
  .kanji-modal,
  #kanjiModal {
    padding: 8px !important;
  }

  .kanji-modal-content {
    width: min(90vw, 420px) !important;
    max-width: 90vw !important;
    max-height: calc(100vh - 20px) !important;
    border-radius: 16px !important;
    overflow-y: auto !important;
  }

  #kanjiModal .kanji-modal-content {
    padding: 10px !important;
  }

  .card-image.expanded {
    min-height: 140px !important;
    padding: 16px !important;
  }

  .expanded-card .kanji {
    font-size: clamp(56px, 12vw, 90px) !important;
    line-height: 0.9 !important;
  }

  .expanded-card .kana {
    font-size: clamp(14px, 2.5vw, 18px) !important;
  }

  .expanded-card .romaji {
    font-size: clamp(12px, 2vw, 15px) !important;
  }

  .expanded-card .meaning {
    font-size: clamp(13px, 2.2vw, 16px) !important;
  }

  /* ══ 8. REKOMENDASI KANJI — tidak tenggelam ══ */
  #kanjiModal #recommendationRow,
  #kanjiModal .recommendation-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 8px !important;
    gap: 8px !important;
    min-height: 72px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .recommendation-item {
    min-width: 70px !important;
    padding: 6px 6px 28px !important;
    border-radius: 10px !important;
  }

  .rec-kanji {
    font-size: 20px !important;
  }

  .rec-kana {
    font-size: 10px !important;
  }

  /* ══ 9. POSTER HURUF — tidak offside ══ */
  .letter-poster {
    margin: 8px 8px 12px !important;
    padding: 12px 10px 14px !important;
    border-radius: 14px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .letter-poster h2 {
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
    text-align: center !important;
  }

  .letter-poster-body {
    overflow-x: auto !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .letter-grid-desktop {
    gap: 5px 6px !important;
  }

  .letter-grid-mobile {
    gap: 5px !important;
  }

  .letter-cell,
  .letter-label,
  .letter-empty {
    height: 32px !important;
    border-radius: 7px !important;
    font-size: 0.9rem !important;
    min-width: 0 !important;
  }

  .letter-cell {
    font-size: 1rem !important;
  }

  .letter-label {
    font-size: 0.7rem !important;
  }

  .letter-row {
    gap: 5px !important;
    grid-template-columns: 50px repeat(calc(var(--cols, 6) - 1), 1fr) !important;
  }

  /* ══ 10. FOTO PROFIL USER — tidak nabrak topbar ══ */
  .dashboard-avatar-wrap {
    transform: translateY(-30px) !important;
    margin-bottom: -20px !important;
    width: 72px !important;
  }

  .dashboard-avatar-frame {
    width: 72px !important;
    height: 72px !important;
    border: 4px solid #fff !important;
  }

  .dashboard-cover {
    min-height: 125px !important;
  }

  .dashboard-profile-card {
    padding: 0 12px 12px !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dashboard-profile-card h2 {
    font-size: 1.5rem !important;
    margin-top: 9px !important;
  }

  .dashboard-email {
    font-size: 0.72rem !important;
  }

  .dashboard-settings-btn {
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
  }

  body.history-mode #grid {
    padding: 8px !important;
    overflow-y: auto !important;
  }

  .dashboard-shell {
    border-radius: 12px !important;
    width: 100% !important;
  }

}

/* =========================================
   📱 MOBILE LANDSCAPE — FIX ROUND 3
   1. Quiz result popup → lebih kecil, fit center, no scroll, blokir backdrop
   2. Expand kanji → font kecil, tidak offside vertikal
   3. Recommendation → 2 per view, scroll horizontal invisible
========================================= */
@media screen and (orientation: landscape) and (max-height: 520px) {

  /* ══ A. QUIZ RESULT POPUP ══
     Blokir klik ke backdrop, compact card fit layar landscape. */

  body.training-session [class*="result"][style*="position"],
  body.training-session [class*="score"][style*="position"],
  body.training-session [id*="result"][style*="position"],
  body.training-session [id*="score"][style*="position"] {
    pointer-events: auto !important;
    touch-action: auto !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, 0.82) !important;
  }

  body.training-session [class*="result"] > [style*="background"],
  body.training-session [class*="score"] > [style*="background"],
  body.training-session [id*="result"] > [style*="background"],
  body.training-session [id*="score"] > [style*="background"] {
    max-width: 280px !important;
    width: 84vw !important;
    max-height: calc(100vh - 20px) !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  body.training-session [class*="result"] > [style*="background"] h1,
  body.training-session [class*="result"] > [style*="background"] h2,
  body.training-session [class*="result"] > [style*="background"] h3,
  body.training-session [class*="score"] > [style*="background"] h1,
  body.training-session [class*="score"] > [style*="background"] h2 {
    font-size: 0.95rem !important;
    margin: 0 0 4px !important;
    line-height: 1.2 !important;
  }

  body.training-session [class*="result"] > [style*="background"] p,
  body.training-session [class*="score"] > [style*="background"] p {
    font-size: 0.74rem !important;
    margin: 3px 0 !important;
    line-height: 1.3 !important;
  }

  body.training-session [class*="result"] > [style*="background"] button,
  body.training-session [class*="score"] > [style*="background"] button,
  body.training-session [id*="result"] > [style*="background"] button {
    padding: 7px 12px !important;
    font-size: 0.78rem !important;
    margin-top: 5px !important;
  }

  /* ══ B. EXPAND KANJI MODAL — teks tidak offside vertikal ══ */

  #kanjiModal .card-image.expanded,
  .kanji-modal .card-image.expanded {
    min-height: 0 !important;
    max-height: 148px !important;
    height: 142px !important;
    padding: 10px 14px !important;
    overflow: hidden !important;
  }

  #kanjiModal .expanded-card .kanji,
  #kanjiModal #expandedCard .kanji,
  #expandedCard .kanji {
    font-size: clamp(32px, 7vw, 52px) !important;
    line-height: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    letter-spacing: 0 !important;
  }

  #kanjiModal .expanded-card .kana,
  #kanjiModal #expandedCard .kana {
    font-size: 12px !important;
    margin: 0 !important;
  }

  #kanjiModal .expanded-card .romaji,
  #kanjiModal #expandedCard .romaji {
    font-size: 11px !important;
    margin: 1px 0 !important;
  }

  #kanjiModal .expanded-card .meaning,
  #kanjiModal #expandedCard .meaning {
    font-size: 12px !important;
    margin: 2px 0 0 !important;
  }

  #kanjiModal .kanji-modal-content {
    max-height: calc(100vh - 12px) !important;
    overflow-y: auto !important;
    width: min(86vw, 370px) !important;
    padding: 8px !important;
  }

  /* ══ C. RECOMMENDATION ROW ══
     Semua item tetap tampil. Scroll horizontal invisible.
     Setiap item lebar 50%-3px = selalu tepat 2 per viewport.
     scroll-snap berhenti per pasangan 2 item. */

  #kanjiModal #recommendationRow,
  #kanjiModal .recommendation-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  #kanjiModal #recommendationRow::-webkit-scrollbar,
  #kanjiModal .recommendation-row::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  #kanjiModal #recommendationRow .recommendation-item,
  #kanjiModal .recommendation-row .recommendation-item {
    flex: 0 0 calc(50% - 3px) !important;
    min-width: calc(50% - 3px) !important;
    max-width: calc(50% - 3px) !important;
    scroll-snap-align: start !important;
    padding: 8px 8px 30px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    display: grid !important;
  }

  #kanjiModal .rec-kanji {
    font-size: 20px !important;
  }

  #kanjiModal .rec-kana {
    font-size: 10px !important;
  }

  #kanjiModal .rec-audio-btn {
    width: 22px !important;
    height: 22px !important;
    right: 6px !important;
    bottom: 5px !important;
  }

  #kanjiModal h4 {
    font-size: 0.76rem !important;
    margin: 4px 0 4px !important;
  }

}

/* =========================================
   🏆 QUIZ RESULT POPUP — DEDICATED DESIGN
   Target: #kanjiModal.quiz-result-active
   Berlaku: mobile portrait + landscape
   TIDAK menyentuh desktop (min-width: 769px)
========================================= */

/* ── Backdrop ── */
#kanjiModal.quiz-result-active {
  background: rgba(3, 7, 18, 0.92) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* ── Modal container (card putih) → ganti jadi card gelap custom ── */
#kanjiModal.quiz-result-active .kanji-modal-content {
  background: linear-gradient(145deg, #1e1b4b 0%, #1a1a2e 60%, #0f172a 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* ── Sembunyikan close button di quiz result ── */
#kanjiModal.quiz-result-active .modal-close-btn,
#kanjiModal.quiz-result-active [class*="modal-close"] {
  display: none !important;
}

/* ── Hapus padding expandedCard bawaan ── */
#kanjiModal.quiz-result-active #expandedCard {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: 100% !important;
  display: block !important;
}

#kanjiModal.quiz-result-active .info-poster {
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  display: block !important;
}

/* ════════════════════════════════════════
   LAYOUT: .qr-wrap — wrapper utama
   Portrait  → kolom vertikal
   Landscape → baris horizontal
════════════════════════════════════════ */
#kanjiModal.quiz-result-active .qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* ── Kolom kiri: skor panel ── */
#kanjiModal.quiz-result-active .qr-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 16px;
  text-align: center;
  flex-shrink: 0;
}

/* Status label (GAGAL ❌ / LULUS ✅) */
#kanjiModal.quiz-result-active .qr-status {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Angka skor besar */
#kanjiModal.quiz-result-active .qr-score {
  font-size: 4rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  margin: 4px 0;
}

#kanjiModal.quiz-result-active .qr-denom {
  font-size: 1.2rem;
  font-weight: 500;
  color: #6b7280;
}

/* Benar/Total soal */
#kanjiModal.quiz-result-active .qr-stats {
  font-size: 0.78rem;
  color: #9ca3af;
  margin-top: 4px;
}

#kanjiModal.quiz-result-active .qr-stats strong {
  color: #4ade80;
  font-weight: 700;
}

/* ── Divider antara kiri & kanan ── */
#kanjiModal.quiz-result-active .qr-left::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: rgba(255,255,255,0.08);
  margin-top: 12px;
  border-radius: 999px;
}

/* ── Kolom kanan: kutipan + tombol ── */
#kanjiModal.quiz-result-active .qr-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 20px 24px;
  flex: 1;
  gap: 12px;
}

/* Quote motivasi */
#kanjiModal.quiz-result-active .qr-msg {
  font-size: 0.82rem;
  color: #d1d5db;
  line-height: 1.5;
  text-align: center;
  margin: 0;
}

/* Tombol aksi */
#kanjiModal.quiz-result-active .qr-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#kanjiModal.quiz-result-active .qr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 12px 20px;
  width: 100%;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

#kanjiModal.quiz-result-active .qr-btn:active {
  opacity: 0.8;
  transform: scale(0.97);
}

#kanjiModal.quiz-result-active .qr-btn--review {
  background: rgba(255,255,255,0.1);
  color: #f3f4f6;
  border: 1px solid rgba(255,255,255,0.15);
}

#kanjiModal.quiz-result-active .qr-btn--menu {
  background: linear-gradient(135deg, #ff4d6d, #e11d48);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(255, 77, 109, 0.4);
}

/* ════════════════════════════════
   MOBILE PORTRAIT — ukuran card
════════════════════════════════ */
@media (max-width: 768px) {
  #kanjiModal.quiz-result-active .kanji-modal-content {
    width: min(88vw, 340px) !important;
    max-height: 90dvh !important;
    border-radius: 20px !important;
    overflow-y: auto !important;
  }

  #kanjiModal.quiz-result-active .qr-score {
    font-size: 3.6rem;
  }
}

/* ════════════════════════════════
   MOBILE LANDSCAPE — layout horizontal
   Left: status + skor | Right: quote + tombol
════════════════════════════════ */
@media screen and (orientation: landscape) and (max-height: 520px) {

  #kanjiModal.quiz-result-active .kanji-modal-content {
    width: min(90vw, 580px) !important;
    max-width: 90vw !important;
    max-height: calc(100vh - 16px) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  /* Ubah wrap jadi baris horizontal */
  #kanjiModal.quiz-result-active .qr-wrap {
    flex-direction: row !important;
    align-items: stretch !important;
  }

  /* Kiri: skor panel — lebar fixed, ada border kanan */
  #kanjiModal.quiz-result-active .qr-left {
    flex: 0 0 180px !important;
    width: 180px !important;
    padding: 16px 16px 16px !important;
    border-right: 1px solid rgba(255,255,255,0.07) !important;
    background: rgba(0,0,0,0.15) !important;
    justify-content: center !important;
  }

  /* Hapus divider bawah (pakai border kanan) */
  #kanjiModal.quiz-result-active .qr-left::after {
    display: none !important;
  }

  /* Skor lebih kecil biar fit */
  #kanjiModal.quiz-result-active .qr-score {
    font-size: 3rem !important;
  }

  #kanjiModal.quiz-result-active .qr-status {
    font-size: 0.88rem !important;
  }

  #kanjiModal.quiz-result-active .qr-stats {
    font-size: 0.72rem !important;
  }

  /* Kanan: quote + tombol — isi sisa */
  #kanjiModal.quiz-result-active .qr-right {
    flex: 1 !important;
    padding: 14px 18px !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  #kanjiModal.quiz-result-active .qr-msg {
    font-size: 0.76rem !important;
    text-align: left !important;
  }

  /* Tombol berjejer horizontal */
  #kanjiModal.quiz-result-active .qr-actions {
    flex-direction: row !important;
    gap: 8px !important;
  }

  #kanjiModal.quiz-result-active .qr-btn {
    font-size: 0.76rem !important;
    padding: 9px 14px !important;
    flex: 1 !important;
    width: auto !important;
  }
}

/* ── QUIZ RESULT: blokir klik backdrop & hide close btn ── */
#kanjiModal.quiz-result-active #modalBackdrop {
  pointer-events: none !important;
  cursor: default !important;
}

#kanjiModal.quiz-result-active .kanji-modal-content {
  pointer-events: auto !important;
}

/* =====================================================
   📱 MOBILE PORTRAIT — FIX KONTEN TENGGELAM
   Target: semua halaman di layar HP vertikal
   Penyebab: padding-bottom tidak cukup memberi ruang
   dari bottom nav yang fixed (62px + safe-area)
   JANGAN SENTUH DESKTOP (sudah dijaga oleh max-width)
===================================================== */
@media (max-width: 767px) {

  /* ── 1. KANJI GRID UTAMA + SEMUA MODE GRID ──
     Semua variant #grid butuh padding bawah agar
     kartu + pagination tidak tertutup bottom nav */
  #grid,
  #grid.pattern-grid-layout,
  #grid.hub-mode,
  #grid.expression-grid,
  #grid.activity-grid {
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 24px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 0 0 auto !important; /* jangan expand, biarkan pagination tampil */
  }

  /* ── 2. PAGINATION ──
     Harus muncul di atas bottom nav */
  .pagination-container {
    position: relative !important;
    z-index: 10 !important;
    padding-bottom: 0 !important;
    margin-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 10px) !important;
  }

  /* ── 3. CONTENT PANEL (umum) ──
     Wrapper scrollable semua halaman non-quiz */
  body:not(.training-session):not(.review-mode-active) .content-panel {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 20px) !important;
  }

  /* ── 4. MODE LATIHAN (QUIZ) — dipindah ke blok portrait-only di bawah ── */

  /* ── 5. MODE TINJAU LATIHAN (REVIEW) ──
     Tinggi wrapper pas dengan layar minus topbar */
  .review-wrapper {
    height: calc(100dvh - var(--topbar-height) - 8px) !important;
    max-height: calc(100dvh - var(--topbar-height) - 8px) !important;
    overflow: hidden !important;
  }

  /* Area scroll dalam review */
  .review-content {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 20px !important;
  }

  /* ── 6. HISTORY / DASBOR ──
     Riwayat latihan butuh ruang bawah */
  body.history-mode #grid,
  body.dashboard-mode #grid {
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 32px) !important;
    overflow-y: auto !important;
  }

  /* ── 7. FAVORIT / BELAJAR ──
     Grid kosakata kategori */
  body.favorit-mode #grid,
  body.belajar-mode #grid {
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 24px) !important;
  }

  /* ── 8. HUB MENU & LATIHAN (bottom nav hub) ──
     Panel hub juga perlu clearance */
  .bottom-nav-hub {
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 16px) !important;
  }

}

/* =====================================================
   🖥️ TABLET + DESKTOP — FIX KONTEN TENGGELAM DI BAWAH
   Layout sidebar aktif (min-width: 768px).
   content-panel sudah overflow-y:auto, tapi #grid dan
   konten di dalamnya kekurangan padding-bottom sehingga
   elemen terakhir terpotong oleh parent overflow:hidden.
===================================================== */
@media (min-width: 768px) {

  /* ── 1. GRID UTAMA — padding bawah cukup ── */
  body:not(.training-session):not(.review-mode-active) #grid {
    padding-bottom: 40px !important;
  }

  /* ── 2. PAGINATION — selalu muncul di bawah konten ── */
  body:not(.training-session):not(.review-mode-active) .pagination-container {
    padding-bottom: 24px !important;
    flex-shrink: 0 !important;
  }

  /* ── 3. HUB BELAJAR / MENU / LATIHAN ──
     Konten hub di dalam content-panel perlu clearance bawah */
  .bottom-nav-hub,
  .menu-hub-container,
  .hub-screen--practice,
  .hub-screen--menu {
    padding-bottom: 40px !important;
    box-sizing: border-box !important;
  }

  /* ── 4. CONTENT-PANEL — pastikan bisa scroll sampai bawah ── */
  body:not(.training-session):not(.review-mode-active) .content-panel {
    overflow-y: auto !important;
    /* hapus contain agar padding-bottom child terbaca */
    contain: none !important;
  }

  /* ── 5. GRID DALAM HUB MODE ── */
  #grid.hub-mode,
  #grid.expression-grid,
  #grid.activity-grid,
  #grid.pattern-grid-layout,

  /* ── 6. HISTORY / DASBOR ── */
  body.history-mode .content-panel,
  body.dashboard-mode .content-panel {
    overflow-y: auto !important;
  }

  body.history-mode #grid {
    padding-bottom: 40px !important;
  }

}

/* =====================================================
   🔍 FILTER MODAL — MOBILE PORTRAIT TOP-SHEET
   Berlaku: max-width 767px + portrait
   Slide turun dari bawah topbar
===================================================== */
@media (max-width: 767px) and (orientation: portrait) {

  .filter-modal {
    padding: 0 !important;
    align-items: flex-start !important;
    background: transparent !important;
  }

  .filter-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    opacity: 0 !important;
    transition: opacity 0.28s ease !important;
    pointer-events: none !important;
  }

  .filter-modal.active .filter-modal-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* ── Top-sheet ── */
  .filter-modal-content {
    position: fixed !important;
    top: 42px !important;
    left: 12px !important;
    right: 0 !important;
    width: 94% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 30px !important;
    background: #D3D3D3 !important;
    box-shadow: 0 16px 50px rgba(0,0,0,0.5) !important;
    transform: translateY(-110%) !important;
    opacity: 0 !important;
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 100001 !important;
  }

  .filter-modal.active .filter-modal-content {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  /* ── Header ── */
  .filter-modal-header {
    background: #242526 !important;
    padding: 11px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }

  .filter-modal-header h3 {
    font-size: 0.9rem !important;
    color: #f3f4f6 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .filter-modal-header h3 svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    stroke: #f3f4f6 !important;
  }

  #filterModalClose {
    position: static !important;
    width: 28px !important;
    height: 28px !important;
    background: rgba(255,255,255,0.10) !important;
    color: #f3f4f6 !important;
    font-size: 13px !important;
    box-shadow: none !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #filterModalClose svg { stroke: #f3f4f6 !important; }

  /* ── Body ── */
  .filter-modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 !important;
    padding-bottom: 4px !important;
  }

  /* ── Search input ── */
  .modal-search-input {
    width: calc(100% - 32px) !important;
    margin: 12px auto 8px !important;
    padding: 10px 16px !important;
    font-size: 0.86rem !important;
    border: 1px solid #242526 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    display: block !important;
  }

  .modal-search-input::placeholder { color: #9ca3af !important; }
  .modal-search-input:focus {
    outline: none !important;
    border-color: #242526 !important;
  }

  /* ── Section label ── */
  .filter-section h4 {
    font-size: 0.62rem !important;
    margin: 10px 0 6px 16px !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
  }

  /* ── Level: SEMUA centered + N chips bulat sempurna ── */
  .level-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 16px !important;
  }

  .level-btn--all {
    width: 100% !important;
    padding: 9px !important;
    border-radius: 999px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    border: 1px solid #242526 !important;
    background: #D3D3D3 !important;
    color: #1f2937 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    text-align: center !important;
  }

  .level-btn--all.active {
    background: #242526 !important;
    color: #ffffff !important;
  }

  /* N chips: bulat sempurna, centered */
  .level-btn-row {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .level-btn-row .level-btn {
    flex: 1 !important; 
    height: 40px !important;
    padding: 0 !important;
    border-radius: 20px !important; 
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    border: 1px solid #242526 !important;
    background: #D3D3D3 !important;
    color: #1f2937 !important;
    cursor: pointer !important;
    text-align: center !important;
    line-height: 40px !important;
    transition: all 0.15s !important;
  }

  .level-btn-row .level-btn.active {
    background: #242526 !important;
    color: #ffffff !important;
  }

  /* ── Category: 2 kolom, item terakhir ganjil → center ── */
  .category-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 0 16px 4px !important;
  }

  /* Jika item terakhir ganjil (sendirian), span full & center */
  .cat-btn:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: calc(50% - 3px) !important;
  }

  .cat-btn {
    padding: 8px 6px !important;
    font-size: 0.68rem !important;
    border-radius: 999px !important;
    line-height: 1.3 !important;
    border: 1px solid #242526 !important;
    background: #D3D3D3 !important;
    color: #1f2937 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    font-weight: 600 !important;
    text-align: center !important;
  }

  .cat-btn.active {
    background: #242526 !important;
    color: #ffffff !important;
  }

  /* ── Actions: stacked (atas bawah) ── */
  .filter-actions {
    padding: 10px 16px 16px !important;
    gap: 7px !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    border-top: 1px solid rgba(0,0,0,0.12) !important;
    background: #D3D3D3 !important;
    display: flex !important;
  }

  .apply-filter-btn {
    width: 100% !important;
    background: #242526 !important;
    color: #ffffff !important;
    padding: 12px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    border: none !important;
  }

  .apply-filter-btn:active { background: #3a3b3c !important; }

  .reset-filter-btn {
    width: 100% !important;
    padding: 10px !important;
    font-size: 0.8rem !important;
    background: #D3D3D3 !important;
    color: #6b7280 !important;
    border: 1px solid #242526 !important;
    border-radius: 999px !important;
    text-align: center !important;
  }
}

/* =====================================================
   🔍 FILTER MODAL — MOBILE LANDSCAPE
   Panel slide dari kanan ~58% lebar
   Berlaku: landscape + max-height 520px
===================================================== */
@media screen and (orientation: landscape) and (max-height: 520px) {

  .filter-modal {
    padding: 0 !important;
    background: transparent !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
  }

  .filter-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.45) !important;
    opacity: 0 !important;
    transition: opacity 0.28s ease !important;
    pointer-events: none !important;
  }

  .filter-modal.active .filter-modal-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .filter-modal-content {
    position: fixed !important;
    top: var(--topbar-height, 44px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 58% !important;
    max-width: 58% !important;
    max-height: none !important;
    height: auto !important;
    border-radius: 0 0 0 14px !important;
    background: #D3D3D3 !important;
    box-shadow: -8px 0 32px rgba(0,0,0,0.3) !important;
    transform: translateX(100%) !important;
    opacity: 0 !important;
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 100001 !important;
  }

  .filter-modal.active .filter-modal-content {
    transform: translateX(0) !important;
    opacity: 1 !important;
  }

  .filter-modal-header {
    background: #242526 !important;
    padding: 7px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
  }

  .filter-modal-header h3 {
    font-size: 0.78rem !important;
    color: #f3f4f6 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .filter-modal-header h3 svg {
    width: 14px !important;
    height: 14px !important;
    stroke: #f3f4f6 !important;
  }

  #filterModalClose {
    position: static !important;
    width: 24px !important;
    height: 24px !important;
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 50% !important;
    color: #f3f4f6 !important;
    font-size: 11px !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #filterModalClose svg { stroke: #f3f4f6 !important; }

  .filter-modal-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  .modal-search-input {
    width: calc(100% - 16px) !important;
    margin: 8px auto 4px !important;
    padding: 7px 12px !important;
    font-size: 0.72rem !important;
    border: 1.5px solid #242526 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    display: block !important;
  }

  .filter-section h4 {
    font-size: 0.55rem !important;
    margin: 6px 0 4px 10px !important;
    color: #555 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
  }

  .level-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 8px !important;
  }

  .level-btn--all {
    width: 100% !important;
    padding: 6px !important;
    border-radius: 999px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    border: 1px solid #242526 !important;
    background: #D3D3D3 !important;
    color: #1f2937 !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.15s !important;
  }

  .level-btn--all.active {
    background: #242526 !important;
    color: #ffffff !important;
  }

  .level-btn-row {
    display: flex !important;
    gap: 5px !important;
    justify-content: center !important;
  }

  .level-btn-row .level-btn {
    flex: 0 0 auto !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    border: 1px solid #242526 !important;
    background: #D3D3D3 !important;
    color: #1f2937 !important;
    cursor: pointer !important;
    text-align: center !important;
    line-height: 30px !important;
    transition: all 0.15s !important;
  }

  .level-btn-row .level-btn.active {
    background: #242526 !important;
    color: #ffffff !important;
  }

  .category-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 0 8px 4px !important;
  }

  .cat-btn {
    padding: 5px 10px !important;
    font-size: 0.6rem !important;
    border-radius: 999px !important;
    line-height: 1.3 !important;
    border: 1px solid #242526 !important;
    background: #D3D3D3 !important;
    color: #1f2937 !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    text-align: center !important;
    white-space: nowrap !important;
    transition: all 0.15s !important;
  }

  .cat-btn.active {
    background: #242526 !important;
    color: #ffffff !important;
  }

  .filter-actions {
    padding: 6px 10px 8px !important;
    gap: 6px !important;
    flex-direction: row !important;
    flex-shrink: 0 !important;
    border-top: 1px solid rgba(0,0,0,0.1) !important;
    background: #D3D3D3 !important;
    display: flex !important;
  }

  .apply-filter-btn {
    flex: 1 !important;
    background: #242526 !important;
    color: #ffffff !important;
    padding: 8px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  .reset-filter-btn {
    padding: 8px 12px !important;
    font-size: 0.7rem !important;
    background: #D3D3D3 !important;
    color: #555 !important;
    border: 1.5px solid #242526 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
}

/* =====================================================
   🔍 FILTER MODAL — DESKTOP
   Panel slide dari kanan ~44% lebar
   Berlaku: min-width 768px (non landscape mobile)
===================================================== */
@media screen and (min-width: 768px) {

  .filter-modal {
    padding: 0 !important;
    background: transparent !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
  }

  .filter-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.45) !important;
    opacity: 0 !important;
    transition: opacity 0.28s ease !important;
    pointer-events: none !important;
  }

  .filter-modal.active .filter-modal-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Panel mulai tepat di bawah topbar */
  .filter-modal-content {
    position: fixed !important;
    top: 44px !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: 46% !important;
    max-width: 420px !important;
    max-height: 90vh !important;
    height: auto !important;
    border-radius: 25px 0 0 25px !important;
    background: #D3D3D3 !important;
    box-shadow: -10px 0 40px rgba(0,0,0,0.25) !important;
    transform: translateX(110%) !important;
    opacity: 0 !important;
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 100001 !important;
  }

  .filter-modal.active .filter-modal-content {
    transform: translateX(0) !important;
    opacity: 1 !important;
  }

  .filter-modal-header {
    background: #242526 !important;
    padding: 9px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    border-radius: 25px 0 0 0 !important;
  }

  .filter-modal-header h3 {
    font-size: 0.9rem !important;
    color: #f3f4f6 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .filter-modal-header h3 svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #f3f4f6 !important;
  }

  #filterModalClose {
    position: static !important;
    width: 28px !important;
    height: 28px !important;
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 50% !important;
    color: #f3f4f6 !important;
    font-size: 13px !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #filterModalClose svg { stroke: #f3f4f6 !important; }

  .filter-modal-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  /* Search bar — compact */
  .modal-search-input {
    width: calc(100% - 28px) !important;
    margin: 10px auto 4px !important;
    padding: 7px 14px !important;
    font-size: 0.8rem !important;
    border: 1.5px solid #242526 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    display: block !important;
  }

  .filter-section h4 {
    font-size: 0.6rem !important;
    margin: 8px 0 5px 14px !important;
    color: #555 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
  }

  /* Level: SEMUA centered full, N5-N1 bulat sempurna + centered */
  .level-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 14px !important;
  }

  .level-btn--all {
    width: 100% !important;
    padding: 7px !important;
    border-radius: 999px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    border: 1px solid #242526 !important;
    background: #D3D3D3 !important;
    color: #1f2937 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    text-align: center !important;
  }

  .level-btn--all.active {
    background: #242526 !important;
    color: #ffffff !important;
  }

  .level-btn-row {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .level-btn-row .level-btn {
    flex: 1 !important;
    border-radius: 999px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    border: 1px solid #242526 !important;
    background: #D3D3D3 !important;
    color: #1f2937 !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.15s !important;
  }

  .level-btn-row .level-btn.active {
    background: #242526 !important;
    color: #ffffff !important;
  }

  /* Kategori — flex wrap chips seperti kotoba */
  .category-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 14px 6px !important;
  }

  .cat-btn {
    padding: 5px 12px !important;
    font-size: 0.72rem !important;
    border-radius: 999px !important;
    line-height: 1.3 !important;
    border: 1px solid #242526 !important;
    background: #D3D3D3 !important;
    color: #1f2937 !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    text-align: center !important;
    transition: all 0.15s !important;
    white-space: nowrap !important;
  }

  .cat-btn.active {
    background: #242526 !important;
    color: #ffffff !important;
  }

  .filter-actions {
    padding: 8px 14px 12px !important;
    gap: 7px !important;
    flex-direction: row !important;
    flex-shrink: 0 !important;
    border-top: 1px solid rgba(0,0,0,0.1) !important;
    background: #D3D3D3 !important;
    display: flex !important;
    margin-top: 11px !important;
  }

  .apply-filter-btn {
    flex: 1 !important;
    background: #242526 !important;
    color: #ffffff !important;
    padding: 11px !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  .reset-filter-btn {
    padding: 11px 18px !important;
    font-size: 0.8rem !important;
    background: #D3D3D3 !important;
    color: #555 !important;
    border: 1.5px solid #242526 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    width: fit-content !important;
  }
}

/* =====================================================
   📱 DOKKAI SPLIT-SCREEN — Mobile Landscape
   Paksa layout kiri-kanan (split) seperti desktop,
   ukuran teks & border dikompres agar muat di layar kecil
   Berlaku: landscape + max-height 520px
===================================================== */
@media screen and (orientation: landscape) and (max-height: 520px) {

  /* Wrapper: pakai flex row (split kiri-kanan), height penuh */
  .dokkai-wrapper-pro {
    flex-direction: row !important;
    height: calc(100vh - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 12px !important;
    border-width: 1px !important;
  }

  /* Panel kiri: bacaan — scroll mandiri, border tipis */
  .dokkai-passage-side {
    flex: 1 !important;
    height: 92% !important;
    min-height: unset !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    border-width: 2px !important;
    overflow-y: auto !important;
  }

  /* Teks bacaan lebih kecil agar muat */
  .dokkai-passage-content {
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
  }

  /* Panel kanan: soal — scroll mandiri */
  .dokkai-question-side {
    flex: 1.3 !important;
    height: 100% !important;
    overflow-y: auto !important;
    padding-top: 4px !important;
    padding-right: 4px !important;
    gap: 8px !important;
  }

  /* Teks soal lebih compact */
  .dokkai-question-side .quiz-question-main {
    font-size: clamp(0.9rem, 2.5vw, 1.15rem) !important;
    line-height: 1.45 !important;
  }
}

/* =====================================================
   📱 GOI & BUNPOU (KOSAKATA & TATA BAHASA) — MODE LATIHAN
   Mobile Portrait
   Hub pilihan latihan + sesi quiz aktif (GOI & BUNPOU)
   Berlaku: max-width 767px + portrait
   ⚠️  JANGAN sentuh block landscape di bawah sini
===================================================== */
@media (max-width: 767px) and (orientation: portrait) {

  /* ── Hub pilih latihan ── */
  #grid.hub-mode {
    overflow-y: auto !important;
    padding: 10px !important;
  }

  /* ── Sesi quiz aktif: grid perlu scroll ── */
  body.training-session #grid.quiz-active-mode {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    align-items: flex-start !important;
    padding-top: calc(var(--topbar-height) + 12px) !important;
    padding-bottom: 28px !important;
  }

  /* quiz-wrapper-pro: tinggi otomatis, tidak di-cap */
  .quiz-wrapper-pro {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Jawaban quiz: tidak boleh terpotong */
  .quiz-options-pro {
    overflow: visible !important;
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── quiz-qcard & question ── */
  .quiz-qcard-pro {
    min-height: 100px !important;
    padding: 14px !important;
  }

  .quiz-question-main {
    font-size: clamp(1.4rem, 5vw, 2.2rem) !important;
  }

  .quiz-opt-btn-pro {
    min-height: 46px !important;
    font-size: 0.96rem !important;
  }

  /* ── Header soal ── */
  .quiz-section-title {
    font-size: 0.96rem !important;
    padding-top: 34px !important;
  }

  .quiz-subtitle {
    font-size: 0.82rem !important;
  }

  .quiz-head-pro {
    padding: 7px 14px !important;
  }

  .quiz-progress-text,
  .quiz-timer-text {
    font-size: 0.82rem !important;
  }

  /* ── Tombol selesai ── */
  #finishBtnManual {
    top: 20px !important;
    right: 23px !important;
    padding: 6px 14px !important;
    font-size: 0.75rem !important;
  }
}

/* =====================================================
   📱 GOI & BUNPOU (KOSAKATA & TATA BAHASA) — MODE LATIHAN
   Mobile Landscape
   Hub pilihan latihan + sesi quiz aktif (GOI & BUNPOU)
   Berlaku: landscape + max-height 520px
   ⚠️  JANGAN sentuh block portrait di atas sini
===================================================== */
@media screen and (orientation: landscape) and (max-height: 520px) {

  /* ── Hub pilih latihan: tidak offside ── */
  #grid.hub-mode {
    overflow-y: auto !important;
    padding: 10px !important;
  }

  .hub-screen--practice .hub-practice-shell {
    background: rgba(255,255,255,0.95) !important;
    border-radius: 16px !important;
    padding: 12px !important;
    margin: 0 0 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hub-screen--practice .hub-header--practice {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }

  .practice-hub-title-pill {
    font-size: 1.1rem !important;
  }

  .hub-screen--practice .hub-header--practice p {
    font-size: 0.78rem !important;
  }

  .hub-section {
    margin-top: 8px !important;
  }

  /* ── Sesi quiz aktif: wrapper tidak tenggelam ── */
  body.training-session .app-body-shell {
    display: block !important;
    height: calc(100vh - var(--topbar-height)) !important;
    overflow: hidden !important;
  }

  body.training-session .content-panel {
    height: calc(100vh - var(--topbar-height)) !important;
    overflow: auto !important;
    display: block !important;
  }

  #grid.quiz-active-mode {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 8px !important;
    overflow-y: auto !important;
    min-height: auto !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  .quiz-wrapper-pro {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    padding: 12px !important;
    gap: 8px !important;
    overflow: visible !important;
    margin: 0 !important;
  }

  .quiz-qcard-pro {
    min-height: 70px !important;
    padding: 10px !important;
    flex: 0 0 auto !important;
  }

  .quiz-question-main {
    font-size: clamp(1rem, 4vw, 1.6rem) !important;
  }

  .quiz-options-pro {
    gap: 6px !important;
    margin-top: 4px !important;
  }

  .quiz-opt-btn-pro {
    min-height: 36px !important;
    font-size: 0.82rem !important;
    padding: 5px 8px !important;
  }

  .quiz-head-pro {
    padding: 5px 12px !important;
  }

  .quiz-progress-text,
  .quiz-timer-text {
    font-size: 0.78rem !important;
  }

  #finishBtnManual {
    top: 10px !important;
    right: 10px !important;
    padding: 5px 10px !important;
    font-size: 0.7rem !important;
  }
}

/* =====================================================
   🔄 BUG FIX — ROTASI ORIENTASI SAAT MODE LATIHAN
   Masalah: rotate landscape → portrait (atau sebaliknya)
   saat quiz aktif → render balik ke menu latihan.

   CSS fix: paksa body.training-session & quiz-active-mode
   tetap tampil benar di KEDUA orientasi agar browser
   tidak collapse layout dan memicu JS re-render.

   ⚠️  Note untuk developer: jika bug masih muncul setelah
   CSS fix ini, tambahkan handler JS berikut:
     window.addEventListener('orientationchange', (e) => {
       if (document.body.classList.contains('training-session')) {
         e.preventDefault && e.preventDefault();
         // re-apply quiz state tanpa navigate ke hub
       }
     });
===================================================== */

/* ── Portrait: pastikan quiz tetap tampil ── */
@media (max-width: 767px) and (orientation: portrait) {
  body.training-session {
    overflow: hidden !important;
    /* Cegah layout collapse saat orientasi berubah */
    contain: layout !important;
  }

  body.training-session .app-body-shell {
    position: fixed !important;
    top: var(--topbar-height, 56px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    display: flex !important;
  }

  body.training-session .content-panel {
    flex: 1 !important;
    height: 100% !important;
    overflow-y: auto !important;
    display: block !important;
  }

  /* Pastikan quiz grid tetap flex (tidak collapse ke grid awal) */
  body.training-session #grid.quiz-active-mode {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    padding: calc(var(--topbar-height, 56px) + 10px) 12px 20px !important;
    box-sizing: border-box !important;
  }

  /* Pastikan dokkai wrapper tidak hilang saat rotasi */
  body.training-session .dokkai-wrapper-pro {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ── Landscape: pastikan quiz tetap tampil ── */
@media screen and (orientation: landscape) and (max-height: 520px) {
  body.training-session {
    overflow: hidden !important;
    contain: layout !important;
  }

  body.training-session .app-body-shell {
    position: fixed !important;
    display: flex !important;
    flex-direction: row !important;
    top: var(--topbar-height, 44px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  /* Sidebar tetap tersembunyi saat quiz */
  body.training-session #sidebar,
  body.training-session #overlay {
    display: none !important;
  }

  body.training-session .content-panel {
    flex: 1 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
  }

  /* Pastikan quiz grid tetap terlihat saat rotasi ke landscape */
  body.training-session #grid.quiz-active-mode {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 0px !important;
  }

  /* Pastikan dokkai split-screen tetap kiri-kanan saat rotasi */
  body.training-session .dokkai-wrapper-pro {
    display: flex !important;
    flex-direction: row !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: calc(100vh - var(--topbar-height, 44px) - 20px) !important;
  }
}

/* =====================================================
   🎧 CHOUKAI — LISTENING COMPREHENSION
   Layout terpisah: Desktop · Mobile Portrait · Landscape
   Rule ini BERDIRI SENDIRI, tidak ada kaitan dengan
   dokkai maupun quiz-wrapper-pro
===================================================== */

/* ─── DESKTOP BASE ─────────────────────────────────── */
.choukai-wrapper-pro {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 20px 50px rgba(20, 24, 30, 0.2);
  padding: 28px 30px;
  box-sizing: border-box;
  position: relative;
}

/* Header: judul + progress + tombol selesai */
.choukai-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #d7dfea;
}

.choukai-title {
  font-weight: 800;
  color: #1e293b;
  font-size: 0.95rem;
  margin: 0;
}

.choukai-progress-text {
  font-weight: 700;
  color: #475569;
  font-size: 0.9rem;
}

#choukai-finish-btn {
  position: absolute;
  top: 18px;
  right: 24px;
  background: #ff4d6d;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(255, 77, 109, 0.35);
  z-index: 10;
  letter-spacing: 0.5px;
}

#choukai-finish-btn:hover {
  background: #e11d48;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(225, 29, 72, 0.45);
}

/* ─── STAGE AUDIO ──────────────────────────────────── */
.choukai-stage {
  flex: 1;
  min-height: 160px;
  border-radius: 18px;
  background: linear-gradient(160deg, #f8fafc, #eef2ff);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 24px;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

/* Icon speaker — now SVG-based */
.choukai-speaker-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

.choukai-speaker-icon svg {
  width: 48px;
  height: 48px;
  color: #a855f7;
}

.choukai-stage.is-playing .choukai-speaker-icon {
  opacity: 1;
}

/* Hint teks saat idle */
.choukai-idle-hint {
  font-size: 0.85rem;
  color: #94a3b8;
  font-weight: 600;
}

.choukai-stage.is-playing .choukai-idle-hint {
  display: none;
}

/* ─── WAVEFORM ANIMASI ─────────────────────────────── */
.choukai-waveform {
  display: none;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
}

.choukai-stage.is-playing .choukai-waveform {
  display: flex;
}

.choukai-stage.is-playing .choukai-idle-hint {
  display: none;
}

.choukai-wave-bar {
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(to top, #f472b6, #a855f7);
  animation: choukai-wave 0.9s ease-in-out infinite;
}

.choukai-wave-bar:nth-child(1)  { height: 12px; animation-delay: 0.0s; }
.choukai-wave-bar:nth-child(2)  { height: 28px; animation-delay: 0.1s; }
.choukai-wave-bar:nth-child(3)  { height: 20px; animation-delay: 0.2s; }
.choukai-wave-bar:nth-child(4)  { height: 36px; animation-delay: 0.15s; }
.choukai-wave-bar:nth-child(5)  { height: 24px; animation-delay: 0.05s; }
.choukai-wave-bar:nth-child(6)  { height: 40px; animation-delay: 0.25s; }
.choukai-wave-bar:nth-child(7)  { height: 28px; animation-delay: 0.1s; }
.choukai-wave-bar:nth-child(8)  { height: 18px; animation-delay: 0.3s; }
.choukai-wave-bar:nth-child(9)  { height: 32px; animation-delay: 0.2s; }
.choukai-wave-bar:nth-child(10) { height: 14px; animation-delay: 0.05s; }

@keyframes choukai-wave {
  0%, 100% { transform: scaleY(0.5); opacity: 0.6; }
  50%       { transform: scaleY(1.2); opacity: 1; }
}

/* ─── KONTROL PLAYER ───────────────────────────────── */
.choukai-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.choukai-btn-play {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #f472b6, #a855f7);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 11px 28px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.35);
  letter-spacing: 0.3px;
}

.choukai-btn-play:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.45);
}

.choukai-btn-play:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Tombol Lambat — hanya N5, disembunyikan di N4-N1 via JS */
.choukai-btn-slow {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #475569;
  border: 1.5px solid #cbd5e1;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.choukai-btn-slow:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.choukai-btn-slow:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.choukai-btn-slow.is-active {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}

/* Counter replay ●● */
.choukai-replay-counter {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748b;
}

.choukai-replay-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a855f7;
  transition: background 0.3s;
}

.choukai-replay-dot.used {
  background: #e2e8f0;
}

/* ─── PILIHAN JAWABAN ──────────────────────────────── */
.choukai-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.choukai-opt-btn {
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  font-weight: 700;
  font-size: 1rem;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  text-align: left;
  line-height: 1.4;
}

.choukai-opt-btn:hover:not(:disabled) {
  background: #f8f0ff;
  border-color: #a855f7;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.12);
}

/* State: LOCKED — audio belum selesai */
.choukai-opt-btn:disabled,
.choukai-options.locked .choukai-opt-btn {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* State: jawaban benar */
.choukai-opt-btn.correct {
  background: #dcfce7;
  border-color: #22c55e;
  color: #15803d;
}

/* State: jawaban salah */
.choukai-opt-btn.wrong {
  background: #fee2e2;
  border-color: #ef4444;
  color: #b91c1c;
}

/* ─── STATUS LABEL (Memutar... / Dengarkan dengan seksama) */
.choukai-status-label {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: #94a3b8;
  min-height: 1.2em;
  transition: color 0.3s;
}

.choukai-status-label.active {
  color: #a855f7;
}

/* ─── PLAYER SIDE & ANSWER SIDE (base) ────────────── */
.choukai-player-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.choukai-answer-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =====================================================
   🎧 CHOUKAI — MOBILE PORTRAIT
   Full width kiri ke kanan, layout kolom
===================================================== */
@media (max-width: 767px) and (orientation: portrait) {
  .choukai-wrapper-pro {
    width: 100%;
    max-width: 100%;
    padding: 14px 12px;
    gap: 12px;
    border-radius: 16px;
  }

  .choukai-stage {
    min-height: 120px;
    padding: 18px;
    gap: 10px;
  }

  .choukai-speaker-icon svg {
    width: 36px;
    height: 36px;
  }

  #choukai-finish-btn {
    top: 14px;
    right: 14px;
    padding: 6px 14px;
    font-size: 0.75rem;
  }

  .choukai-controls {
    gap: 8px;
  }

  .choukai-btn-play {
    padding: 10px 22px;
    font-size: 0.92rem;
  }

  .choukai-btn-slow {
    padding: 8px 14px;
    font-size: 0.82rem;
  }

  .choukai-opt-btn {
    min-height: 46px;
    font-size: 0.92rem;
    padding: 10px 12px;
  }

  .choukai-header {
    padding: 7px 12px;
  }

  .choukai-title {
    font-size: 0.85rem;
  }

  .choukai-progress-text {
    font-size: 0.8rem;
  }
}

/* =====================================================
   🎧 CHOUKAI — MOBILE LANDSCAPE
   Split kiri-kanan: player | pilihan jawaban
   Full horizontal kiri ke kanan
===================================================== */
@media screen and (orientation: landscape) and (max-height: 520px) {
  .choukai-wrapper-pro {
    flex-direction: row;
    max-width: 100%;
    width: 100%;
    height: calc(100vh - var(--topbar-height, 44px) - 16px);
    max-height: calc(100vh - var(--topbar-height, 44px) - 16px);
    padding: 10px 12px;
    gap: 10px;
    border-radius: 12px;
    align-items: stretch;
  }

  /* Sisi kiri: stage + kontrol */
  .choukai-player-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
  }

  .choukai-stage {
    flex: 1;
    min-height: unset;
    padding: 12px;
    gap: 8px;
    border-radius: 12px;
  }

  .choukai-speaker-icon svg {
    width: 32px;
    height: 32px;
  }

  .choukai-waveform {
    height: 28px;
  }

  .choukai-wave-bar:nth-child(6) { height: 28px; }

  .choukai-controls {
    gap: 6px;
    flex-wrap: nowrap;
    padding: 20px;
  }

  .choukai-btn-play {
    padding: 8px 16px;
    font-size: 0.82rem;
  }

  .choukai-btn-slow {
    padding: 7px 12px;
    font-size: 0.78rem;
  }

  .choukai-replay-dot {
    width: 8px;
    height: 8px;
  }

  /* Sisi kanan: pilihan jawaban */
  .choukai-answer-side {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }

  .choukai-options {
    gap: 6px;
    flex: 1;
    align-content: center;
  }

  .choukai-opt-btn {
    min-height: 36px;
    font-size: 0.8rem;
    padding: 6px 10px;
    border-radius: 10px;
  }

  .choukai-header {
    padding: 5px 10px;
  }

  .choukai-title {
    font-size: 0.78rem;
  }

  .choukai-progress-text {
    font-size: 0.75rem;
  }

  #choukai-finish-btn {
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    font-size: 0.7rem;
  }

  .choukai-status-label {
    font-size: 0.72rem;
  }
}

/* =====================================================
   🎧 CHOUKAI — TRAINING SESSION STABILITY
   Pastikan layout stabil saat orientasi berubah
===================================================== */
@media (max-width: 767px) and (orientation: portrait) {
  body.training-session .choukai-wrapper-pro {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media screen and (orientation: landscape) and (max-height: 520px) {
  body.training-session .choukai-wrapper-pro {
    display: flex !important;
    flex-direction: row !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: calc(100vh - var(--topbar-height, 44px) - 16px) !important;
  }
}

/* =====================================================
   🎯 CUSTOM CONFIRM MODAL — Pengganti browser confirm()
   Clean, poster-style, ditengah layar
===================================================== */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.confirm-modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.confirm-modal-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 36px 32px 28px;
  max-width: 420px;
  width: calc(100% - 40px);
  box-shadow:
    0 4px 6px rgba(0,0,0,0.05),
    0 20px 60px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(255,255,255,0.6) inset;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  transform: scale(0.92) translateY(12px);
  transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirm-modal-overlay.active .confirm-modal-card {
  transform: scale(1) translateY(0);
}

.confirm-modal-icon svg {
  width: 56px;
  height: 56px;
}

.confirm-modal-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.confirm-modal-body {
  font-size: 0.95rem;
  color: #475569;
  margin: 0;
  line-height: 1.6;
}

.confirm-modal-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.confirm-modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1;
  min-width: 140px;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.18s ease;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.confirm-modal-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.confirm-modal-btn--cancel {
  background: #f1f5f9;
  color: #334155;
  border: 1.5px solid #e2e8f0;
}

.confirm-modal-btn--cancel:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.confirm-modal-btn--ok {
  background: linear-gradient(135deg, #ef4444, #e11d48);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.confirm-modal-btn--ok:hover {
  background: linear-gradient(135deg, #dc2626, #be123c);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
  transform: translateY(-1px);
}

/* ─── Mobile ─── */
@media (max-width: 480px) {
  .confirm-modal-card {
    padding: 28px 20px 22px;
    gap: 14px;
    border-radius: 20px;
  }

  .confirm-modal-title {
    font-size: 1.15rem;
  }

  .confirm-modal-body {
    font-size: 0.88rem;
  }

  .confirm-modal-actions {
    flex-direction: column;
  }

  .confirm-modal-btn {
    min-width: unset;
    width: 100%;
  }
}

/* =====================================================
   🎧 CHOUKAI — SESSION INFO BAR (timer + sesi label)
===================================================== */
.favorit-vocab-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.favorit-vocab-confirm-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.favorit-vocab-confirm-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 36px 32px 28px;
  max-width: 420px;
  width: calc(100% - 40px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 20px 60px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(255,255,255,0.6) inset;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  transform: scale(0.92) translateY(12px);
  transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.favorit-vocab-confirm-overlay.active .favorit-vocab-confirm-card {
  transform: scale(1) translateY(0);
}

.favorit-vocab-confirm-icon svg {
  width: 56px;
  height: 56px;
}

.favorit-vocab-confirm-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.favorit-vocab-confirm-body {
  font-size: 0.95rem;
  color: #475569;
  margin: 0;
  line-height: 1.6;
}

.favorit-vocab-confirm-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.favorit-vocab-confirm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1;
  min-width: 140px;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.18s ease;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.favorit-vocab-confirm-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.favorit-vocab-confirm-btn--cancel {
  background: #f1f5f9;
  color: #334155;
  border: 1.5px solid #e2e8f0;
}

.favorit-vocab-confirm-btn--cancel:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.favorit-vocab-confirm-btn--ok {
  background: linear-gradient(135deg, #ef4444, #e11d48);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.favorit-vocab-confirm-btn--ok:hover {
  background: linear-gradient(135deg, #dc2626, #be123c);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
  transform: translateY(-1px);
}

.favorit-grammar-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.favorit-grammar-confirm-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.favorit-grammar-confirm-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 36px 32px 28px;
  max-width: 420px;
  width: calc(100% - 40px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 20px 60px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(255,255,255,0.6) inset;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  transform: scale(0.92) translateY(12px);
  transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.favorit-grammar-confirm-overlay.active .favorit-grammar-confirm-card {
  transform: scale(1) translateY(0);
}

.favorit-grammar-confirm-icon svg {
  width: 56px;
  height: 56px;
}

.favorit-grammar-confirm-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.favorit-grammar-confirm-body {
  font-size: 0.95rem;
  color: #475569;
  margin: 0;
  line-height: 1.6;
}

.favorit-grammar-confirm-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.favorit-grammar-confirm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1;
  min-width: 140px;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.18s ease;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.favorit-grammar-confirm-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.favorit-grammar-confirm-btn--cancel {
  background: #f1f5f9;
  color: #334155;
  border: 1.5px solid #e2e8f0;
}

.favorit-grammar-confirm-btn--cancel:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.favorit-grammar-confirm-btn--ok {
  background: linear-gradient(135deg, #ef4444, #e11d48);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.favorit-grammar-confirm-btn--ok:hover {
  background: linear-gradient(135deg, #dc2626, #be123c);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .favorit-vocab-confirm-card,
  .favorit-grammar-confirm-card {
    padding: 28px 20px 22px;
    gap: 14px;
    border-radius: 20px;
  }

  .favorit-vocab-confirm-title,
  .favorit-grammar-confirm-title {
    font-size: 1.15rem;
  }

  .favorit-vocab-confirm-body,
  .favorit-grammar-confirm-body {
    font-size: 0.88rem;
  }

  .favorit-vocab-confirm-actions,
  .favorit-grammar-confirm-actions {
    flex-direction: column;
  }

  .favorit-vocab-confirm-btn,
  .favorit-grammar-confirm-btn {
    min-width: unset;
    width: 100%;
  }
}

.choukai-session-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #475569;
  gap: 8px;
}

.choukai-session-bar .choukai-timer-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #334155;
}

.choukai-session-bar .choukai-timer-wrap svg {
  width: 15px;
  height: 15px;
  color: #64748b;
}

.choukai-session-label {
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Question label above options */
.choukai-question-label {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  line-height: 1.5;
}

/* Desktop: CHOUKAI SESSION — wider max-width */
@media (min-width: 768px) {
  .choukai-wrapper-pro {
    max-width: 820px;
  }
  .choukai-session-label {
    max-width: 320px;
  }
}

/* Mobile portrait: choukai session bar */
@media (max-width: 767px) and (orientation: portrait) {
  .choukai-session-bar {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  .choukai-session-label {
    max-width: 150px;
    font-size: 0.72rem;
  }
  .choukai-question-label {
    font-size: 0.9rem;
    padding: 10px 12px;
  }
}

/* Mobile landscape: choukai session bar */
@media screen and (orientation: landscape) and (max-height: 520px) {
  .choukai-session-bar {
    padding: 4px 10px;
    font-size: 0.75rem;
    border-radius: 8px;
  }
  .choukai-session-label {
    font-size: 0.7rem;
    max-width: 120px;
  }
  .choukai-question-label {
    font-size: 0.8rem;
    padding: 7px 10px;
    border-radius: 8px;
  }
}

/* ─── CHOUKAI BUTTON SVG ICONS ─── */
.choukai-play-icon,
.choukai-slow-icon {
  display: inline-flex;
  align-items: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.choukai-play-icon svg,
.choukai-slow-icon svg {
  width: 100%;
  height: 100%;
}

.choukai-btn-play {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.choukai-btn-slow {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Option label pill (A, B, C, D) */
.choukai-opt-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 6px;
  background: #e2e8f0;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 800;
  margin-right: 8px;
  flex-shrink: 0;
}

.choukai-opt-btn {
  display: flex !important;
  align-items: center !important;
}

.choukai-opt-btn.correct .choukai-opt-label {
  background: #bbf7d0;
  color: #15803d;
}

.choukai-opt-btn.wrong .choukai-opt-label {
  background: #fecaca;
  color: #b91c1c;
}

/* =====================================================
   🎧 CHOUKAI — PLAYER PANEL (dalam dokkai-passage-side)
   Panel kiri audio player, sejajar dengan passage teks Dokkai
===================================================== */
.choukai-player-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  height: 100%;
  padding: 8px 0;
}

/* Pastikan stage memenuhi ruang sisa */
.choukai-player-panel .choukai-stage {
  flex: 1;
  min-height: 180px;
}

/* ─── DESKTOP ─── */
@media (min-width: 768px) {
  .choukai-player-panel {
    gap: 18px;
    height: 250px;
  }
  .choukai-player-panel .choukai-stage {
    min-height: 220px;
  }
}

/* ─── MOBILE PORTRAIT ─── */
@media (max-width: 767px) and (orientation: portrait) {
  .choukai-player-panel {
    gap: 12px;
    padding: 4px 0;
  }
  .choukai-player-panel .choukai-stage {
    min-height: 140px;
  }
}

/* ─── MOBILE LANDSCAPE ─── */
@media screen and (orientation: landscape) and (max-height: 520px) {
  .choukai-player-panel {
    gap: 8px;
    padding: 2px 0;
    height: 250px;
  }
  .choukai-player-panel .choukai-stage {
    flex: 1;
    min-height: unset;
    padding: 10px;
  }
}

/* ─── CHOUKAI OPTIONS — locked state pakai quiz-opt-btn-pro ─── */
#choukaiOptions.locked .quiz-opt-btn-pro {
  opacity: 0.38;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ─── DASHBOARD SVG ICONS ─── */
.dash-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  flex-shrink: 0;
  margin-right: 4px;
  position: relative;
  top: -1px;
}

.dashboard-history-date {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dashboard-history-date .dash-icon {
  margin-right: 0;
  top: 0;
  color: #64748b;
}

.dashboard-history-item h4 {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dashboard-history-item h4 .dash-icon {
  margin-right: 0;
  top: 0;
  color: #475569;
}

.dashboard-history-meta .dash-icon {
  color: #64748b;
}

.dashboard-history-panel h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-history-panel h3 .dash-icon {
  width: 18px;
  height: 18px;
  margin-right: 0;
  top: 0;
  color: #334155;
}

.dashboard-history-meta strong .dash-icon {
  width: 13px;
  height: 13px;
  top: 0;
  margin-right: 2px;
}

.status-lulus .dash-icon { color: inherit; }
.status-remidi .dash-icon { color: inherit; }

/* ═══════════════════════════════════════════════════════════
   GRAMMAR STYLES (gr-*)
   Modul independen — JANGAN digabung dengan verb-forms (.form-*)
   ═══════════════════════════════════════════════════════════ */

/* ── Hub Container ── */
.gr-hub,
.gr-poster {
  grid-column: 1 / -1 !important;
}

.gr-hub {
  width: min(1240px, calc(100% - 30px));
  margin: 0 auto 24px;
  padding: 20px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.94));
  box-shadow: 0 22px 48px -30px rgba(15, 23, 42, 0.55);
}

/* ── Hub Head ── */
.gr-hub-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-end;
  border: 2px solid rgba(203, 213, 225, 0.9);
  border-radius: 18px;
  padding: 14px 16px;
  background: #228b22;
  margin-bottom: 16px;
}

.gr-hub-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
}

.gr-hub-head p {
  margin: 6px 0 0;
  color: #ffffff;
}

.gr-level-filter-wrap {
  display: grid;
  gap: 6px;
  font-weight: 700;
  color: #ffffff;
}

.gr-level-filter {
  min-width: 170px;
  border: 2px solid rgba(148, 163, 184, 0.45);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 700;
  color: #0f172a;
  background: #fff;
}

/* ── Brick Grid (Hub Cards) ── */
.gr-brick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.gr-brick {
  min-height: 112px;
  border: 2px solid rgba(190, 24, 93, 0.18);
  border-radius: 16px;
  padding: 14px 16px;
  background: #FFD700;
  cursor: pointer;
  display: grid;
  align-content: center;
  gap: 8px;
  text-align: left;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.gr-brick:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -20px rgba(190, 24, 93, 0.55);
  border-color: rgba(190, 24, 93, 0.45);
}

.gr-brick-title {
  display: block;
  width: 50%;
  min-width: 0;
  max-width: 50%;
  box-sizing: border-box;
  padding: 7px 14px;
  border-radius: 999px;
  background: #228b22;
  color: #ffffff;
  box-shadow: 0 10px 20px -16px rgba(16, 185, 129, 0.8);
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 6px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gr-brick-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(1.4em * 2);
  font-size: 1.02rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.4;
}

.gr-level-badge {
  justify-self: start;
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(219, 39, 119, 0.12);
  color: #9d174d;
  font-size: 0.78rem;
  font-weight: 800;
}

/* ── Pagination ── */
.gr-hub-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.gr-page-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #475569;
  font-weight: 700;
  cursor: pointer;
}

.gr-page-btn.active {
  background: #ff4d6d;
  border-color: #ff4d6d;
  color: #fff;
}

.gr-page-btn:hover {
  border-color: #ff8faa;
  color: #be123c;
}

.gr-page-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.gr-page-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: #64748b;
  font-weight: 700;
}

/* ── Poster (Detail Page) ── */
.gr-poster {
  width: min(1240px, calc(100% - 30px));
  margin: 0 auto 28px;
  padding: 18px;
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(255,255,255,.97), rgba(248,250,252,.95));
  box-shadow: 0 26px 50px -34px rgba(15, 23, 42, 0.58);
}

.gr-poster h2 {
  margin: 12px 0 6px;
  color: #0f172a;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.gr-poster h3 {
  margin: 18px 0 10px;
  color: #1e293b;
}

.gr-poster-summary {
  margin: 0 0 10px;
  line-height: 1.55;
  color: #334155;
}

.gr-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 9px 14px;
  background: #1e293b;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* ── Group Panel (setiap group: これ, それ, あれ, dll) ── */
.gr-group-panel {
  border: 1px solid rgba(125, 211, 252, 0.7);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(239, 246, 255, 0.9), rgba(240, 249, 255, 0.65));
  padding: 12px;
  margin-bottom: 10px;
}

.gr-group-panel h4 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 999px;
  background: #228b22;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
}

@media (min-width: 768px) {
  .gr-brick-title,
  .form-brick-title-only {
    font-size: 0.94rem;
    padding: 6px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.gr-group-desc {
  margin: 6px 0 10px;
  color: #334155;
  line-height: 1.5;
}

/* ── Sentence Card ── */
.gr-sentence-card {
  border: 1px solid rgba(191, 219, 254, 0.95);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(165deg, #ffffff, #f8fbff);
  margin-top: 10px;
}

.gr-sentence-box {
  position: relative;
  margin-top: 0;
  border: 1px solid rgba(186, 230, 253, 0.95);
  border-radius: 10px;
  padding: 12px 56px 10px 10px;
  background: linear-gradient(155deg, #f8fafc, #f0f9ff);
}

.gr-sentence-box p {
  margin: 4px 0;
}

.gr-sentence-jp {
  font-size: 1.14rem;
  font-weight: 700;
  color: #0f172a;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", "Noto Serif JP", serif;
}

.gr-sentence-card [data-role="sentence-kana"] {
  font-size: 1.05rem;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", "Noto Serif JP", serif;
}

/* ── Play Button ── */
.gr-play-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  min-height: 34px;
  border-radius: 50%;
  border: 1px solid #bfdbfe !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 10px rgba(17, 24, 39, 0.18) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.gr-play-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ── Sentence Actions (Acak Kalimat) ── */
.gr-sentence-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gr-shuffle-btn {
  border: none;
  border-radius: 999px;
  padding: 8px 12px;
  background: #e2e8f0;
  color: #0f172a;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.gr-shuffle-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gr-shuffle-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Mobile Responsive ── */
@media (max-width: 767px) {
  .gr-brick-grid {
    grid-template-columns: 1fr;
  }

  .gr-hub,
  .gr-poster {
    width: min(100%, calc(100% - 16px));
    padding: 12px;
    border-radius: 16px;
  }

  .gr-hub-head {
    flex-direction: column;
    align-items: stretch;
  }

  .gr-page-btn {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  .gr-brick {
    overflow: hidden;
  }

  .gr-brick-title {
    width: 50% !important;
    min-width: 0;
    max-width: 50% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ═══════════════════════════════════════════════════════════
   LETTER CIRCLE BUTTONS (あ / ア) — inside Huruf panel card
   Clean native style — no pink, slate/dark tones
   ═══════════════════════════════════════════════════════════ */

.menu-panel-card--static {
  cursor: default;
  pointer-events: none;
}

.menu-panel-card--static .letter-btn-pair,
.menu-panel-card--static .letter-circle-btn {
  pointer-events: auto;
}

.letter-btn-pair {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.letter-circle-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all .2s ease;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.letter-circle-btn:hover {
  border-color: #475569;
  background: #f1f5f9;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
  transform: translateY(-1px);
}

.letter-circle-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
  background: #e2e8f0;
}

.letter-circle-btn svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  stroke: none;
}

.letter-circle-btn > span {
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

@media (max-width: 767px) {
  .letter-circle-btn {
    width: 36px;
    height: 36px;
  }

  .letter-circle-btn svg {
    width: 24px;
    height: 24px;
  }
}

/* ── Search Modal: Level button locked state ── */
.level-btn--locked {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  position: relative;
}

.level-btn--locked::after {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
  margin-left: 4px; vertical-align: middle; opacity: 0.6;
}

/* ============================================================
   PROGRESS TRACKING — Dashboard + Latihan Lock
   ============================================================ */

/* ── Dashboard Progress Bar ── */
.dash-progress-wrap {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
}

.dash-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.dash-progress-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
}

.dash-progress-pct {
  font-size: 0.85rem;
  font-weight: 800;
  color: #e11d48;
  transition: color 0.3s;
}

.dash-progress-pct--ready { color: #16a34a; }

.dash-progress-bar-outer {
  height: 6px;
  background: rgba(0,0,0,0.1);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}

.dash-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #e11d48, #fb7185);
  border-radius: 999px;
  transition: width 0.5s ease;
}

.dash-progress-bar-fill--ready {
  background: linear-gradient(90deg, #16a34a, #4ade80);
}

.dash-progress-breakdown {
  display: flex;
  gap: 12px;
  font-size: 0.68rem;
  color: #94a3b8;
}

.dash-progress-unlock-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(22,163,74,0.08);
  border: 1px solid rgba(22,163,74,0.2);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #16a34a;
  animation: dash-unlock-pulse 2s ease-in-out infinite;
}

@keyframes dash-unlock-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ── Latihan Lock Banner ── */
.latihan-lock-banner {
  grid-column: 1 / -1;
  margin-bottom: 12px;
}

.latihan-lock-banner__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(225,29,72,0.08);
  border: 1px solid rgba(225,29,72,0.2);
  border-radius: 12px;
  font-size: 0.8rem;
  color: #e11d48;
}

.latihan-lock-banner__inner strong { font-weight: 800; }

/* ── Locked hub level buttons ── */
.hub-level-btn--locked {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

@media (max-width: 767px) {
  .dash-progress-wrap {
    width: 86% !important;
  }
}

/* =========================================================
   Native Hub Refresh (Belajar + Latihan Menu)
   Scope:
   - Desktop
   - Mobile landscape (base sama desktop, ukuran diperkecil)
   - Mobile portrait latihan: polish warna saja
========================================================= */
:root {
  --nb-native-surface: #E5E4E2;
  --nb-native-card: #E0DFDC;
  --nb-native-border: rgba(127, 126, 122, 0.45);
  --nb-native-text: #242526;
  --nb-native-sub: #3b3d3f;
  --nb-native-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  --nb-forest: #228B22;
  --nb-sunset: #FA5F55;
  --nb-ink: #242526;
}

/* ikon full-color untuk kartu menu */
.menu-panel-card__icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(160deg, #f5f8ff, #ebf2ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.menu-panel-card__icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}

.menu-panel-card--letters .menu-panel-card__icon-wrap {
  background: linear-gradient(150deg, #fff6ea, #ffece0);
}

.menu-panel-card--verb-forms .menu-panel-card__icon-wrap {
  background: linear-gradient(150deg, #ebf6ff, #def0ff);
}

.menu-panel-card--adjective-forms .menu-panel-card__icon-wrap {
  background: linear-gradient(150deg, #f3edff, #ece3ff);
}

.menu-panel-card--expressions .menu-panel-card__icon-wrap {
  background: linear-gradient(150deg, #fff5e8, #ffe9d0);
}

.menu-panel-card--grammar .menu-panel-card__icon-wrap {
  background: linear-gradient(150deg, #fff2ef, #ffe6df);
}

.menu-panel-card .letter-circle-btn svg {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #e44773 !important;
  stroke: none !important;
}

@media screen and (min-width: 768px) {
  #grid.hub-mode {
    padding: 16px 18px 30px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #grid.hub-mode .menu-hub-screen {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #grid.hub-mode .hub-screen--practice {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .menu-hub-screen {
    box-sizing: border-box !important;
    padding: 16px 18px 18px !important;
    border-radius: 20px !important;
    border: 1px solid #c0bfbc !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(34, 139, 34, 0.08) !important;
  }

  .menu-hub-screen .menu-hub-header,
  .menu-hub-screen .menu-panel-grid,
  .menu-hub-screen .menu-hub-section-card--kotoba,
  .menu-panel-card {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .menu-hub-screen .menu-hub-header {
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 16px 18px !important;
    border-radius: 20px !important;
    border: 1px solid var(--nb-native-border) !important;
    background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
    box-shadow: var(--nb-native-shadow) !important;
  }

  .menu-hub-title-pill {
    background: linear-gradient(135deg, #ff7444, #ff4f6d) !important;
    color: #ffffff !important;
    font-size: 1.24rem !important;
  }

  .menu-hub-header p {
    color: var(--nb-native-sub) !important;
    max-width: 74ch;
    font-weight: 650 !important;
  }

  .menu-panel-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 14px !important;
    grid-auto-rows: 108px !important;
  }

  .menu-panel-card--letters { order: 1; }
  .menu-panel-card--grammar { order: 2; }
  .menu-panel-card--verb-forms { order: 3; }
  .menu-panel-card--adjective-forms { order: 4; }
  .menu-panel-card--expressions { order: 5; }

  .menu-panel-card {
    min-height: 108px !important;
    height: 108px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    border: 1px solid var(--nb-native-border) !important;
    background: #ffffff !important;
    box-shadow: 0 9px 20px rgba(15, 23, 42, 0.07) !important;
    grid-template-columns: 60px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  .menu-panel-card__body strong {
    color: var(--nb-native-text) !important;
    font-size: 0.90rem !important;
    line-height: 1.12 !important;
    display: block;
    max-width: 100%;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .menu-panel-card__body > span {
    color: #56657a !important;
    font-size: 0.86rem !important;
    display: block;
    margin-top: 4px;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100%;
  }

  .menu-panel-card--expressions .menu-panel-card__body strong {
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  .menu-panel-card--letters {
    grid-template-columns: 60px minmax(0, 1fr) !important;
  }

  .menu-panel-card--letters .menu-panel-card__letters-rail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .menu-panel-card--letters .menu-panel-card__body > span {
    display: none !important;
  }

  .menu-panel-card--letters .letter-btn-pair {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
  }

  .menu-panel-card--letters .letter-circle-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    border: 1px solid #b7b7b3 !important;
    background: #ffffff !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08) !important;
  }

  .menu-hub-screen .menu-hub-section-card--kotoba {
    width: 100% !important;
    margin-top: 16px !important;
    padding: 14px 16px !important;
    border-radius: 20px !important;
    border: 1px solid var(--nb-native-border) !important;
    background: #ffffff !important;
    box-shadow: 0 9px 20px rgba(15, 23, 42, 0.07) !important;
  }

  .menu-hub-screen .menu-hub-section-card--kotoba .menu-section-title-pill {
    background: linear-gradient(135deg, #6f64f8, #4f46e5) !important;
    font-size: 1.02rem !important;
  }

  .menu-hub-screen .menu-hub-section-card--kotoba .hub-levels {
    gap: 9px !important;
    margin-top: 2px;
  }

  .menu-hub-screen .hub-level-btn--category {
    position: relative !important;
    background: linear-gradient(135deg, #1ea7e1, #0b8fc6) !important;
    border: 0 !important;
    color: #ffffff !important;
    font-weight: 820 !important;
    border-radius: 9px !important;
    padding: 8px 13px 8px 24px !important;
    clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%) !important;
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.16) !important;
  }

  .menu-hub-screen .hub-level-btn--category::before {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.98) !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }

  .menu-hub-screen .menu-hub-section-card--kotoba .hub-level-btn--category:nth-child(5n + 1) {
    background: linear-gradient(135deg, #1ea7e1, #0b8fc6) !important;
  }

  .menu-hub-screen .menu-hub-section-card--kotoba .hub-level-btn--category:nth-child(5n + 2) {
    background: linear-gradient(135deg, #99c907, #7fb100) !important;
  }

  .menu-hub-screen .menu-hub-section-card--kotoba .hub-level-btn--category:nth-child(5n + 3) {
    background: linear-gradient(135deg, #ff9f1f, #f08700) !important;
  }

  .menu-hub-screen .menu-hub-section-card--kotoba .hub-level-btn--category:nth-child(5n + 4) {
    background: linear-gradient(135deg, #2db3e9, #1398ce) !important;
  }

  .menu-hub-screen .menu-hub-section-card--kotoba .hub-level-btn--category:nth-child(5n) {
    background: linear-gradient(135deg, #f34a8b, #df236f) !important;
  }

  .hub-screen--practice .hub-practice-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px 18px 18px !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
    border: 1px solid #c0bfbc !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(34, 139, 34, 0.08) !important;
  }

  .hub-screen--practice .hub-header--practice {
    max-width: none !important;
    display: block !important;
    margin: 0 0 12px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(34, 139, 34, 0.38) !important;
    background: #228b22 !important;
    box-shadow: none !important;
  }

  .practice-hub-title-pill {
    font-size: 1.88rem !important;
    font-weight: 980 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    text-shadow: none !important;
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .hub-screen--practice .hub-header--practice p {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 760 !important;
    line-height: 1.34 !important;
  }

  .hub-practice-divider {
    width: 100% !important;
    border-bottom: 1px solid #cfd9e9 !important;
    margin: 6px 0 14px !important;
  }

  .hub-screen--practice .hub-practice-wrapper {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .hub-screen--practice .hub-practice-wrapper .hub-section {
    margin: 0 !important;
    padding: 14px 14px 12px !important;
    border-radius: 16px !important;
    border: 1px solid #b9b8b4 !important;
    background: #FFD700 !important;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06) !important;
  }

  .hub-screen--practice .hub-section-capsule {
    font-size: 0.95rem !important;
    font-weight: 890 !important;
    letter-spacing: 0 !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    margin-bottom: 10px !important;
    background: var(--nb-forest) !important;
    color: #ffffff !important;
  }

  .hub-screen--practice .hub-section-capsule--goi {
    background: var(--nb-forest) !important;
  }

  .hub-screen--practice .hub-section-capsule--bunpou {
    background: var(--nb-forest) !important;
  }

  .hub-screen--practice .hub-section-capsule--dokkai {
    background: var(--nb-forest) !important;
  }

  .hub-screen--practice .hub-section-capsule--choukai {
    background: var(--nb-forest) !important;
  }

  .hub-screen--practice .hub-levels {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .hub-screen--practice .hub-level-btn--patterns {
    min-width: 0 !important;
    width: 100% !important;
    padding: 8px 0 !important;
    border-radius: 999px !important;
    border: 1px solid var(--nb-forest) !important;
    background: var(--nb-sunset) !important;
    color: var(--nb-ink) !important;
    font-size: 0.92rem !important;
    font-weight: 850 !important;
    box-shadow: none !important;
  }

  .hub-screen--practice .hub-level-btn--patterns.hub-level-btn--locked {
    background: #F9F6EE !important;
    border-color: var(--nb-forest) !important;
    color: rgba(36, 37, 38, 0.42) !important;
    opacity: 1 !important;
  }

  .hub-screen--practice .latihan-lock-banner {
    margin-bottom: 12px !important;
  }

  .hub-screen--practice .latihan-lock-banner__inner {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    border: 1px solid #fecdd3 !important;
    background: #ff002b38 !important;
    color: #ff0000 !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    width: fit-content !important;
  }
}

@media screen and (max-width: 767px) and (orientation: landscape) and (max-height: 520px) {
  #grid.hub-mode {
    padding: 10px 12px 16px !important;
  }

  .menu-hub-screen {
    box-sizing: border-box !important;
    padding: 12px !important;
    border-radius: 16px !important;
    border: 1px solid #c0bfbc !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(34, 139, 34, 0.08) !important;
  }

  .menu-hub-screen .menu-hub-header,
  .menu-hub-screen .menu-panel-grid,
  .menu-hub-screen .menu-hub-section-card--kotoba,
  .menu-panel-card {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .menu-panel-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 10px !important;
    grid-auto-rows: 86px !important;
  }

  .menu-panel-card {
    min-height: 86px !important;
    height: 86px !important;
    padding: 10px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  .menu-panel-card--letters {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  .menu-panel-card--letters .menu-panel-card__letters-rail {
    gap: 6px;
  }

  .menu-panel-card__icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .menu-panel-card__icon {
    width: 30px;
    height: 30px;
  }

  .menu-panel-card__body strong {
    font-size: 0.88rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .menu-panel-card__body > span {
    font-size: 0.74rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .menu-panel-card--expressions .menu-panel-card__body strong {
    font-size: 0.8rem !important;
    white-space: nowrap !important;
  }

  .hub-screen--practice .hub-practice-shell {
    padding: 12px !important;
  }

  .practice-hub-title-pill {
    font-size: 1.65rem !important;
  }

  .hub-screen--practice .hub-header--practice p {
    font-size: 1.0rem !important;
  }

  .hub-screen--practice .hub-practice-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
  }

  .hub-screen--practice .hub-practice-wrapper .hub-section {
    padding: 10px 10px 9px !important;
  }

  .hub-screen--practice .hub-section-capsule {
    font-size: 0.82rem !important;
    padding: 6px 10px !important;
  }

  .hub-screen--practice .hub-levels {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .hub-screen--practice .hub-level-btn--patterns {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 0.76rem !important;
    padding: 6px 0 !important;
  }
}

/* mobile portrait: hanya polish warna menu latihan (UX tetap sama) */
@media (max-width: 767px) and (orientation: portrait) {
  .bottom-nav-hub {
    padding: calc(var(--topbar-height) + 8px) 10px calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 8px) !important;
    overflow-x: hidden !important;
  }

  .bottom-nav-hub__screen {
    gap: 10px !important;
  }

  .bottom-nav-hub__screen--menu {
    background: #f3f4f6 !important;
    border: 1px solid #c7c6c2 !important;
    border-radius: 16px !important;
    padding: 10px !important;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__header,
  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-card,
  .bottom-nav-hub__screen--menu .bottom-nav-hub__group {
    border: 1px solid #bebdb8 !important;
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08) !important;
  }

  .bottom-nav-hub__header {
    border-radius: 14px !important;
    padding: 12px !important;
  }

  .bottom-nav-hub__header h2 {
    font-size: 1.08rem !important;
    line-height: 1.06 !important;
  }

  .bottom-nav-hub__header p {
    margin-top: 4px !important;
    font-size: 0.74rem !important;
    line-height: 1.28 !important;
  }

  .bottom-nav-hub__menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    grid-auto-rows: 96px !important;
  }

  .bottom-nav-hub__menu-card--expressions {
    grid-column: 1 / -1 !important;
  }

  .bottom-nav-hub__menu-grid > .bottom-nav-hub__menu-card--expressions:not(:last-child) {
    grid-column: auto !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-card {
    min-height: 96px !important;
    height: 96px !important;
    max-height: 96px !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    border-radius: 18px !important;
    border: 1px solid #bebdb8 !important;
    background: #ffffff !important;
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08) !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
    align-self: stretch !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-card--letters {
    min-height: 96px !important;
    height: 96px !important;
    max-height: 96px !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-body {
    min-width: 0;
    display: block;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-body strong {
    display: block;
    color: var(--nb-native-text) !important;
    font-size: 0.9rem !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-body > span {
    display: block;
    margin-top: 4px;
    color: #56657a !important;
    font-size: 0.86rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-card--letters .bottom-nav-hub__menu-body > span {
    display: none !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-card--letters .bottom-nav-hub__menu-body strong {
    display: block !important;
    margin: 0 !important;
    line-height: 1.05 !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__letter-btn-row {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 0 !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-card--letters .bottom-nav-hub__menu-body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__letter-btn {
    width: 18px !important;
    height: 18px !important;
    border-radius: 6px !important;
    border: 1px solid #b7b7b3 !important;
    background: #ffffff !important;
    color: #e44773 !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
    padding: 0 !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon img {
    width: 19px !important;
    height: 19px !important;
    object-fit: contain;
    display: block;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon--letters {
    background: linear-gradient(150deg, #fff6ea, #ffece0) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon--grammar {
    background: linear-gradient(150deg, #fff2ef, #ffe6df) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon--verb {
    background: linear-gradient(150deg, #ebf6ff, #def0ff) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon--adjective {
    background: linear-gradient(150deg, #f3edff, #ece3ff) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon--expressions {
    background: linear-gradient(150deg, #fff5e8, #ffe9d0) !important;
  }

  .bottom-nav-hub__group {
    border-radius: 14px !important;
    padding: 10px !important;
  }

  .bottom-nav-hub__capsule {
    padding: 6px 11px !important;
    font-size: 0.82rem !important;
  }

  .bottom-nav-hub__chips {
    gap: 6px !important;
  }

  .bottom-nav-hub__chip {
    min-height: 30px !important;
    padding: 6px 9px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chips {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
    gap: 9px !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chip {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    position: relative !important;
    border: 0 !important;
    border-radius: 8px !important;
    min-height: 28px !important;
    padding: 7px 10px 7px 20px !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
    box-shadow: 0 3px 7px rgba(15, 23, 42, 0.14) !important;
    font-weight: 820 !important;
    color: #ffffff !important;
    clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chip::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.98) !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chip:nth-child(5n + 1) {
    background: linear-gradient(135deg, #1ea7e1, #0b8fc6) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chip:nth-child(5n + 2) {
    background: linear-gradient(135deg, #99c907, #7fb100) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chip:nth-child(5n + 3) {
    background: linear-gradient(135deg, #ff9f1f, #f08700) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chip:nth-child(5n + 4) {
    background: linear-gradient(135deg, #2db3e9, #1398ce) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chip:nth-child(5n) {
    background: linear-gradient(135deg, #f34a8b, #df236f) !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__header {
    background: #228b22 !important;
    border: 1px solid rgba(34, 139, 34, 0.38) !important;
    box-shadow: none !important;
    border-radius: 14px !important;
    padding: 12px !important;
  }

  .bottom-nav-hub__screen--practice .latihan-lock-banner {
    margin-bottom: 0px !important;
    grid-column: 1 / -1 !important;
  }

  .bottom-nav-hub__screen--practice .latihan-lock-banner__inner {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 0.64rem !important;
    line-height: 1.22 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__header h2 {
    color: #ffffff !important;
    font-size: 1.55rem !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__header p {
    color: #ffffff !important;
    font-weight: 760 !important;
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__practice-wrapper {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    border-radius: 14px !important;
    padding: 10px !important;
    background: #ffffff !important;
    border: 1px solid #c0bfbc !important;
    box-shadow: 0 8px 18px rgba(34, 139, 34, 0.08) !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__group {
    background: #FFD700 !important;
    border: 1px solid #b9b8b4 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06) !important;
    padding: 10px 10px 9px !important;
    margin: 0 !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__group:last-child {
    margin-bottom: 0 !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__capsule {
    background: var(--nb-forest) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    font-size: 0.82rem !important;
    font-weight: 890 !important;
    padding: 6px 10px !important;
    margin-bottom: 10px !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__capsule--goi,
  .bottom-nav-hub__screen--practice .bottom-nav-hub__capsule--bunpou,
  .bottom-nav-hub__screen--practice .bottom-nav-hub__capsule--dokkai,
  .bottom-nav-hub__screen--practice .bottom-nav-hub__capsule--choukai {
    background: var(--nb-forest) !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__chips {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__chip {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 30px !important;
    padding: 6px 0 !important;
    border-radius: 999px !important;
    border: 1px solid var(--nb-forest) !important;
    background: var(--nb-sunset) !important;
    color: var(--nb-ink) !important;
    font-size: 0.74rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__chip[disabled],
  .bottom-nav-hub__screen--practice .bottom-nav-hub__chip[aria-disabled="true"] {
    background: #F9F6EE !important;
    border-color: var(--nb-forest) !important;
    color: rgba(36, 37, 38, 0.42) !important;
    opacity: 1 !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__note {
    margin-top: 8px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__note--choukai {
    background: linear-gradient(135deg, #2e96f5, #2563eb) !important;
    color: #ffffff !important;
  }
}

@media screen and (min-width: 768px) and (orientation: landscape) and (max-height: 520px) {
    .hub-screen--practice .hub-header--practice {
      padding: 14px 10px !important;
    }
}

/* Dashboard modal scroll lock hard override (desktop + mobile landscape included) */
body.dashboard-modal-open:not(.training-session):not(.review-mode-active) .content-panel {
  overflow: hidden !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}

/* Letter poster perf tune - mobile only (portrait + landscape) */
@media (max-width: 767px) and (orientation: portrait),
       screen and (max-width: 767px) and (orientation: landscape) and (max-height: 520px) {
  .letter-poster {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  .letter-poster-body {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .letter-cell,
  .letter-label,
  .letter-empty {
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .letter-cell:hover,
  .letter-label:hover,
  .letter-empty:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* iOS landscape stabilize (Safari + Chrome iOS only, Android untouched) */
@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .ios-device,
  .ios-device body {
    overflow: auto !important;
    height: auto !important;
  }

  .ios-device .app-body-shell {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: var(--topbar-height) !important;
    min-height: calc(100dvh - var(--topbar-height)) !important;
    height: auto !important;
  }

  .ios-device #sidebar,
  .ios-device .content-panel {
    height: calc(100dvh - var(--topbar-height)) !important;
    max-height: calc(100dvh - var(--topbar-height)) !important;
  }

  .ios-device .content-panel {
    padding-bottom: calc(54px + env(safe-area-inset-bottom)) !important;
  }

  .ios-device .menu-panel-card {
    align-items: center !important;
  }

  .ios-device .menu-panel-card__body strong,
  .ios-device .menu-panel-card__body > span {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }
}@media screen and (max-width: 767px) and (orientation: landscape) and (max-height: 520px) {
  #grid.hub-mode {
    padding: 10px 12px 16px !important;
  }

  .menu-hub-screen {
    box-sizing: border-box !important;
    padding: 12px !important;
    border-radius: 16px !important;
    border: 1px solid #c0bfbc !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(34, 139, 34, 0.08) !important;
  }

  .menu-hub-screen .menu-hub-header,
  .menu-hub-screen .menu-panel-grid,
  .menu-hub-screen .menu-hub-section-card--kotoba,
  .menu-panel-card {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .menu-panel-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 10px !important;
    grid-auto-rows: 86px !important;
  }

  .menu-panel-card {
    min-height: 86px !important;
    height: 86px !important;
    padding: 10px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  .menu-panel-card--letters {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  .menu-panel-card--letters .menu-panel-card__letters-rail {
    gap: 6px;
  }

  .menu-panel-card__icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .menu-panel-card__icon {
    width: 30px;
    height: 30px;
  }

  .menu-panel-card__body strong {
    font-size: 0.88rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .menu-panel-card__body > span {
    font-size: 0.74rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .menu-panel-card--expressions .menu-panel-card__body strong {
    font-size: 0.8rem !important;
    white-space: nowrap !important;
  }

  .hub-screen--practice .hub-practice-shell {
    padding: 12px !important;
  }

  .practice-hub-title-pill {
    font-size: 1.65rem !important;
  }

  .hub-screen--practice .hub-header--practice p {
    font-size: 1.0rem !important;
  }

  .hub-screen--practice .hub-practice-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
  }

  .hub-screen--practice .hub-practice-wrapper .hub-section {
    padding: 10px 10px 9px !important;
  }

  .hub-screen--practice .hub-section-capsule {
    font-size: 0.82rem !important;
    padding: 6px 10px !important;
  }

  .hub-screen--practice .hub-levels {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .hub-screen--practice .hub-level-btn--patterns {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 0.76rem !important;
    padding: 6px 0 !important;
  }
}

/* mobile portrait: hanya polish warna menu latihan (UX tetap sama) */
@media (max-width: 767px) and (orientation: portrait) {
  .bottom-nav-hub {
    padding: calc(var(--topbar-height) + 8px) 10px calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 8px) !important;
    overflow-x: hidden !important;
  }

  .bottom-nav-hub__screen {
    gap: 10px !important;
  }

  .bottom-nav-hub__screen--menu {
    background: #f3f4f6 !important;
    border: 1px solid #c7c6c2 !important;
    border-radius: 16px !important;
    padding: 10px !important;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__header,
  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-card,
  .bottom-nav-hub__screen--menu .bottom-nav-hub__group {
    border: 1px solid #bebdb8 !important;
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08) !important;
  }

  .bottom-nav-hub__header {
    border-radius: 14px !important;
    padding: 12px !important;
  }

  .bottom-nav-hub__header h2 {
    font-size: 1.08rem !important;
    line-height: 1.06 !important;
  }

  .bottom-nav-hub__header p {
    margin-top: 4px !important;
    font-size: 0.74rem !important;
    line-height: 1.28 !important;
  }

  .bottom-nav-hub__menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    grid-auto-rows: 96px !important;
  }

  .bottom-nav-hub__menu-card--expressions {
    grid-column: 1 / -1 !important;
  }

  .bottom-nav-hub__menu-grid > .bottom-nav-hub__menu-card--expressions:not(:last-child) {
    grid-column: auto !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-card {
    min-height: 96px !important;
    height: 96px !important;
    max-height: 96px !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    border-radius: 18px !important;
    border: 1px solid #bebdb8 !important;
    background: #ffffff !important;
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08) !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
    align-self: stretch !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-card--letters {
    min-height: 96px !important;
    height: 96px !important;
    max-height: 96px !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-body {
    min-width: 0;
    display: block;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-body strong {
    display: block;
    color: var(--nb-native-text) !important;
    font-size: 0.9rem !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-body > span {
    display: block;
    margin-top: 4px;
    color: #56657a !important;
    font-size: 0.86rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-card--letters .bottom-nav-hub__menu-body > span {
    display: none !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-card--letters .bottom-nav-hub__menu-body strong {
    display: block !important;
    margin: 0 !important;
    line-height: 1.05 !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__letter-btn-row {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 0 !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-card--letters .bottom-nav-hub__menu-body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__letter-btn {
    width: 18px !important;
    height: 18px !important;
    border-radius: 6px !important;
    border: 1px solid #b7b7b3 !important;
    background: #ffffff !important;
    color: #e44773 !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
    padding: 0 !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon img {
    width: 19px !important;
    height: 19px !important;
    object-fit: contain;
    display: block;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon--letters {
    background: linear-gradient(150deg, #fff6ea, #ffece0) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon--grammar {
    background: linear-gradient(150deg, #fff2ef, #ffe6df) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon--verb {
    background: linear-gradient(150deg, #ebf6ff, #def0ff) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon--adjective {
    background: linear-gradient(150deg, #f3edff, #ece3ff) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon--expressions {
    background: linear-gradient(150deg, #fff5e8, #ffe9d0) !important;
  }

  .bottom-nav-hub__group {
    border-radius: 14px !important;
    padding: 10px !important;
  }

  .bottom-nav-hub__capsule {
    padding: 6px 11px !important;
    font-size: 0.82rem !important;
  }

  .bottom-nav-hub__chips {
    gap: 6px !important;
  }

  .bottom-nav-hub__chip {
    min-height: 30px !important;
    padding: 6px 9px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chips {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
    gap: 9px !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chip {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    position: relative !important;
    border: 0 !important;
    border-radius: 8px !important;
    min-height: 28px !important;
    padding: 7px 10px 7px 20px !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
    box-shadow: 0 3px 7px rgba(15, 23, 42, 0.14) !important;
    font-weight: 820 !important;
    color: #ffffff !important;
    clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chip::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.98) !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chip:nth-child(5n + 1) {
    background: linear-gradient(135deg, #1ea7e1, #0b8fc6) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chip:nth-child(5n + 2) {
    background: linear-gradient(135deg, #99c907, #7fb100) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chip:nth-child(5n + 3) {
    background: linear-gradient(135deg, #ff9f1f, #f08700) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chip:nth-child(5n + 4) {
    background: linear-gradient(135deg, #2db3e9, #1398ce) !important;
  }

  .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba .bottom-nav-hub__chip:nth-child(5n) {
    background: linear-gradient(135deg, #f34a8b, #df236f) !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__header {
    background: #228b22 !important;
    border: 1px solid rgba(34, 139, 34, 0.38) !important;
    box-shadow: none !important;
    border-radius: 14px !important;
    padding: 12px !important;
  }

  .bottom-nav-hub__screen--practice .latihan-lock-banner {
    margin-bottom: 0px !important;
    grid-column: 1 / -1 !important;
  }

  .bottom-nav-hub__screen--practice .latihan-lock-banner__inner {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 0.64rem !important;
    line-height: 1.22 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__header h2 {
    color: #ffffff !important;
    font-size: 1.55rem !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__header p {
    color: #ffffff !important;
    font-weight: 760 !important;
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__practice-wrapper {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    border-radius: 14px !important;
    padding: 10px !important;
    background: #ffffff !important;
    border: 1px solid #c0bfbc !important;
    box-shadow: 0 8px 18px rgba(34, 139, 34, 0.08) !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__group {
    background: #FFD700 !important;
    border: 1px solid #b9b8b4 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06) !important;
    padding: 10px 10px 9px !important;
    margin: 0 !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__group:last-child {
    margin-bottom: 0 !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__capsule {
    background: var(--nb-forest) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    font-size: 0.82rem !important;
    font-weight: 890 !important;
    padding: 6px 10px !important;
    margin-bottom: 10px !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__capsule--goi,
  .bottom-nav-hub__screen--practice .bottom-nav-hub__capsule--bunpou,
  .bottom-nav-hub__screen--practice .bottom-nav-hub__capsule--dokkai,
  .bottom-nav-hub__screen--practice .bottom-nav-hub__capsule--choukai {
    background: var(--nb-forest) !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__chips {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__chip {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 30px !important;
    padding: 6px 0 !important;
    border-radius: 999px !important;
    border: 1px solid var(--nb-forest) !important;
    background: var(--nb-sunset) !important;
    color: var(--nb-ink) !important;
    font-size: 0.74rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__chip[disabled],
  .bottom-nav-hub__screen--practice .bottom-nav-hub__chip[aria-disabled="true"] {
    background: #F9F6EE !important;
    border-color: var(--nb-forest) !important;
    color: rgba(36, 37, 38, 0.42) !important;
    opacity: 1 !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__note {
    margin-top: 8px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
  }

  .bottom-nav-hub__screen--practice .bottom-nav-hub__note--choukai {
    background: linear-gradient(135deg, #2e96f5, #2563eb) !important;
    color: #ffffff !important;
  }
}

@media screen and (min-width: 768px) and (orientation: landscape) and (max-height: 520px) {
    .hub-screen--practice .hub-header--practice {
      padding: 14px 10px !important;
    }
}

/* Dashboard modal scroll lock hard override (desktop + mobile landscape included) */
body.dashboard-modal-open:not(.training-session):not(.review-mode-active) .content-panel {
  overflow: hidden !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}

/* Letter poster perf tune - mobile only (portrait + landscape) */
@media (max-width: 767px) and (orientation: portrait),
       screen and (max-width: 767px) and (orientation: landscape) and (max-height: 520px) {
  .letter-poster {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  .letter-poster-body {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .letter-cell,
  .letter-label,
  .letter-empty {
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .letter-cell:hover,
  .letter-label:hover,
  .letter-empty:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* iOS landscape stabilize (Safari + Chrome iOS only, Android untouched) */
@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  .ios-device,
  .ios-device body {
    overflow: auto !important;
    height: auto !important;
  }

  .ios-device .app-body-shell {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: var(--topbar-height) !important;
    min-height: calc(100dvh - var(--topbar-height)) !important;
    height: auto !important;
  }

  .ios-device #sidebar,
  .ios-device .content-panel {
    height: calc(100dvh - var(--topbar-height)) !important;
    max-height: calc(100dvh - var(--topbar-height)) !important;
  }

  .ios-device .content-panel {
    padding-bottom: calc(54px + env(safe-area-inset-bottom)) !important;
  }

  .ios-device .menu-panel-card {
    align-items: center !important;
  }

  .ios-device .menu-panel-card__body strong,
  .ios-device .menu-panel-card__body > span {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }
}

/* =========================================
   FINAL SHELL THEME: support-poster DNA
   Body + sidebar only, tanpa sentuh wrapper putih
========================================= */
html,
body {
  background:
    radial-gradient(circle at 0% 0%, rgba(184, 58, 31, 0.20) 0%, transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(184, 58, 31, 0.08) 0%, transparent 36%),
    linear-gradient(180deg, #0f0d0d 0%, #0a0a0a 100%) !important;
}

body::before {
  display: block !important;
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 75%) !important;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 75%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.app-body-shell,
.content-panel {
  background: transparent !important;
}

#sidebar {
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px),
    radial-gradient(circle at 0% 0%, rgba(184, 58, 31, 0.18) 0%, transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(184, 58, 31, 0.08) 0%, transparent 36%),
    linear-gradient(180deg, #100d0d 0%, #0a0a0a 100%) !important;
  background-size: 42px 42px, 42px 42px, auto, auto, auto !important;
  color: #ffffff !important;
  border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* =========================================
   MENU: warm glass shell
========================================= */
.menu-hub-screen {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.10)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 -1px 0 rgba(255, 255, 255, 0.08) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.menu-hub-screen .menu-hub-header {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.28)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.10)) !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.28) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.menu-hub-screen .menu-hub-section-card--kotoba {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.26)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)) !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.24) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================================
   LATIHAN: warm glass shell
========================================= */
.hub-screen--practice {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.10)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 -1px 0 rgba(255, 255, 255, 0.08) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hub-screen--practice .hub-practice-shell {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.28)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.10)) !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.28) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================================
   FAVORIT RINGKASAN: warm glass shell
========================================= */
.favorit-overview-screen {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.10)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 -1px 0 rgba(255, 255, 255, 0.08) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.favorit-overview-screen .menu-hub-header {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.28)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.10)) !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.28) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.favorit-overview-screen .favorit-section {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.26)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)) !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.24) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================================
   FAVORIT VOCAB DETAIL: warm glass shell
========================================= */
.favorit-vocab-detail {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.10)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 -1px 0 rgba(255, 255, 255, 0.08) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.favorit-vocab-detail__header {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.28)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.10)) !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.28) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.favorit-vocab-detail__body {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.26)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)) !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.24) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================================
   FAVORIT GRAMMAR DETAIL: warm glass shell
========================================= */
.favorit-grammar-detail {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.10)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 -1px 0 rgba(255, 255, 255, 0.08) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.favorit-grammar-detail__header {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.28)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.10)) !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.28) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.favorit-grammar-detail__body {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.26)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)) !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.24) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================================
   FAVORIT PERF OVERRIDE
   simpler shell, less paint cost
========================================= */
.favorit-overview-screen,
.favorit-vocab-detail,
.favorit-grammar-detail {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.06)) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14) !important;
}

.favorit-overview-screen .menu-hub-header,
.favorit-overview-screen .favorit-section,
.favorit-vocab-detail__header,
.favorit-vocab-detail__body,
.favorit-grammar-detail__header,
.favorit-grammar-detail__body {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 247, 247, 0.90)) !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10) !important;
}

@media screen and (min-width: 768px) {
  .hub-screen--practice {
    padding: 0 !important;
  }
}

@media screen and (orientation: landscape) and (max-height: 520px) {
  .hub-screen--practice {
    padding: 0 !important;
  }
}

/* ================================================
   NihonByte — Latihan Hub Override v3
   Paste di paling bawah style.css
   ================================================ */


/* ════════════════════════════════════════════
   DESKTOP — prefix #grid untuk specificity tinggi
   ════════════════════════════════════════════ */

/* Shell */
#grid .hub-practice-shell {
  background: #232323 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 16px !important;
}

/* Hero header */
#grid .hub-header--practice {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  background: #2a2a2a !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 13px !important;
  padding: 18px 22px !important;
  box-shadow: none !important;
  margin-bottom: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#grid .hub-header--practice::before {
  content: '' !important;
  position: absolute !important;
  right: -30px; top: -50px;
  width: 260px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80,175,40,0.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

#grid .hub-header--practice::after {
  content: '練習' !important;
  position: absolute !important;
  right: 24px; top: 50%;
  transform: translateY(-50%);
  font-size: 62px; font-weight: 700;
  color: rgba(100,200,60,0.06);
  pointer-events: none; user-select: none;
  line-height: 1; z-index: 0;
}

#grid .hub-header--practice h2 {
  margin: 0 0 4px !important;
  position: relative; z-index: 1;
}

#grid .hub-header--practice h2::before {
  content: '● JLPT Practice';
  display: inline-flex;
  align-items: center;
  font-size: 11px; font-weight: 500;
  color: #7ed64a;
  background: rgba(80,175,40,0.12);
  border: 1px solid rgba(80,175,40,0.22);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

#grid .practice-hub-title-pill {
  display: block !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: #eeeeee !important;
  letter-spacing: -0.4px !important;
  text-shadow: none !important;
  line-height: 1.15 !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#grid .hub-header--practice p {
  margin: 3px 0 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  line-height: 1.5 !important;
  position: relative; z-index: 1;
}

/* Divider */
#grid .hub-practice-divider {
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  margin: 4px 0 12px !important;
}

/* Wrapper — 2 kolom */
#grid .hub-practice-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
}

/* Kartu */
#grid .hub-screen--practice .hub-section {
  margin-top: 0 !important;
  background: #2a2a2a !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 13px !important;
  padding: 14px 15px 13px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color 0.18s;
}
#grid .hub-screen--practice .hub-section:hover {
  border-color: rgba(255,255,255,0.14) !important;
}

/* Accent bar */
#grid .hub-screen--practice .hub-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 2px; z-index: 1;
  border-radius: 13px 13px 0 0;
}
#grid .hub-screen--practice .hub-section:nth-of-type(1)::before { background: linear-gradient(90deg,#4ea820,transparent) !important; }
#grid .hub-screen--practice .hub-section:nth-of-type(2)::before { background: linear-gradient(90deg,#0e9e8a,transparent) !important; }
#grid .hub-screen--practice .hub-section:nth-of-type(3)::before { background: linear-gradient(90deg,#6e62d0,transparent) !important; }
#grid .hub-screen--practice .hub-section:nth-of-type(4)::before { background: linear-gradient(90deg,#c47a10,transparent) !important; }

/* Section capsule label */
#grid .hub-section-capsule {
  display: block !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 0 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  margin-bottom: 10px !important;
}
#grid .hub-section-capsule--goi     { color: #7ed64a !important; }
#grid .hub-section-capsule--bunpou  { color: #1dc8b0 !important; }
#grid .hub-section-capsule--dokkai  { color: #a498f8 !important; }
#grid .hub-section-capsule--choukai { color: #f5a520 !important; }

/* Level buttons */
#grid .hub-screen--practice .hub-levels {
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

#grid .hub-screen--practice .hub-level-btn--patterns {
  flex: 1 !important;
  height: 28px !important;
  border-radius: 7px !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  background: rgba(255,255,255,0.04) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: #404040 !important;
  box-shadow: none !important;
}

/* Unlocked per section */
#grid .hub-screen--practice .hub-section:nth-of-type(1) .hub-level-btn--patterns:not([disabled]) {
  background: rgba(78,168,32,0.18) !important;
  border-color: rgba(78,168,32,0.35) !important;
  color: #7ed64a !important;
}
#grid .hub-screen--practice .hub-section:nth-of-type(2) .hub-level-btn--patterns:not([disabled]) {
  background: rgba(14,158,138,0.18) !important;
  border-color: rgba(14,158,138,0.35) !important;
  color: #1dc8b0 !important;
}
#grid .hub-screen--practice .hub-section:nth-of-type(3) .hub-level-btn--patterns:not([disabled]) {
  background: rgba(110,98,208,0.18) !important;
  border-color: rgba(110,98,208,0.35) !important;
  color: #a498f8 !important;
}
#grid .hub-screen--practice .hub-section:nth-of-type(4) .hub-level-btn--patterns:not([disabled]) {
  background: rgba(196,122,16,0.18) !important;
  border-color: rgba(196,122,16,0.35) !important;
  color: #f5a520 !important;
}

/* Locked */
#grid .hub-screen--practice .hub-level-btn--patterns[disabled] {
  background: rgba(255,255,255,0.03) !important;
  background-image: none !important;
  border-color: rgba(255,255,255,0.04) !important;
  color: #a3a3a3 !important;
  cursor: not-allowed !important;
}

/* Lock banner */
#grid .latihan-lock-banner {
  background: rgba(245,184,20,0.07) !important;
  border: 1px solid rgba(245,184,20,0.2) !important;
  border-radius: 10px !important;
  margin-bottom: 12px !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
}
#grid .latihan-lock-banner__inner {
  font-size: 13px !important;
  color: #a08030 !important;
  font-weight: 400 !important;
}
#grid .latihan-lock-banner__inner strong { color: #f5b820 !important; font-weight: 600 !important; }
#grid .latihan-lock-banner__inner svg    { color: #f5b820 !important; vertical-align: -2px; }


/* ════════════════════════════════════════════
   MOBILE — prefix #bottomNavHub
   ════════════════════════════════════════════ */

#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__header {
  background: #2a2a2a !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  color: #eeeeee !important;
  position: relative; overflow: hidden;
}
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__header::before {
  content: '';
  position: absolute;
  right: -20px; top: -40px;
  width: 200px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80,175,40,0.12) 0%, transparent 65%);
  pointer-events: none;
}
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__header h2 {
  color: #eeeeee !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  position: relative; z-index: 1;
}
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__header p {
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  position: relative; z-index: 1;
}

/* Kartu grup */
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__group {
  background: #2a2a2a !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  position: relative; overflow: hidden;
}
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__group::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 13px 13px 0 0;
}
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__group:nth-of-type(1)::before { background: linear-gradient(90deg,#4ea820,transparent); }
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__group:nth-of-type(2)::before { background: linear-gradient(90deg,#0e9e8a,transparent); }
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__group:nth-of-type(3)::before { background: linear-gradient(90deg,#6e62d0,transparent); }
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__group:nth-of-type(4)::before { background: linear-gradient(90deg,#c47a10,transparent); }

/* Capsule label */
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__capsule {
  display: block !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 0 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  margin-bottom: 10px !important;
}
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__capsule--goi     { color: #7ed64a !important; }
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__capsule--bunpou  { color: #1dc8b0 !important; }
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__capsule--dokkai  { color: #a498f8 !important; }
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__capsule--choukai { color: #f5a520 !important; }

/* Chip buttons */
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__chip {
  border-radius: 7px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  background: rgba(255,255,255,0.04) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: #505050 !important;
  box-shadow: none !important;
}

/* Chip unlocked */
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__group:nth-of-type(1) .bottom-nav-hub__chip:not([disabled]) {
  background: rgba(78,168,32,0.18) !important;
  border-color: rgba(78,168,32,0.35) !important;
  color: #7ed64a !important;
}
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__group:nth-of-type(2) .bottom-nav-hub__chip:not([disabled]) {
  background: rgba(14,158,138,0.18) !important;
  border-color: rgba(14,158,138,0.35) !important;
  color: #1dc8b0 !important;
}
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__group:nth-of-type(3) .bottom-nav-hub__chip:not([disabled]) {
  background: rgba(110,98,208,0.18) !important;
  border-color: rgba(110,98,208,0.35) !important;
  color: #a498f8 !important;
}
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__group:nth-of-type(4) .bottom-nav-hub__chip:not([disabled]) {
  background: rgba(196,122,16,0.18) !important;
  border-color: rgba(196,122,16,0.35) !important;
  color: #f5a520 !important;
}

/* Chip locked */
#bottomNavHub .bottom-nav-hub__screen--practice .bottom-nav-hub__chip[disabled] {
  background: rgba(255,255,255,0.03) !important;
  background-image: none !important;
  border-color: rgba(255,255,255,0.04) !important;
  color: #a3a3a3 !important;
  cursor: not-allowed !important;
}

/* ── Fix: mobile portrait wrapper putih ── */
#bottomNavHub .bottom-nav-hub__practice-wrapper {
  background: #232323 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
}

#bottomNavHub .bottom-nav-hub__practice-wrapper .bottom-nav-hub__group {
  background: #2a2a2a !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 13px !important;
  padding: 12px !important;
}

/* ================================================
   NihonByte — Menu (Belajar) Hub Override
   Paste di paling bawah style.css

   Breakpoint terpisah:
   1. Desktop          ≥769px
   2. Mobile Landscape ≤768px + orientation landscape
   3. Mobile Portrait  ≤768px + orientation portrait
   ================================================ */


/* ════════════════════════════════════════════════
   1. DESKTOP (≥769px)
   Render ke #grid via renderMenuHub()
   ════════════════════════════════════════════════ */

@media (min-width: 769px) {

  /* ── Header ─────────────────────────────────── */
  #grid .menu-hub-header {
    background: #2a2a2a !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    padding: 18px 22px !important;
    margin-bottom: 12px !important;
    position: relative;
    overflow: hidden;
  }

  #grid .menu-hub-header::before {
    content: '' !important;
    position: absolute !important;
    right: -30px; top: -50px;
    width: 260px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 65%);
    pointer-events: none;
  }

  #grid .menu-hub-header::after {
    content: 'メニュー' !important;
    position: absolute !important;
    right: 22px; top: 50%;
    transform: translateY(-50%);
    font-size: 52px; font-weight: 700;
    color: rgba(255,255,255,0.04);
    pointer-events: none; user-select: none;
    line-height: 1;
  }

  #grid .menu-hub-header h2 {
    margin: 0 0 4px !important;
    color: #ffffff !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    position: relative; z-index: 1;
  }

  #grid .menu-hub-title-pill {
    display: block !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: -0.4px !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #grid .menu-hub-header p {
    color: rgba(255,255,255,0.5) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    position: relative; z-index: 1;
  }

  /* ── Panel cards (Huruf, Grammar, Ungkapan) ── */
  #grid .menu-panel-grid {
    gap: 9px !important;
  }

  #grid .menu-panel-card {
    background: #2a2a2a !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    padding: 14px !important;
    min-height: unset !important;
    position: relative;
    overflow: hidden;
    transition: border-color 0.18s;
  }

  #grid .menu-panel-card:hover {
    border-color: rgba(255,255,255,0.16) !important;
  }

  #grid .menu-panel-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0;
    height: 2px;
    border-radius: 13px 13px 0 0;
  }

  #grid .menu-panel-card--letters::before  { background: linear-gradient(90deg, #d4537e, transparent) !important; }
  #grid .menu-panel-card--grammar::before  { background: linear-gradient(90deg, #7f77dd, transparent) !important; }
  #grid .menu-panel-card--expressions::before { background: linear-gradient(90deg, #ba7517, transparent) !important; }

  #grid .menu-panel-card__icon-wrap {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #grid .menu-panel-card--letters  .menu-panel-card__icon-wrap { background: rgba(212,83,126,0.12) !important; }
  #grid .menu-panel-card--grammar  .menu-panel-card__icon-wrap { background: rgba(127,119,221,0.12) !important; }
  #grid .menu-panel-card--expressions .menu-panel-card__icon-wrap { background: rgba(186,117,23,0.12) !important; }

  #grid .menu-panel-card__icon {
    width: 22px !important;
    height: 22px !important;
  }

  #grid .menu-panel-card strong {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
  }

  #grid .menu-panel-card span {
    color: rgba(255,255,255,0.5) !important;
    font-weight: 400 !important;
    font-size: 11px !important;
  }

  /* Hiragana & Katakana letter buttons */
  #grid .letter-circle-btn,
  #grid .letter-btn-pair .letter-circle-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    background: rgba(212,83,126,0.12) !important;
    border: 1px solid rgba(212,83,126,0.25) !important;
    color: #e07ab8 !important;
    font-size: 17px !important;
    box-shadow: none !important;
  }

  #grid .letter-circle-btn:hover {
    background: rgba(212,83,126,0.22) !important;
  }

  /* ── Kotoba section ──────────────────────────── */
  #grid .menu-hub-section-card--kotoba,
  #grid .menu-hub-section-card--kotoba .hub-details,
  #grid .menu-hub-section-card--kotoba .hub-details--always-open {
    background: #2a2a2a !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 13px !important;
    box-shadow: none !important;
  }

  #grid .menu-hub-section-card--kotoba {
    position: relative;
    overflow: hidden;
    padding: 14px 15px !important;
  }

  #grid .menu-hub-section-card--kotoba::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0;
    height: 2px;
    border-radius: 13px 13px 0 0;
    background: linear-gradient(90deg, #4ea820, transparent) !important;
  }

  #grid .menu-hub-section-card--kotoba .menu-section-title-pill {
    display: block !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 0 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #7ed64a !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    margin-bottom: 10px !important;
    text-shadow: none !important;
  }

  #grid .menu-hub-section-card--kotoba .hub-details--always-open {
    border: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
  }

  /* Kotoba category buttons */
  #grid .hub-level-btn--category {
    height: 26px !important;
    padding: 0 20px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    background: rgba(255,255,255,0.05) !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: background 0.15s, border-color 0.15s;
  }

  /* Hover warna per kategori — pakai data-type */
  #grid [data-type="noun"]:hover               { background: rgba(78,168,32,0.2) !important;   border-color: rgba(78,168,32,0.4) !important; }
  #grid [data-type="activity"]:hover           { background: rgba(14,158,138,0.2) !important;  border-color: rgba(14,158,138,0.4) !important; }
  #grid [data-type="noun-number-counter"]:hover { background: rgba(55,138,221,0.2) !important; border-color: rgba(55,138,221,0.4) !important; }
  #grid [data-type="noun-time-weather"]:hover  { background: rgba(55,138,221,0.2) !important;  border-color: rgba(55,138,221,0.4) !important; }
  #grid [data-type="noun-place"]:hover         { background: rgba(55,138,221,0.2) !important;  border-color: rgba(55,138,221,0.4) !important; }
  #grid [data-type="noun-house-family"]:hover  { background: rgba(212,83,126,0.2) !important;  border-color: rgba(212,83,126,0.4) !important; }
  #grid [data-type="noun-work"]:hover          { background: rgba(186,117,23,0.2) !important;  border-color: rgba(186,117,23,0.4) !important; }
  #grid [data-type="noun-government"]:hover    { background: rgba(186,117,23,0.2) !important;  border-color: rgba(186,117,23,0.4) !important; }
  #grid [data-type="noun-profession"]:hover    { background: rgba(186,117,23,0.2) !important;  border-color: rgba(186,117,23,0.4) !important; }
  #grid [data-type="noun-school"]:hover        { background: rgba(186,117,23,0.2) !important;  border-color: rgba(186,117,23,0.4) !important; }
  #grid [data-type="noun-restaurant"]:hover    { background: rgba(212,83,126,0.2) !important;  border-color: rgba(212,83,126,0.4) !important; }
  #grid [data-type="noun-food-drink"]:hover    { background: rgba(212,83,126,0.2) !important;  border-color: rgba(212,83,126,0.4) !important; }
  #grid [data-type="noun-color"]:hover         { background: rgba(212,83,126,0.2) !important;  border-color: rgba(212,83,126,0.4) !important; }
  #grid [data-type="noun-animal"]:hover        { background: rgba(14,158,138,0.2) !important;  border-color: rgba(14,158,138,0.4) !important; }
  #grid [data-type="noun-nature"]:hover        { background: rgba(14,158,138,0.2) !important;  border-color: rgba(14,158,138,0.4) !important; }
  #grid [data-type="noun-sports"]:hover        { background: rgba(110,98,208,0.2) !important;  border-color: rgba(110,98,208,0.4) !important; }
  #grid [data-type="noun-hobby"]:hover         { background: rgba(110,98,208,0.2) !important;  border-color: rgba(110,98,208,0.4) !important; }
  #grid [data-type="question"]:hover           { background: rgba(168,100,200,0.2) !important; border-color: rgba(168,100,200,0.4) !important; }
  #grid [data-type="adv"]:hover                { background: rgba(168,100,200,0.2) !important; border-color: rgba(168,100,200,0.4) !important; }
  #grid [data-type="noun-vehicle"]:hover       { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #grid [data-type="noun-factory"]:hover       { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #grid [data-type="noun-agriculture"]:hover   { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #grid [data-type="noun-caregiving"]:hover    { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #grid [data-type="noun-hotel"]:hover         { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #grid [data-type="noun-construction"]:hover  { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #grid [data-type="noun-body-medical"]:hover  { background: rgba(212,83,126,0.2) !important;  border-color: rgba(212,83,126,0.4) !important; }

  /* Active state (is-active class dari app.js) */
  #grid .hub-level-btn--category.is-active,
  #grid .hub-level-btn--category.active {
    background: rgba(78,168,32,0.18) !important;
    border-color: rgba(78,168,32,0.35) !important;
    color: #ffffff !important;
  }
}


/* ════════════════════════════════════════════════
   2. MOBILE LANDSCAPE (≤768px + landscape)
   Render ke #bottomNavHub via openBottomNavHub()
   ════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: landscape) {

  /* Header */
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__header {
    background: #2a2a2a !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    color: #ffffff !important;
    position: relative; overflow: hidden;
  }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__header h2 {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
  }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__header p {
    color: rgba(255,255,255,0.5) !important;
    font-weight: 400 !important;
  }

  /* Group cards */
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__group {
    background: #2a2a2a !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    position: relative; overflow: hidden;
  }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__group::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px; border-radius: 13px 13px 0 0;
  }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__group:nth-of-type(1)::before { background: linear-gradient(90deg,#d4537e,transparent); }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__group:nth-of-type(2)::before { background: linear-gradient(90deg,#7f77dd,transparent); }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba::before        { background: linear-gradient(90deg,#4ea820,transparent); }

  /* Capsule label */
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__capsule {
    display: block !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 0 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    margin-bottom: 10px !important;
  }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__capsule--letters  { color: #e07ab8 !important; }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__capsule--patterns { color: #a498f8 !important; }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__capsule--kotoba   { color: #7ed64a !important; }

  /* Chips */
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__chip {
    background: rgba(255,255,255,0.05) !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 7px !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    transition: background 0.15s, border-color 0.15s;
  }

  /* Kotoba chips hover per data-type */
  #bottomNavHub [data-type="noun"]:hover               { background: rgba(78,168,32,0.2) !important;   border-color: rgba(78,168,32,0.4) !important; }
  #bottomNavHub [data-type="activity"]:hover           { background: rgba(14,158,138,0.2) !important;  border-color: rgba(14,158,138,0.4) !important; }
  #bottomNavHub [data-type="noun-number-counter"]:hover { background: rgba(55,138,221,0.2) !important; border-color: rgba(55,138,221,0.4) !important; }
  #bottomNavHub [data-type="noun-time-weather"]:hover  { background: rgba(55,138,221,0.2) !important;  border-color: rgba(55,138,221,0.4) !important; }
  #bottomNavHub [data-type="noun-place"]:hover         { background: rgba(55,138,221,0.2) !important;  border-color: rgba(55,138,221,0.4) !important; }
  #bottomNavHub [data-type="noun-house-family"]:hover  { background: rgba(212,83,126,0.2) !important;  border-color: rgba(212,83,126,0.4) !important; }
  #bottomNavHub [data-type="noun-work"]:hover          { background: rgba(186,117,23,0.2) !important;  border-color: rgba(186,117,23,0.4) !important; }
  #bottomNavHub [data-type="noun-government"]:hover    { background: rgba(186,117,23,0.2) !important;  border-color: rgba(186,117,23,0.4) !important; }
  #bottomNavHub [data-type="noun-profession"]:hover    { background: rgba(186,117,23,0.2) !important;  border-color: rgba(186,117,23,0.4) !important; }
  #bottomNavHub [data-type="noun-school"]:hover        { background: rgba(186,117,23,0.2) !important;  border-color: rgba(186,117,23,0.4) !important; }
  #bottomNavHub [data-type="noun-restaurant"]:hover    { background: rgba(212,83,126,0.2) !important;  border-color: rgba(212,83,126,0.4) !important; }
  #bottomNavHub [data-type="noun-food-drink"]:hover    { background: rgba(212,83,126,0.2) !important;  border-color: rgba(212,83,126,0.4) !important; }
  #bottomNavHub [data-type="noun-color"]:hover         { background: rgba(212,83,126,0.2) !important;  border-color: rgba(212,83,126,0.4) !important; }
  #bottomNavHub [data-type="noun-animal"]:hover        { background: rgba(14,158,138,0.2) !important;  border-color: rgba(14,158,138,0.4) !important; }
  #bottomNavHub [data-type="noun-nature"]:hover        { background: rgba(14,158,138,0.2) !important;  border-color: rgba(14,158,138,0.4) !important; }
  #bottomNavHub [data-type="noun-sports"]:hover        { background: rgba(110,98,208,0.2) !important;  border-color: rgba(110,98,208,0.4) !important; }
  #bottomNavHub [data-type="noun-hobby"]:hover         { background: rgba(110,98,208,0.2) !important;  border-color: rgba(110,98,208,0.4) !important; }
  #bottomNavHub [data-type="question"]:hover           { background: rgba(168,100,200,0.2) !important; border-color: rgba(168,100,200,0.4) !important; }
  #bottomNavHub [data-type="adv"]:hover                { background: rgba(168,100,200,0.2) !important; border-color: rgba(168,100,200,0.4) !important; }
  #bottomNavHub [data-type="noun-vehicle"]:hover       { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #bottomNavHub [data-type="noun-factory"]:hover       { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #bottomNavHub [data-type="noun-agriculture"]:hover   { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #bottomNavHub [data-type="noun-caregiving"]:hover    { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #bottomNavHub [data-type="noun-hotel"]:hover         { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #bottomNavHub [data-type="noun-construction"]:hover  { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #bottomNavHub [data-type="noun-body-medical"]:hover  { background: rgba(212,83,126,0.2) !important;  border-color: rgba(212,83,126,0.4) !important; }
}


/* ════════════════════════════════════════════════
   3. MOBILE PORTRAIT (≤768px + portrait)
   Render ke #bottomNavHub via openBottomNavHub()
   ════════════════════════════════════════════════ */

@media (max-width: 768px) and (orientation: portrait) {

  /* Header */
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__header {
    background: #2a2a2a !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    color: #ffffff !important;
    position: relative; overflow: hidden;
  }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__header h2 {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
  }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__header p {
    color: rgba(255,255,255,0.5) !important;
    font-weight: 400 !important;
  }

  /* Group cards */
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__group {
    background: #2a2a2a !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    position: relative; overflow: hidden;
  }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__group::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px; border-radius: 13px 13px 0 0;
  }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__group:nth-of-type(1)::before { background: linear-gradient(90deg,#d4537e,transparent); }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__group:nth-of-type(2)::before { background: linear-gradient(90deg,#7f77dd,transparent); }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__group--kotoba::before        { background: linear-gradient(90deg,#4ea820,transparent); }

  /* Capsule label */
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__capsule {
    display: block !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 0 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    margin-bottom: 10px !important;
  }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__capsule--letters  { color: #e07ab8 !important; }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__capsule--patterns { color: #a498f8 !important; }
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__capsule--kotoba   { color: #7ed64a !important; }

  /* Chips */
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__chip {
    background: rgba(255,255,255,0.05) !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 7px !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    transition: background 0.15s, border-color 0.15s;
  }

  /* Kotoba chips hover per data-type */
  #bottomNavHub [data-type="noun"]:hover               { background: rgba(78,168,32,0.2) !important;   border-color: rgba(78,168,32,0.4) !important; }
  #bottomNavHub [data-type="activity"]:hover           { background: rgba(14,158,138,0.2) !important;  border-color: rgba(14,158,138,0.4) !important; }
  #bottomNavHub [data-type="noun-number-counter"]:hover { background: rgba(55,138,221,0.2) !important; border-color: rgba(55,138,221,0.4) !important; }
  #bottomNavHub [data-type="noun-time-weather"]:hover  { background: rgba(55,138,221,0.2) !important;  border-color: rgba(55,138,221,0.4) !important; }
  #bottomNavHub [data-type="noun-place"]:hover         { background: rgba(55,138,221,0.2) !important;  border-color: rgba(55,138,221,0.4) !important; }
  #bottomNavHub [data-type="noun-house-family"]:hover  { background: rgba(212,83,126,0.2) !important;  border-color: rgba(212,83,126,0.4) !important; }
  #bottomNavHub [data-type="noun-work"]:hover          { background: rgba(186,117,23,0.2) !important;  border-color: rgba(186,117,23,0.4) !important; }
  #bottomNavHub [data-type="noun-government"]:hover    { background: rgba(186,117,23,0.2) !important;  border-color: rgba(186,117,23,0.4) !important; }
  #bottomNavHub [data-type="noun-profession"]:hover    { background: rgba(186,117,23,0.2) !important;  border-color: rgba(186,117,23,0.4) !important; }
  #bottomNavHub [data-type="noun-school"]:hover        { background: rgba(186,117,23,0.2) !important;  border-color: rgba(186,117,23,0.4) !important; }
  #bottomNavHub [data-type="noun-restaurant"]:hover    { background: rgba(212,83,126,0.2) !important;  border-color: rgba(212,83,126,0.4) !important; }
  #bottomNavHub [data-type="noun-food-drink"]:hover    { background: rgba(212,83,126,0.2) !important;  border-color: rgba(212,83,126,0.4) !important; }
  #bottomNavHub [data-type="noun-color"]:hover         { background: rgba(212,83,126,0.2) !important;  border-color: rgba(212,83,126,0.4) !important; }
  #bottomNavHub [data-type="noun-animal"]:hover        { background: rgba(14,158,138,0.2) !important;  border-color: rgba(14,158,138,0.4) !important; }
  #bottomNavHub [data-type="noun-nature"]:hover        { background: rgba(14,158,138,0.2) !important;  border-color: rgba(14,158,138,0.4) !important; }
  #bottomNavHub [data-type="noun-sports"]:hover        { background: rgba(110,98,208,0.2) !important;  border-color: rgba(110,98,208,0.4) !important; }
  #bottomNavHub [data-type="noun-hobby"]:hover         { background: rgba(110,98,208,0.2) !important;  border-color: rgba(110,98,208,0.4) !important; }
  #bottomNavHub [data-type="question"]:hover           { background: rgba(168,100,200,0.2) !important; border-color: rgba(168,100,200,0.4) !important; }
  #bottomNavHub [data-type="adv"]:hover                { background: rgba(168,100,200,0.2) !important; border-color: rgba(168,100,200,0.4) !important; }
  #bottomNavHub [data-type="noun-vehicle"]:hover       { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #bottomNavHub [data-type="noun-factory"]:hover       { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #bottomNavHub [data-type="noun-agriculture"]:hover   { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #bottomNavHub [data-type="noun-caregiving"]:hover    { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #bottomNavHub [data-type="noun-hotel"]:hover         { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #bottomNavHub [data-type="noun-construction"]:hover  { background: rgba(196,122,16,0.2) !important;  border-color: rgba(196,122,16,0.4) !important; }
  #bottomNavHub [data-type="noun-body-medical"]:hover  { background: rgba(212,83,126,0.2) !important;  border-color: rgba(212,83,126,0.4) !important; }

  /* Wrapper putih (portrait-specific) */
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__practice-wrapper {
    background: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: none !important;
  }
}

/* Menu hub polish sesuai scope revisi */
@media (min-width: 769px) {
  #grid .menu-hub-title-pill {
    font-size: 24px !important;
  }

  #grid .menu-hub-section-card--kotoba .menu-section-title-pill {
    font-size: 14px !important;
  }

  #grid .hub-level-btn--category {
    font-size: 17px !important;
  }

  #grid .letter-btn-pair {
    gap: 10px !important;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__header h2 {
    font-size: 1.1rem !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__capsule {
    font-size: 13px !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__chip {
    font-size: 12px !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__letter-btn-row {
    gap: 10px !important;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  #bottomNavHub .bottom-nav-hub__screen--menu {
    background: #232323 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: none !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__practice-wrapper {
    background: #232323 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: none !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__header h2 {
    font-size: 1.1rem !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__capsule {
    font-size: 13px !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__chip {
    font-size: 16px !important;
	Padding: 0 18px !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-card {
    background: #2a2a2a !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 18px 18px 0 0;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-card--letters::before {
    background: linear-gradient(90deg, #d4537e, transparent) !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-card[data-menu-action="patterns"]::before {
    background: linear-gradient(90deg, #7f77dd, transparent) !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-card--expressions::before {
    background: linear-gradient(90deg, #ba7517, transparent) !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-body strong {
    color: #ffffff !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-body > span {
    color: rgba(255,255,255,0.5) !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon {
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon--letters {
    background: rgba(212,83,126,0.12) !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon--grammar {
    background: rgba(127,119,221,0.12) !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__menu-icon--expressions {
    background: rgba(186,117,23,0.12) !important;
  }

  #bottomNavHub .bottom-nav-hub__screen--menu .bottom-nav-hub__letter-btn {
    background: rgba(212,83,126,0.12) !important;
    border: 1px solid rgba(212,83,126,0.25) !important;
    color: #e07ab8 !important;
    box-shadow: none !important;
  }
}

/* =============================================================================
   FAVORIT THEME OVERRIDE — Gaya Latihan
   File  : favorit-override.css
   Muat  : setelah style.css di <head>
   Revisi: edit per blok breakpoint, tidak ada yang tabrakan satu sama lain

   Struktur:
   1. CSS Variables
   2. BASE        — tema (warna, bg) berlaku semua ukuran layar
   3. DESKTOP     — @media (min-width: 769px)
   4. MOBILE      — @media (max-width: 767px)  [generic mobile]
   5. PORTRAIT    — @media (max-width: 767px) and (orientation: portrait)
   6. LANDSCAPE   — @media (orientation: landscape) and (max-height: 520px)
   ============================================================================= */


/* =============================================================================
   1. CSS VARIABLES
   ============================================================================= */
:root {
  --fav-accent-vocab    : #1D9E75;
  --fav-accent-grammar  : #7F77DD;
  --fav-bg-banner       : #181818;
  --fav-bg-section      : #161616;
  --fav-border          : #2a2a2a;
  --fav-border-inner    : #222222;
  --fav-text-muted      : #888888;
  --fav-text-count      : #666666;
}


/* =============================================================================
   2. BASE — TEMA (berlaku semua ukuran, jangan taruh layout di sini)
   ============================================================================= */

/* --- Banner (hub-header) --------------------------------------------------- */

.favorit-hub-header.hub-header.menu-hub-header {
  background         : var(--fav-bg-banner) !important;
  border             : 1px solid var(--fav-border) !important;
  box-shadow         : none !important;
  backdrop-filter    : none !important;
  -webkit-backdrop-filter: none !important;
  position           : relative;
  overflow           : hidden;
}

/* watermark 文 via pseudo-element, tidak perlu sentuh app.js */
.favorit-hub-header::after {
  content          : '文';
  position         : absolute;
  right            : 22px;
  top              : 50%;
  transform        : translateY(-50%);
  font-size        : 72px;
  opacity          : 0.06;
  pointer-events   : none;
  font-family      : 'Noto Serif JP', serif;
  color            : #ffffff;
  line-height      : 1;
  user-select      : none;
}

.favorit-hub-header h2,
.favorit-hub-header .menu-hub-title-pill {
  color: #ffffff !important;
}

.favorit-hub-header p {
  color        : var(--fav-text-muted) !important;
  margin-bottom: 0 !important;
}

/* Pill bookmark icon color */
.favorit-hub-header .favorit-title-pill {
  background: transparent !important;
}

/* --- Section card ---------------------------------------------------------- */

/* Reset padding agar header section rata border */
.menu-hub-screen .menu-hub-section-card.favorit-card-section,
.favorit-card-section {
  background   : var(--fav-bg-section) !important;
  border       : 1px solid var(--fav-border) !important;
  box-shadow   : none !important;
  padding      : 0 !important;
  overflow     : hidden !important;
  border-radius: 16px !important;
}

/* Gap antar elemen dalam section = 0, pakai padding internal */
.favorit-section {
  gap: 0 !important;
}

/* Vocab section — border-top teal */
.favorit-section--vocab.favorit-card-section {
  border-top: 2.5px solid var(--fav-accent-vocab) !important;
}

/* Grammar section — border-top purple */
.favorit-section--grammar.favorit-card-section {
  border-top: 2.5px solid var(--fav-accent-grammar) !important;
}

/* Margin: hapus negative margin bawaan overview */
.favorit-overview-screen .favorit-section:first-of-type {
  margin-top: 0 !important;
}

/* --- Section head ---------------------------------------------------------- */

.favorit-section .favorit-section-head {
  padding       : 16px 18px 14px !important;
  border-bottom : 1px solid var(--fav-border-inner) !important;
}

/* --- Section tag (elemen baru dari app.js) --------------------------------- */

.favorit-section-tag {
  display    : inline-flex;
  align-items: center;
  gap        : 7px;
  margin-bottom: 7px;
  font-size  : 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.favorit-section-tag__dot {
  width       : 7px;
  height      : 7px;
  border-radius: 50%;
  flex-shrink : 0;
  display     : inline-block;
}

.favorit-section-tag--vocab  .favorit-section-tag__dot   { background: var(--fav-accent-vocab); }
.favorit-section-tag--vocab  .favorit-section-tag__label { color: var(--fav-accent-vocab); }
.favorit-section-tag--grammar .favorit-section-tag__dot  { background: var(--fav-accent-grammar); }
.favorit-section-tag--grammar .favorit-section-tag__label{ color: var(--fav-accent-grammar); }

.favorit-section-head__count,
.favorit-section-head p {
  color      : var(--fav-text-count) !important;
  margin     : 0 !important;
  font-size  : 0.88rem;
}

/* --- Cards row padding (vocab) --------------------------------------------- */

.favorit-section .favorit-cards-row {
  padding: 14px 14px 4px !important;
}

/* --- Grammar grid padding (preview) --------------------------------------- */

.favorit-section .favorit-grammar-grid {
  padding: 14px 14px 4px !important;
}

/* --- Section footer (see more) --------------------------------------------- */

.favorit-section .favorit-section-footer {
  padding: 8px 18px 14px !important;
  border-top: 1px solid var(--fav-border-inner);
}

/* See more button warna per section */
.favorit-section--vocab .favorit-see-more-btn {
  color: var(--fav-accent-vocab) !important;
}
.favorit-section--vocab .favorit-see-more-icon {
  background: rgba(29, 158, 117, 0.12) !important;
  color     : var(--fav-accent-vocab) !important;
}
.favorit-section--grammar .favorit-see-more-btn {
  color: var(--fav-accent-grammar) !important;
}
.favorit-section--grammar .favorit-see-more-icon {
  background: rgba(127, 119, 221, 0.12) !important;
  color     : var(--fav-accent-grammar) !important;
}

/* --- Detail: Favorit Kosakata header & body --------------------------------- */

.favorit-vocab-detail__header {
  background   : var(--fav-bg-banner) !important;
  border       : 1px solid var(--fav-border) !important;
  border-top   : 2.5px solid var(--fav-accent-vocab) !important;
  box-shadow   : none !important;
  border-radius: 16px !important;
}

.favorit-vocab-detail__body {
  background   : var(--fav-bg-section) !important;
  border       : 1px solid var(--fav-border) !important;
  box-shadow   : none !important;
  border-radius: 16px !important;
}

/* Back button dark — vocab */
.favorit-vocab-detail__icon-btn {
  background : #242424 !important;
  border     : 1px solid #333333 !important;
  color      : #aaaaaa !important;
  box-shadow : none !important;
}
.favorit-vocab-detail__icon-btn:hover {
  background : #2e2e2e !important;
  box-shadow : none !important;
  transform  : none !important;
}

/* Title pill color vocab */
.favorit-vocab-detail__title .favorit-title-pill {
  background: transparent !important;
  color     : #ffffff !important;
}
.favorit-vocab-detail__title .favorit-title-pill svg {
  color : var(--fav-accent-vocab);
  stroke: var(--fav-accent-vocab);
}

/* --- Detail: Favorit Grammar header & body --------------------------------- */

.favorit-grammar-detail__header {
  background   : var(--fav-bg-banner) !important;
  border       : 1px solid var(--fav-border) !important;
  border-top   : 2.5px solid var(--fav-accent-grammar) !important;
  box-shadow   : none !important;
  border-radius: 16px !important;
}

.favorit-grammar-detail__body {
  background   : var(--fav-bg-section) !important;
  border       : 1px solid var(--fav-border) !important;
  box-shadow   : none !important;
  border-radius: 16px !important;
}

/* Back button dark — grammar */
.favorit-grammar-detail__icon-btn {
  background : #242424 !important;
  border     : 1px solid #333333 !important;
  color      : #aaaaaa !important;
  box-shadow : none !important;
}
.favorit-grammar-detail__icon-btn:hover {
  background : #2e2e2e !important;
  box-shadow : none !important;
  transform  : none !important;
}

/* Title pill color grammar */
.favorit-grammar-detail__title .favorit-title-pill {
  background: transparent !important;
  color     : #ffffff !important;
}
.favorit-grammar-detail__title .favorit-title-pill svg {
  color : var(--fav-accent-grammar);
  stroke: var(--fav-accent-grammar);
}

/* --- Empty state ----------------------------------------------------------- */

.favorit-empty--section {
  background  : #1e1e1e !important;
  border-color: #333333 !important;
}
.favorit-empty-title {
  color: #555555 !important;
}


/* =============================================================================
   3. DESKTOP — @media (min-width: 769px)
   Layout grid, sizing card — hanya edit blok ini untuk revisi desktop
   ============================================================================= */
@media (min-width: 769px) {

  .favorit-hub-header.hub-header.menu-hub-header {
    border-radius: 18px !important;
  }

  /* Section cards: radius konsisten dengan hub lain */
  .menu-hub-screen .menu-hub-section-card.favorit-card-section {
    border-radius: 18px !important;
    width        : 100% !important;
    max-width    : 100% !important;
  }

  .favorit-vocab-detail__header,
  .favorit-grammar-detail__header {
    border-radius: 18px !important;
  }

  .favorit-vocab-detail__body,
  .favorit-grammar-detail__body {
    border-radius: 18px !important;
  }

  /* Grid vocab preview: 5 kolom */
  .favorit-section .favorit-cards-row--preview {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  /* Grid grammar preview: 5 kolom */
  .favorit-section .favorit-grammar-grid--preview {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  /* Grid vocab full (detail page): 5 kolom */
  .favorit-vocab-detail__body .favorit-cards-row--full {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  /* Grid grammar full (detail page): 5 kolom */
  .favorit-grammar-detail__body .favorit-grammar-grid--full {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

}


/* =============================================================================
   4. MOBILE GENERIC — @media (max-width: 767px)
   Override yang harus menang di semua kondisi mobile (portrait + landscape)
   Hanya edit blok ini untuk revisi yang berlaku kedua orientasi
   ============================================================================= */
@media (max-width: 767px) {

  /* Pastikan tema dark tetap menang di mobile (override !important dari style.css) */
  .favorit-card-section,
  .menu-hub-section-card.favorit-card-section {
    background   : var(--fav-bg-section) !important;
    border       : 1px solid var(--fav-border) !important;
    box-shadow   : none !important;
  }

  .favorit-section--vocab.favorit-card-section {
    border-top: 2.5px solid var(--fav-accent-vocab) !important;
  }

  .favorit-section--grammar.favorit-card-section {
    border-top: 2.5px solid var(--fav-accent-grammar) !important;
  }

  .favorit-hub-header.hub-header.menu-hub-header {
    background: var(--fav-bg-banner) !important;
  }

  .favorit-vocab-detail__header,
  .favorit-grammar-detail__header,
  .favorit-vocab-detail__body,
  .favorit-grammar-detail__body {
    box-shadow: none !important;
  }

}


/* =============================================================================
   5. MOBILE PORTRAIT — @media (max-width: 767px) and (orientation: portrait)
   Layout khusus portrait — hanya edit blok ini untuk revisi portrait
   ============================================================================= */
@media (max-width: 767px) and (orientation: portrait) {

  .favorit-hub-header.hub-header.menu-hub-header {
    border-radius: 14px !important;
  }

  .menu-hub-screen .menu-hub-section-card.favorit-card-section,
  .favorit-card-section {
    border-radius: 14px !important;
  }

  .favorit-vocab-detail__header,
  .favorit-grammar-detail__header,
  .favorit-vocab-detail__body,
  .favorit-grammar-detail__body {
    border-radius: 14px !important;
  }

  .favorit-section .favorit-section-head {
    padding: 14px 14px 12px !important;
  }

  .favorit-section .favorit-cards-row {
    padding: 10px 10px 4px !important;
  }

  .favorit-section .favorit-grammar-grid {
    padding: 10px 10px 4px !important;
  }

  .favorit-section .favorit-section-footer {
    padding: 8px 14px 12px !important;
  }

  /* Grid vocab preview: 3 kolom (portrait) */
  .favorit-section .favorit-cards-row--preview {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Grid grammar preview: 3 kolom (portrait) */
  .favorit-section .favorit-grammar-grid--preview {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Grid vocab full (detail): 3 kolom */
  .favorit-vocab-detail__body .favorit-cards-row--full {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Grid grammar full (detail): 3 kolom */
  .favorit-grammar-detail__body .favorit-grammar-grid--full {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Tag font kecil sedikit di portrait */
  .favorit-section-tag {
    font-size: 11px;
  }

  /* Watermark ukuran lebih kecil di portrait */
  .favorit-hub-header::after {
    font-size: 56px;
    right    : 16px;
  }

}


/* =============================================================================
   6. MOBILE LANDSCAPE — @media (orientation: landscape) and (max-height: 520px)
   Layout khusus landscape — hanya edit blok ini untuk revisi landscape
   ============================================================================= */
@media screen and (orientation: landscape) and (max-height: 520px) {

  .favorit-hub-header.hub-header.menu-hub-header {
    border-radius: 14px !important;
  }

  .menu-hub-screen .menu-hub-section-card.favorit-card-section,
  .favorit-card-section {
    border-radius: 14px !important;
  }

  .favorit-vocab-detail__header,
  .favorit-grammar-detail__header,
  .favorit-vocab-detail__body,
  .favorit-grammar-detail__body {
    border-radius: 14px !important;
  }

  .favorit-section .favorit-section-head {
    padding: 12px 16px 10px !important;
  }

  .favorit-section .favorit-cards-row {
    padding: 10px 12px 4px !important;
  }

  .favorit-section .favorit-grammar-grid {
    padding: 10px 12px 4px !important;
  }

  .favorit-section .favorit-section-footer {
    padding: 6px 16px 10px !important;
  }

  /* Grid vocab preview: 4 kolom (landscape) */
  .favorit-section .favorit-cards-row--preview {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* Grid grammar preview: 4 kolom (landscape) */
  .favorit-section .favorit-grammar-grid--preview {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* Grid vocab full (detail): 4 kolom */
  .favorit-vocab-detail__body .favorit-cards-row--full {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* Grid grammar full (detail): 4 kolom */
  .favorit-grammar-detail__body .favorit-grammar-grid--full {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* Watermark lebih kecil di landscape */
  .favorit-hub-header::after {
    font-size: 52px;
    right    : 14px;
  }

}

@media (max-width: 767px) and (orientation: portrait) {
  .favorit-overview-screen {
    gap: 10px !important;
  }

  .favorit-overview-screen .favorit-card-section {
    margin-bottom: 0 !important;
  }
}

/* =============================================
   GRAMMAR HUB — DESIGN OVERRIDE
   Hanya menyentuh .gr-hub dan turunannya.
   .gr-poster (halaman materi) tidak disentuh.

   Breakpoint sesuai app.js:
   - Desktop     : min-width: 769px  (DESKTOP_LAYOUT_QUERY line 72)
   - Mobile      : max-width: 767px  (line 964, 4078, 4329)
   - Landscape   : max-width: 767px + orientation: landscape
   - Portrait    : max-width: 767px + orientation: portrait  (line 4329)
   ============================================= */

/* ── Base (semua ukuran) ── */
.gr-hub {
  background: #111111 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  border: 1px solid #1e1e1e !important;
}

.gr-hub-head {
  background: #0f0f0f !important;
  border: 1px solid #1e1e1e !important;
  border-radius: 12px !important;
}

.gr-hub-head h2 {
  color: #ffffff !important;
  letter-spacing: -0.3px !important;
}

.gr-hub-head p {
  color: #ffffff !important;
}

.gr-level-filter-wrap {
  color: #ffffff !important;
  font-size: 0.75rem !important;
}

.gr-level-filter {
  background: #1a1a1a !important;
  color: #888 !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
}

.gr-brick {
  background: #141414 !important;
  border: 1px solid #1e1e1e !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.gr-brick::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #B83A1F;
  opacity: 0;
  border-radius: 12px 0 0 12px;
  transition: opacity 0.18s ease;
}

.gr-brick:hover {
  background: #181818 !important;
  border-color: #2a2a2a !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
}

.gr-brick:hover::before {
  opacity: 1;
}

.gr-brick-title {
  background: #1c0c09 !important;
  color: #D86040 !important;
  box-shadow: none !important;
  border: 1px solid #3a1a10 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  width: 50% !important;
  max-width: 50% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.gr-brick-desc {
  color: #e7e7e7 !important;
  font-weight: 400 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.gr-level-badge {
  background: #122012 !important;
  color: #458845 !important;
  border: 1px solid #1e3a1e !important;
  border-radius: 4px !important;
  font-size: 0.72rem !important;
  padding: 2px 7px !important;
}

.gr-hub-pagination {
  gap: 5px !important;
}

.gr-page-btn {
  background: transparent !important;
  border: 1px solid #1e1e1e !important;
  border-radius: 7px !important;
  color: #444 !important;
}

.gr-page-btn:hover {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
  color: #777 !important;
}

.gr-page-btn.active {
  background: #B83A1F !important;
  border-color: #B83A1F !important;
  color: #fff !important;
}

.gr-page-btn:disabled {
  opacity: 0.25 !important;
}

.gr-page-dots {
  color: #333 !important;
}

/* =============================================
   DESKTOP  ≥ 769px
   Sesuai DESKTOP_LAYOUT_QUERY = "(min-width: 769px)" — app.js line 72
   3 kolom, 12 kartu per halaman
   ============================================= */
@media (min-width: 769px) {
  .gr-hub {
    padding: 22px !important;
    border-radius: 20px !important;
  }

  .gr-hub-head {
    padding: 14px 18px !important;
    margin-bottom: 18px !important;
    flex-direction: row !important;
    align-items: flex-end !important;
  }

  .gr-hub-head h2 {
    font-size: 1.25rem !important;
  }

  .gr-hub-head p {
    font-size: 0.8rem !important;
  }

  .gr-brick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .gr-brick {
    min-height: 120px !important;
    padding: 16px 15px 14px !important;
  }

  .gr-brick-title {
    font-size: 0.90rem !important;
    margin-bottom: 8px !important;
  }

  .gr-brick-desc {
    font-size: 0.88rem !important;
    margin-bottom: 14px !important;
  }

  .gr-page-btn {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.78rem !important;
  }
}

/* =============================================
   MOBILE LANDSCAPE  ≤ 767px + landscape
   Sesuai orientation check — app.js line 215, 2578
   2 kolom, header tetap row
   ============================================= */
@media (max-width: 767px) and (orientation: landscape) {
  .gr-hub {
    padding: 14px !important;
    border-radius: 14px !important;
    width: calc(100% - 16px) !important;
  }

  .gr-hub-head {
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px 14px !important;
    margin-bottom: 12px !important;
    gap: 10px !important;
  }

  .gr-hub-head h2 {
    font-size: 1rem !important;
  }

  .gr-hub-head p {
    font-size: 0.73rem !important;
    margin-top: 2px !important;
  }

  .gr-brick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .gr-brick {
    min-height: 100px !important;
    padding: 12px 13px 11px !important;
  }

  .gr-brick-title {
    font-size: 0.88rem !important;
    padding: 4px 10px !important;
    margin-bottom: 6px !important;
  }

  .gr-brick-desc {
    font-size: 0.82rem !important;
    margin-bottom: 10px !important;
  }

  .gr-page-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.74rem !important;
  }
}

/* =============================================
   MOBILE PORTRAIT  ≤ 767px + portrait
   Sesuai isMobilePortrait() — app.js line 4329
   1 kolom full-width, header collapse, 10 kartu
   ============================================= */
@media (max-width: 767px) and (orientation: portrait) {
  .gr-hub {
    padding: 12px !important;
    border-radius: 14px !important;
    width: calc(100% - 16px) !important;
  }

  .gr-hub-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
  }

  .gr-hub-head h2 {
    font-size: 1.1rem !important;
  }

  .gr-hub-head p {
    font-size: 0.76rem !important;
    margin-top: 3px !important;
  }

  .gr-level-filter {
    width: 100% !important;
    min-width: unset !important;
  }

  .gr-brick-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .gr-brick {
    min-height: 90px !important;
    padding: 12px 13px 11px !important;
    overflow: hidden !important;
  }

  .gr-brick-title {
    font-size: 1rem !important;
    padding: 5px 11px !important;
    margin-bottom: 6px !important;
    width: 50% !important;
    max-width: 50% !important;
  }

  .gr-brick-desc {
    font-size: 0.85rem !important;
    margin-bottom: 10px !important;
  }

  .gr-hub-pagination {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .gr-page-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.76rem !important;
  }
}

/* =============================================
   GRAMMAR POSTER (MATERI) — DESIGN OVERRIDE
   Hanya menyentuh .gr-poster dan turunannya.
   .gr-hub (halaman daftar) tidak disentuh.

   Breakpoint sesuai app.js:
   - Desktop     : min-width: 769px  (DESKTOP_LAYOUT_QUERY line 72)
   - Mobile landscape : max-width: 767px + orientation: landscape
   - Mobile portrait  : max-width: 767px + orientation: portrait (line 4329)
   ============================================= */

/* ── Base (semua ukuran) ── */
.gr-poster {
  background: #111111 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  border: 1px solid #1e1e1e !important;
}

.gr-back-btn {
  background: #111 !important;
  border: 1px solid #1e1e1e !important;
  border-radius: 7px !important;
  color: #aaaaaa !important;
  font-weight: 500 !important;
  font-size: 0.72rem !important;
  padding: 5px 10px !important;
  gap: 6px !important;
  transition: color 0.15s, border-color 0.15s !important;
}

.gr-back-btn:hover {
  color: #cccccc !important;
  border-color: #2a2a2a !important;
}

.gr-poster h2 {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  margin-bottom: 8px !important;
}

.gr-poster-summary {
  color: #aaaaaa !important;
  font-size: 0.99rem !important;
  line-height: 1.8 !important;
  margin-bottom: 0 !important;
}

.gr-poster h2 + .gr-poster-summary {
  padding-bottom: 18px !important;
  border-bottom: 1px solid #1e1e1e !important;
  margin-bottom: 22px !important;
}

.gr-poster h3 {
  color: #555555 !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  margin: 0 0 14px !important;
}

.gr-group-panel {
  background: #141414 !important;
  border: 1px solid #1c1c1c !important;
  border-radius: 12px !important;
  padding: 0 !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
}

.gr-group-panel h4 {
  background: #1a0c08 !important;
  border: 1px solid #3a1a10 !important;
  border-radius: 7px !important;
  color: #D86040 !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  padding: 5px 13px !important;
  margin: 14px 16px 8px !important;
  width: fit-content !important;
  word-break: normal !important;
}

.gr-group-desc {
  color: #aaaaaa !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  margin: 0 16px 12px !important;
}

.gr-sentence-card {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid #1a1a1a !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.gr-sentence-box {
  background: #2A2A2A !important;
  border: 20px !important;
  border-bottom: 1px solid #1a1a1a !important;
  border-radius: 20px !important;
  padding: 14px 48px 14px 16px !important;
}

/* Semua p dalam sentence-box default terang */
.gr-sentence-box p {
  color: #cccccc !important;
}

.gr-sentence-jp {
  color: #ffffff !important;
  font-size: 0.94rem !important;
  font-weight: 500 !important;
}

.gr-sentence-card [data-role="sentence-kana"] {
  color: #999999 !important;
  font-size: 1rem !important;
}

.gr-play-btn {
  background: #1c0c09 !important;
  border: 1px solid #3a1a10 !important;
  color: #C0401E !important;
  box-shadow: none !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
}

.gr-play-btn:hover {
  background: #2a1210 !important;
  border-color: #C0401E !important;
}

.gr-play-btn svg {
  width: 13px !important;
  height: 13px !important;
}

.gr-sentence-actions {
  padding: 10px 16px !important;
  margin: 0 !important;
}

.gr-shuffle-btn {
  background: #0f0f0f !important;
  border: 1px solid #1c1c1c !important;
  border-radius: 7px !important;
  color: #aaaaaa !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  padding: 6px 11px !important;
  transition: color 0.15s, border-color 0.15s !important;
}

.gr-shuffle-btn:hover {
  color: #C0401E !important;
  border-color: #3a1a10 !important;
}

.gr-shuffle-icon svg {
  stroke: currentColor !important;
}

/* =============================================
   DESKTOP  ≥ 769px
   ============================================= */
@media (min-width: 769px) {
  .gr-poster {
    padding: 15px !important;
    border-radius: 20px !important;
  }

  .gr-poster h2 {
    font-size: 1.75rem !important;
    margin-top: 10px !important;
  }

  .gr-group-panel h4 {
    font-size: 0.94rem !important;
  }

  .gr-sentence-jp {
    font-size: 1.5rem !important;
  }
}

/* =============================================
   MOBILE LANDSCAPE  ≤ 767px + landscape
   ============================================= */
@media (max-width: 767px) and (orientation: landscape) {
  .gr-poster {
    padding: 14px !important;
    border-radius: 14px !important;
    width: calc(100% - 16px) !important;
  }

  .gr-poster h2 {
    font-size: 1.3rem !important;
    margin-top: 8px !important;
  }

  .gr-poster-summary {
    font-size: 0.74rem !important;
  }

  .gr-group-panel h4 {
    font-size: 0.86rem !important;
    margin: 12px 13px 7px !important;
  }

  .gr-group-desc {
    font-size: 0.7rem !important;
    margin: 0 13px 10px !important;
  }

  .gr-sentence-box {
    padding: 11px 44px 11px 13px !important;
  }

  .gr-sentence-jp {
    font-size: 0.88rem !important;
  }

  .gr-sentence-card [data-role="sentence-kana"] {
    font-size: 0.65rem !important;
  }

  .gr-sentence-actions {
    padding: 8px 13px !important;
  }

  .gr-play-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    top: 10px !important;
    right: 10px !important;
  }
}

/* =============================================
   MOBILE PORTRAIT  ≤ 767px + portrait
   ============================================= */
@media (max-width: 767px) and (orientation: portrait) {
  .gr-poster {
    padding: 12px !important;
    border-radius: 14px !important;
    width: auto !important;
  }

  .gr-poster h2 {
    font-size: 1.2rem !important;
    margin-top: 8px !important;
    line-height: 1.3 !important;
  }

  .gr-poster-summary {
    font-size: 0.74rem !important;
    line-height: 1.75 !important;
  }

  .gr-group-panel {
    border-radius: 10px !important;
    margin-bottom: 8px !important;
  }

  .gr-group-panel h4 {
    font-size: 0.88rem !important;
    margin: 12px 13px 7px !important;
  }

  .gr-group-desc {
    font-size: 0.7rem !important;
    margin: 0 13px 10px !important;
  }

  .gr-sentence-box {
    padding: 12px 44px 12px 13px !important;
  }

  .gr-sentence-jp {
    font-size: 1.3rem !important;
  }

  .gr-sentence-card [data-role="sentence-kana"] {
    font-size: 0.95rem !important;
  }

  .gr-sentence-actions {
    padding: 8px 13px !important;
  }

  .gr-play-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    top: 10px !important;
    right: 10px !important;
  }

  .gr-shuffle-btn {
    font-size: 0.65rem !important;
    padding: 5px 10px !important;
  }
}

/* =============================================
   POSTER HURUF — THEME OVERRIDE
   HANYA mengubah warna, background, border, shadow.
   Font size, height, gap, padding, layout = TIDAK DISENTUH.

   Breakpoint sesuai app.js:
   - Desktop     : min-width: 769px  (DESKTOP_LAYOUT_QUERY line 72)
   - Mobile landscape : max-width: 767px + orientation: landscape
   - Mobile portrait  : max-width: 767px + orientation: portrait (line 4329)
   ============================================= */

/* ── Base tema (semua ukuran) ── */

.letter-poster {
  background: #111111 !important;
  border: 1px solid #1e1e1e !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.letter-poster h2 {
  color: #ffffff !important;
}

.letter-poster-subtitle {
  color: #C0401E !important;
}

/* Kotak karakter */
.letter-cell {
  background: #161616 !important;
  border: 1px solid #1e1e1e !important;
  color: #e8e4dc !important;
  box-shadow: none !important;
}

.letter-cell:hover {
  background: #1e1e1e !important;
  border-color: #C0401E !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Label kolom (A, KA, SA, ...) */
.letter-label {
  background: #161616 !important;
  border: 1px solid #1e1e1e !important;
  color: #555555 !important;
}

/* Label vokal (A, I, U, E, O) — baris kiri */
.label-vokal {
  background: #1c0c09 !important;
  border-color: #3a1a10 !important;
  color: #C0401E !important;
}

/* Kotak kosong */
.letter-empty {
  background: #0f0f0f !important;
  border: 1px dashed #1a1a1a !important;
  box-shadow: none !important;
}

/* =============================================
   DESKTOP  ≥ 769px
   ============================================= */
@media (min-width: 769px) {
  .letter-poster {
    background: #111111 !important;
    border: 1px solid #1e1e1e !important;
    box-shadow: none !important;
  }

  .letter-cell {
    background: #161616 !important;
    border-color: #1e1e1e !important;
    color: #e8e4dc !important;
    box-shadow: none !important;
  }

  .letter-cell:hover {
    background: #1e1e1e !important;
    border-color: #C0401E !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  .letter-label {
    background: #161616 !important;
    border-color: #1e1e1e !important;
    color: #555555 !important;
  }

  .label-vokal {
    background: #1c0c09 !important;
    border-color: #3a1a10 !important;
    color: #C0401E !important;
  }

  .letter-empty {
    background: #0f0f0f !important;
    border-color: #1a1a1a !important;
  }
}

/* =============================================
   MOBILE LANDSCAPE  ≤ 767px + landscape
   ============================================= */
@media (max-width: 767px) and (orientation: landscape) {
  .letter-poster {
    background: #111111 !important;
    border: 1px solid #1e1e1e !important;
    box-shadow: none !important;
  }

  .letter-cell {
    background: #161616 !important;
    border-color: #1e1e1e !important;
    color: #e8e4dc !important;
    box-shadow: none !important;
  }

  .letter-cell:hover {
    background: #1e1e1e !important;
    border-color: #C0401E !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  .letter-label {
    background: #161616 !important;
    border-color: #1e1e1e !important;
    color: #555555 !important;
  }

  .label-vokal {
    background: #1c0c09 !important;
    border-color: #3a1a10 !important;
    color: #C0401E !important;
  }

  .letter-empty {
    background: #0f0f0f !important;
    border-color: #1a1a1a !important;
  }
}

/* =============================================
   MOBILE PORTRAIT  ≤ 767px + portrait
   ============================================= */
@media (max-width: 767px) and (orientation: portrait) {
  .letter-poster {
    background: #111111 !important;
    border: 1px solid #1e1e1e !important;
    box-shadow: none !important;
  }

  .letter-cell {
    background: #161616 !important;
    border-color: #1e1e1e !important;
    color: #e8e4dc !important;
    box-shadow: none !important;
    transition: none !important;
  }

  .letter-cell:hover {
    background: #1e1e1e !important;
    border-color: #C0401E !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  .letter-label {
    background: #161616 !important;
    border-color: #1e1e1e !important;
    color: #555555 !important;
    transition: none !important;
  }

  .label-vokal {
    background: #1c0c09 !important;
    border-color: #3a1a10 !important;
    color: #C0401E !important;
    transition: none !important;
  }

  .letter-empty {
    background: #0f0f0f !important;
    border-color: #1a1a1a !important;
    box-shadow: none !important;
    transition: none !important;
  }
}

/* =============================================
   DASBOR — THEME OVERRIDE
   HANYA mengubah warna, background, border, shadow.
   Font size, height, gap, padding, layout = TIDAK DISENTUH.

   Breakpoint sesuai app.js:
   - Desktop     : min-width: 769px  (DESKTOP_LAYOUT_QUERY line 72)
   - Mobile landscape : max-width: 767px + orientation: landscape
   - Mobile portrait  : max-width: 767px + orientation: portrait (line 4329)
   ============================================= */

/* ── Shell & Cover ── */
.dashboard-shell {
  background: #111111 !important;
  box-shadow: none !important;
  border: 1px solid #1e1e1e !important;
}

.dashboard-cover {
  background: #0f0f0f !important;
}

/* ── Profile Card ── */
.dashboard-profile-card {
  background: #141414 !important;
  box-shadow: none !important;
  border: 1px solid #1e1e1e !important;
}

.dashboard-avatar-frame {
  border-color: #1e1e1e !important;
  background: #1a1a1a !important;
  box-shadow: none !important;
}

.dashboard-profile-card h2 {
  color: #ffffff !important;
}

.dashboard-email {
  color: #3a3a3a !important;
}

/* ── Settings & Camera Btn ── */
.dashboard-settings-btn {
  background: #1a1a1a !important;
  color: #555 !important;
  box-shadow: none !important;
  border: 1px solid #242424 !important;
}

.dashboard-settings-btn:hover {
  background: #222 !important;
  color: #888 !important;
}

.dashboard-camera-btn {
  background: #C0401E !important;
  color: #fff !important;
  box-shadow: none !important;
  border: 2px solid #0d0d0d !important;
}

/* ── Progress ── */
.dash-progress-wrap {
  background: #161616 !important;
  border: 1px solid #1e1e1e !important;
}

.dash-progress-label {
  color: #888 !important;
}

.dash-progress-pct {
  color: #C0401E !important;
}

.dash-progress-pct--ready {
  color: #458845 !important;
}

.dash-progress-bar-outer {
  background: #1e1e1e !important;
}

.dash-progress-bar-fill {
  background: #C0401E !important;
}

.dash-progress-bar-fill--ready {
  background: #458845 !important;
}

.dash-progress-breakdown {
  color: #3a3a3a !important;
}

.dash-progress-unlock-hint {
  background: rgba(69, 136, 69, 0.08) !important;
  border-color: rgba(69, 136, 69, 0.2) !important;
  color: #458845 !important;
}

/* ── History Panel ── */
.dashboard-history-panel h3 {
  color: #cccccc !important;
}

.dashboard-history-sub {
  color: #383838 !important;
}

.dashboard-history-item {
  background: #111 !important;
  border: 1px solid #1c1c1c !important;
}

.dashboard-history-item:hover {
  border-color: #2a2a2a !important;
}

.dashboard-history-date {
  color: #333333 !important;
}

.dashboard-history-item h4 {
  color: #bbbbbb !important;
}

.dashboard-level {
  color: #383838 !important;
}

.dashboard-history-score {
  color: #C0401E !important;
}

.dashboard-history-meta {
  color: #383838 !important;
}

.dashboard-empty {
  background: #111 !important;
  border-color: #1e1e1e !important;
  color: #383838 !important;
}

.dashboard-error {
  background: #1a0808 !important;
  color: #C0401E !important;
}

/* ── Modal ── */
.dashboard-modal {
  background: #141414 !important;
  box-shadow: none !important;
  border: 1px solid #1e1e1e !important;
}

.dashboard-modal h4 {
  color: #ffffff !important;
}

.dashboard-modal-close {
  color: #555 !important;
}

.dashboard-cancel-btn {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
  color: #aaaaaa !important;
}

.dashboard-save-btn {
  background: #C0401E !important;
}

/* ── Profile Form ── */
.dashboard-profile-form label {
  color: #aaaaaa !important;
}

.dashboard-profile-form input[type="text"] {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
  color: #e0dbd2 !important;
}

.dashboard-form-note {
  color: #3a3a3a !important;
}

.dashboard-avatar-tools {
  background: #161616 !important;
  border-color: #1e1e1e !important;
}

.dashboard-avatar-tools > p {
  color: #aaaaaa !important;
}

.avatar-preset-btn {
  background: #1a1a1a !important;
  border-color: #2a2a2a !important;
}

.avatar-preset-btn:hover,
.avatar-preset-btn.active {
  border-color: #C0401E !important;
  box-shadow: none !important;
}

.dashboard-upload-label {
  color: #555 !important;
}

.dashboard-upload-disabled {
  color: #3a3a3a !important;
}

/* =============================================
   DESKTOP  ≥ 769px
   ============================================= */
@media (min-width: 769px) {
  .dashboard-shell {
    background: #111111 !important;
    border: 1px solid #1e1e1e !important;
    box-shadow: none !important;
  }

  .dashboard-profile-card {
    background: #141414 !important;
    box-shadow: none !important;
    border: 1px solid #1e1e1e !important;
  }

  .dashboard-history-item {
    background: #111 !important;
    border-color: #1c1c1c !important;
  }
}

/* =============================================
   MOBILE LANDSCAPE  ≤ 767px + landscape
   ============================================= */
@media (max-width: 767px) and (orientation: landscape) {
  .dashboard-shell {
    background: #111111 !important;
    border: 1px solid #1e1e1e !important;
    box-shadow: none !important;
  }

  .dashboard-profile-card {
    background: #141414 !important;
    box-shadow: none !important;
    border: 1px solid #1e1e1e !important;
  }

  .dashboard-history-item {
    background: #111 !important;
    border-color: #1c1c1c !important;
  }
}

/* =============================================
   MOBILE PORTRAIT  ≤ 767px + portrait
   ============================================= */
@media (max-width: 767px) and (orientation: portrait) {
  .dashboard-shell {
    background: #111111 !important;
    border: 1px solid #1e1e1e !important;
    box-shadow: none !important;
  }

  .dashboard-profile-card {
    background: #141414 !important;
    box-shadow: none !important;
    border: 1px solid #1e1e1e !important;
  }

  .dashboard-history-item {
    background: #111 !important;
    border-color: #1c1c1c !important;
  }

  .dashboard-modal {
    background: #141414 !important;
    border: 1px solid #1e1e1e !important;
    box-shadow: none !important;
  }
}