/**
 * NIHONGO KISO — Student Dashboard Styles (UI/UX Pro Max Edition)
 * Crafted with Bento Grid Architecture, 6 Themed Contexts, & Anti-AI-Slop Craft
 * 
 * Themes supported:
 * 1. Cyber Indigo (Modern Tech LMS)
 * 2. Kyoto Zen (Traditional Washi & Torii Vermilion)
 * 3. Tokyo Arcade (Neo-Brutalist & Tactile 3D)
 * 4. Sakura Minimalist (Soft Porcelain Pastel)
 * 5. Mori Matcha (Botanical Nature & Zero Eye-Strain)
 * 6. Shinkansen Glass (Cyberpunk Frosted Obsidian)
 */

/* ── 1. GLOBAL DESIGN TOKENS ──────────────────────────────── */
:root {
  --nk-dash-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans JP', sans-serif;
  --nk-dash-font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans JP', sans-serif;
  --nk-dash-radius-sm: 8px;
  --nk-dash-radius-md: 12px;
  --nk-dash-radius-lg: 18px;
  --nk-dash-radius-xl: 24px;
  
  --nk-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --nk-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Fallback Base Tokens */
  --nk-dash-canvas-bg: #f8fafc;
  --nk-dash-surface: #ffffff;
  --nk-dash-surface-hover: #ffffff;
  --nk-dash-surface-muted: #f1f5f9;
  --nk-dash-border: #e2e8f0;
  --nk-dash-border-subtle: rgba(226, 232, 240, 0.7);
  --nk-dash-text-main: #0f172a;
  --nk-dash-text-muted: #64748b;
  --nk-dash-text-soft: #94a3b8;
  
  --nk-dash-primary: #6366f1;
  --nk-dash-primary-hover: #4f46e5;
  --nk-dash-primary-glow: rgba(99, 102, 241, 0.25);
  --nk-dash-accent: #06b6d4;
  --nk-dash-accent-gold: #f59e0b;
  --nk-dash-success: #10b981;
  --nk-dash-danger: #ef4444;
  
  --nk-dash-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.04);
  --nk-dash-shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
  --nk-dash-shadow-hover: 0 12px 28px -4px rgba(15, 23, 42, 0.1), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
  --nk-dash-inner-rim: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  
  --nk-dash-header-bg: linear-gradient(135deg, #090d16 0%, #0f172a 50%, #1e1b4b 100%);
  --nk-dash-header-glow: radial-gradient(circle at 85% 20%, rgba(99, 102, 241, 0.28) 0%, rgba(6, 182, 212, 0.12) 40%, transparent 70%);
  --nk-dash-header-text: #ffffff;
}

/* ── 2. THEME-SPECIFIC HARMONIES ──────────────────────────── */

/* Theme 1: Cyber Indigo (Default Modern LMS) */
.nk-dash-wrap.nk-theme-1 {
  --nk-dash-font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Noto Sans JP', sans-serif;
  --nk-dash-primary: #6366f1;
  --nk-dash-primary-hover: #4f46e5;
  --nk-dash-primary-glow: rgba(99, 102, 241, 0.3);
  --nk-dash-accent: #06b6d4;
  --nk-dash-header-bg: linear-gradient(135deg, #080c14 0%, #0f172a 55%, #1e1b4b 100%);
  --nk-dash-header-glow: radial-gradient(circle at 85% 25%, rgba(99, 102, 241, 0.3) 0%, rgba(6, 182, 212, 0.15) 45%, transparent 70%);
  --nk-dash-canvas-bg: #f8fafc;
  --nk-dash-surface: #ffffff;
  --nk-dash-border: #e2e8f0;
}

/* Theme 2: Kyoto Zen (Traditional Washi & Torii Vermilion) */
.nk-dash-wrap.nk-theme-2 {
  --nk-dash-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Noto Serif JP', serif;
  --nk-dash-primary: #c0392b;
  --nk-dash-primary-hover: #a93226;
  --nk-dash-primary-glow: rgba(192, 57, 43, 0.25);
  --nk-dash-accent: #b8860b;
  --nk-dash-header-bg: linear-gradient(135deg, #191614 0%, #292524 55%, #3d1a16 100%);
  --nk-dash-header-glow: radial-gradient(circle at 85% 25%, rgba(192, 57, 43, 0.35) 0%, rgba(184, 134, 11, 0.22) 45%, transparent 75%);
  --nk-dash-canvas-bg: #fbf8f3;
  --nk-dash-surface: #ffffff;
  --nk-dash-border: #e8decb;
  --nk-dash-text-main: #24211e;
  --nk-dash-text-muted: #57534e;
}

/* Theme 3: Tokyo Pop Arcade (Neo-Brutalist & Tactile 3D) */
.nk-dash-wrap.nk-theme-3 {
  --nk-dash-font-sans: 'Plus Jakarta Sans', 'M PLUS Rounded 1c', sans-serif;
  --nk-dash-primary: #2563eb;
  --nk-dash-primary-hover: #1d4ed8;
  --nk-dash-primary-glow: rgba(37, 99, 235, 0.3);
  --nk-dash-accent: #f59e0b;
  --nk-dash-header-bg: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 55%, #2563eb 100%);
  --nk-dash-header-glow: radial-gradient(circle at 85% 25%, rgba(245, 158, 11, 0.35) 0%, rgba(16, 185, 129, 0.25) 45%, transparent 70%);
  --nk-dash-canvas-bg: #f0f4ff;
  --nk-dash-surface: #ffffff;
  --nk-dash-border: #1e293b;
  --nk-dash-shadow-card: 3px 3px 0 #1e293b;
  --nk-dash-shadow-hover: 5px 5px 0 #1e293b;
  --nk-dash-radius-md: 10px;
  --nk-dash-radius-lg: 14px;
}

/* Theme 4: Sakura Minimalist (Soft Porcelain Pastel) */
.nk-dash-wrap.nk-theme-4 {
  --nk-dash-font-sans: 'Plus Jakarta Sans', 'Zen Maru Gothic', sans-serif;
  --nk-dash-primary: #f43f5e;
  --nk-dash-primary-hover: #e11d48;
  --nk-dash-primary-glow: rgba(244, 63, 94, 0.22);
  --nk-dash-accent: #fbbf24;
  --nk-dash-header-bg: linear-gradient(135deg, #4c0519 0%, #881337 55%, #9f1239 100%);
  --nk-dash-header-glow: radial-gradient(circle at 85% 25%, rgba(253, 164, 175, 0.35) 0%, rgba(251, 191, 36, 0.2) 45%, transparent 75%);
  --nk-dash-canvas-bg: #fff9fa;
  --nk-dash-surface: #ffffff;
  --nk-dash-border: #fecdd3;
  --nk-dash-text-main: #334155;
}

/* Theme 5: Mori Forest & Zen Matcha (Botanical Nature) */
.nk-dash-wrap.nk-theme-5 {
  --nk-dash-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Noto Serif JP', serif;
  --nk-dash-primary: #2d6a4f;
  --nk-dash-primary-hover: #1b4332;
  --nk-dash-primary-glow: rgba(45, 106, 79, 0.25);
  --nk-dash-accent: #b45309;
  --nk-dash-header-bg: linear-gradient(135deg, #0b1d14 0%, #133526 55%, #1b4332 100%);
  --nk-dash-header-glow: radial-gradient(circle at 85% 25%, rgba(45, 106, 79, 0.4) 0%, rgba(180, 83, 9, 0.22) 45%, transparent 75%);
  --nk-dash-canvas-bg: #f6f8f5;
  --nk-dash-surface: #ffffff;
  --nk-dash-border: #d1e2d7;
  --nk-dash-text-main: #1b2620;
  --nk-dash-text-muted: #526359;
}

/* Theme 6: Shinkansen Neo-Glass (Tokyo Night Cyberpunk & Frosted Obsidian) */
.nk-dash-wrap.nk-theme-6 {
  --nk-dash-font-sans: 'Space Grotesk', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --nk-dash-primary: #06b6d4;
  --nk-dash-primary-hover: #0891b2;
  --nk-dash-primary-glow: rgba(6, 182, 212, 0.35);
  --nk-dash-accent: #a855f7;
  --nk-dash-header-bg: linear-gradient(135deg, #030712 0%, #0b0f19 55%, #111827 100%);
  --nk-dash-header-glow: radial-gradient(circle at 85% 25%, rgba(6, 182, 212, 0.32) 0%, rgba(168, 85, 247, 0.25) 45%, transparent 70%);
  --nk-dash-canvas-bg: #070b14;
  --nk-dash-surface: rgba(15, 23, 42, 0.85);
  --nk-dash-surface-hover: rgba(15, 23, 42, 0.95);
  --nk-dash-surface-muted: rgba(30, 41, 59, 0.7);
  --nk-dash-border: rgba(56, 189, 248, 0.22);
  --nk-dash-border-subtle: rgba(56, 189, 248, 0.12);
  --nk-dash-text-main: #f8fafc;
  --nk-dash-text-muted: #94a3b8;
  --nk-dash-inner-rim: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ── 3. MAIN DASHBOARD WRAPPER ────────────────────────────── */
.nk-dash-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 56px;
  font-family: var(--nk-dash-font-sans);
  color: var(--nk-dash-text-main);
  background: var(--nk-dash-canvas-bg);
  box-sizing: border-box;
  transition: background 0.3s var(--nk-ease-smooth);
}

.nk-dash-wrap * {
  box-sizing: border-box;
}

/* ── 4. HEADER HERO BANNER (BENTO EXECUTIVE HERO) ─────────── */
.nk-dash-header {
  background: var(--nk-dash-header-bg);
  border-radius: var(--nk-dash-radius-xl);
  padding: 30px 32px 34px;
  color: #ffffff;
  position: relative;
  overflow: visible;
  z-index: 40;
  box-shadow: 0 14px 36px -6px rgba(15, 23, 42, 0.25);
  margin-bottom: 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nk-dash-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nk-dash-header-glow);
  pointer-events: none;
  border-radius: inherit;
}

.nk-dash-top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  position: relative;
  z-index: 50;
  flex-wrap: wrap;
}

/* Themed Pill Buttons */
.nk-dash-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s var(--nk-ease-spring);
}

.nk-dash-pill-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.nk-dash-pill-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.nk-dash-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

/* User Greeting & Halo Avatar */
.nk-dash-user-info {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-grow: 1;
  min-width: 280px;
}

.nk-dash-avatar-wrapper {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.nk-dash-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  background: #0f172a;
}

.nk-avatar-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.4);
  pointer-events: none;
  animation: nk-spin-slow 28s linear infinite;
}

@keyframes nk-spin-slow {
  100% { transform: rotate(360deg); }
}

.nk-dash-welcome {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nk-dash-greeting-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.nk-dash-welcome h2 {
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  color: #ffffff;
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.nk-user-level-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  backdrop-filter: blur(8px);
}

.nk-user-level-chip.is-n3 {
  background: rgba(168, 85, 247, 0.25);
  border-color: rgba(168, 85, 247, 0.45);
}

.nk-user-level-chip.is-n4 {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.45);
}

.nk-user-level-chip.is-n5 {
  background: rgba(14, 165, 233, 0.25);
  border-color: rgba(14, 165, 233, 0.45);
}

.nk-dash-welcome-sub {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nk-divider-dot {
  opacity: 0.5;
}

.nk-dash-logout-link {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: underline;
  font-size: 12.5px;
  transition: color 0.15s ease;
}

.nk-dash-logout-link:hover {
  color: #ffffff;
}

/* Membership VIP Bento Card */
.nk-dash-membership-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--nk-dash-radius-md);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 290px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.nk-dash-mem-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nk-dash-mem-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nk-dash-mem-caption {
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 800;
  letter-spacing: 0.8px;
}

.nk-dash-mem-tier-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.nk-dash-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nk-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-block;
  animation: nk-pulse-dot 2s infinite ease-in-out;
}

@keyframes nk-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.nk-badge-lifetime {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
}

.nk-badge-duration {
  background: linear-gradient(135deg, var(--nk-dash-primary) 0%, #0284c7 100%);
  color: #ffffff;
}

.nk-badge-expired {
  background: #ef4444;
  color: #ffffff;
}

.nk-badge-free {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.nk-dash-expiry-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.45;
}

.nk-mem-desc-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nk-text-danger {
  color: #fca5a5 !important;
}

.nk-dash-expiry-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}

.nk-dash-expiry-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  border-radius: 999px;
  transition: width 0.6s var(--nk-ease-spring);
}

.nk-dash-mem-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.nk-dash-btn-upgrade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: var(--nk-dash-radius-sm);
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
  transition: all 0.22s var(--nk-ease-spring);
  cursor: pointer;
}

.nk-dash-btn-upgrade:hover {
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.55);
}

.nk-dash-btn-renew {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--nk-dash-accent-gold);
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: var(--nk-dash-radius-sm);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
  transition: all 0.2s var(--nk-ease-spring);
  cursor: pointer;
}

.nk-dash-btn-renew:hover {
  background: #d97706;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.45);
}

/* ── 5. SEGMENTED CONTROL TABS (MAIN NAVIGATION) ──────────── */
.nk-dash-main-nav {
  display: flex;
  gap: 8px;
  background: var(--nk-dash-surface-muted);
  border: 1px solid var(--nk-dash-border-subtle);
  padding: 6px;
  border-radius: var(--nk-dash-radius-md);
  margin-bottom: 28px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

.nk-dash-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 22px;
  font-weight: 700;
  font-size: 13.5px;
  border: none;
  border-radius: calc(var(--nk-dash-radius-md) - 3px);
  cursor: pointer;
  background: transparent;
  color: var(--nk-dash-text-muted);
  transition: all 0.2s var(--nk-ease-spring);
  white-space: nowrap;
}

.nk-dash-nav-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.6);
  color: var(--nk-dash-text-main);
}

.nk-dash-nav-btn.active {
  background: var(--nk-dash-surface);
  color: var(--nk-dash-primary);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
  font-weight: 800;
  border: 1px solid var(--nk-dash-border-subtle);
}

/* ── 6. BENTO BOX STATS GRID (TOP KPIS) ────────────────────── */
.nk-dash-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.nk-dash-stat-card {
  background: var(--nk-dash-surface);
  border: 1px solid var(--nk-dash-border);
  border-radius: var(--nk-dash-radius-lg);
  padding: 24px;
  box-shadow: var(--nk-dash-shadow-card);
  box-shadow: var(--nk-dash-inner-rim), var(--nk-dash-shadow-card);
  transition: transform 0.22s var(--nk-ease-spring), box-shadow 0.22s var(--nk-ease-spring), border-color 0.22s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nk-dash-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--nk-dash-shadow-hover);
  border-color: var(--nk-dash-primary);
}

.nk-stat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.nk-dash-stat-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: var(--nk-dash-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s var(--nk-ease-spring);
}

.nk-dash-stat-card:hover .nk-dash-stat-icon-wrap {
  transform: scale(1.08);
}

.nk-icon-indigo {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  color: #4338ca;
}

.nk-icon-emerald {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #065f46;
}

.nk-icon-amber {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
}

.nk-stat-micro-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  letter-spacing: 0.3px;
}

.nk-pill-green {
  background: #dcfce7;
  color: #15803d;
}

.nk-pill-amber {
  background: #fef3c7;
  color: #b45309;
}

.nk-dash-stat-content h4 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--nk-dash-text-muted);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.nk-dash-stat-val {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.nk-val-big {
  font-size: 32px;
  font-weight: 900;
  color: var(--nk-dash-text-main);
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.nk-val-pct {
  font-size: 20px;
  font-weight: 800;
  opacity: 0.8;
}

.nk-val-denom {
  font-size: 14px;
  font-weight: 700;
  color: var(--nk-dash-text-muted);
}

.nk-val-level {
  font-size: 22px;
  font-weight: 800;
  color: var(--nk-dash-primary);
  line-height: 1.2;
}

/* Progress track bar inside KPI */
.nk-dash-track-bar {
  width: 100%;
  height: 6px;
  background: var(--nk-dash-surface-muted);
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0 6px;
}

.nk-dash-track-fill {
  height: 100%;
  background: var(--nk-dash-primary);
  border-radius: 999px;
  transition: width 0.6s var(--nk-ease-spring);
}

.nk-dash-stat-sub {
  font-size: 12px;
  color: var(--nk-dash-text-muted);
  line-height: 1.4;
}

/* ── 7. BENTO SPOTLIGHT: LANJUTKAN BELAJAR TERAKHIR ────────── */
.nk-dash-resume-card {
  background: var(--nk-dash-surface);
  border: 1px solid var(--nk-dash-border);
  border-radius: var(--nk-dash-radius-xl);
  padding: 26px 30px;
  box-shadow: var(--nk-dash-inner-rim), var(--nk-dash-shadow-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s var(--nk-ease-spring), box-shadow 0.22s var(--nk-ease-spring);
}

.nk-dash-resume-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: var(--nk-dash-primary);
}

.nk-dash-resume-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--nk-dash-shadow-hover);
}

.nk-resume-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.nk-beacon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nk-dash-primary);
  display: inline-block;
  box-shadow: 0 0 0 0 var(--nk-dash-primary-glow);
  animation: nk-beacon-wave 1.8s infinite;
}

@keyframes nk-beacon-wave {
  0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.6); }
  70% { box-shadow: 0 0 0 9px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

.nk-kicker-text {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--nk-dash-primary);
}

.nk-kicker-ch-tag {
  background: var(--nk-dash-surface-muted);
  color: var(--nk-dash-text-muted);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
}

.nk-resume-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--nk-dash-text-main);
  margin: 0 0 4px;
  letter-spacing: -0.2px;
}

.nk-resume-subtitle {
  font-size: 13.5px;
  color: var(--nk-dash-text-muted);
  margin: 0;
  line-height: 1.45;
}

.nk-dash-resume-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--nk-dash-primary);
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14.5px;
  font-weight: 800;
  padding: 13px 26px;
  border-radius: var(--nk-dash-radius-md);
  box-shadow: 0 4px 16px var(--nk-dash-primary-glow);
  transition: all 0.2s var(--nk-ease-spring);
  flex-shrink: 0;
  cursor: pointer;
}

.nk-btn-play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.nk-dash-resume-btn:hover {
  background: var(--nk-dash-primary-hover);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 24px var(--nk-dash-primary-glow);
}

/* ── 8. CHAPTER DIRECTORY (MATRIX & FILTERS) ──────────────── */
.nk-dash-directory {
  background: var(--nk-dash-surface);
  border: 1px solid var(--nk-dash-border);
  border-radius: var(--nk-dash-radius-xl);
  padding: 30px;
  box-shadow: var(--nk-dash-inner-rim), var(--nk-dash-shadow-card);
}

.nk-dash-dir-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--nk-dash-border-subtle);
}

.nk-dir-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.nk-dash-dir-header h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--nk-dash-text-main);
  margin: 0;
  letter-spacing: -0.3px;
}

.nk-dir-count-pill {
  font-size: 11.5px;
  font-weight: 800;
  background: var(--nk-dash-surface-muted);
  color: var(--nk-dash-text-muted);
  padding: 3px 10px;
  border-radius: 999px;
}

.nk-dash-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.nk-dash-tab-btn {
  background: var(--nk-dash-surface-muted);
  border: 1px solid transparent;
  color: var(--nk-dash-text-muted);
  padding: 8px 16px;
  border-radius: var(--nk-dash-radius-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s var(--nk-ease-spring);
}

.nk-dash-tab-btn:hover {
  background: var(--nk-dash-border);
  color: var(--nk-dash-text-main);
}

.nk-dash-tab-btn.active {
  background: var(--nk-dash-primary);
  color: #ffffff;
  border-color: var(--nk-dash-primary);
  box-shadow: 0 2px 8px var(--nk-dash-primary-glow);
  font-weight: 800;
}

/* Chapter Bento Cards Matrix */
.nk-dash-chapters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 16px;
}

.nk-dash-ch-card {
  background: var(--nk-dash-surface);
  border: 1.5px solid var(--nk-dash-border);
  border-radius: var(--nk-dash-radius-md);
  padding: 16px 18px;
  text-decoration: none !important;
  color: var(--nk-dash-text-main) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 110px;
  transition: all 0.22s var(--nk-ease-spring);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.nk-dash-ch-card:hover {
  border-color: var(--nk-dash-primary);
  transform: translateY(-3px);
  box-shadow: var(--nk-dash-shadow-hover);
}

.nk-dash-ch-card.completed {
  border-color: #a7f3d0;
  background: rgba(240, 253, 244, 0.7);
}

.nk-dash-ch-card.in-progress {
  border-color: var(--nk-dash-primary);
  box-shadow: 0 0 0 2px var(--nk-dash-primary-glow);
}

.nk-dash-ch-card.locked {
  background: var(--nk-dash-surface-muted);
  opacity: 0.85;
}

.nk-dash-unit-card {
  border-left: 4px solid #6366f1 !important;
}

.nk-dash-ch-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.nk-dash-ch-num {
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.3px;
  background: #f1f5f9;
  color: #334155;
}

.nk-level-n5 { background: #e0f2fe; color: #0369a1; }
.nk-level-n4 { background: #d1fae5; color: #047857; }
.nk-level-n3 { background: #f3e8ff; color: #7e22ce; }
.nk-num-lms  { background: #e0e7ff; color: #4338ca; }

/* Status Badge Pills with SVG */
.nk-dash-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
}

.nk-dash-status-pill.is-done {
  background: #dcfce7;
  color: #15803d;
}

.nk-dash-status-pill.is-inprog {
  background: #e0e7ff;
  color: #4338ca;
}

.nk-dash-status-pill.is-locked {
  background: #f1f5f9;
  color: #94a3b8;
}

.nk-dash-status-pill.is-free {
  background: #e0f2fe;
  color: #0284c7;
}

.nk-dash-ch-title {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 4px;
  color: var(--nk-dash-text-main);
}

.nk-dash-ch-sub {
  font-size: 12px;
  color: var(--nk-dash-text-muted);
  margin: 0;
  line-height: 1.4;
}

.nk-badge-chip {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
}

/* ── 9. BONUS MODULES GRID ────────────────────────────────── */
.nk-dash-bonus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.nk-dash-bonus-card {
  background: var(--nk-dash-surface);
  border: 1.5px solid var(--nk-dash-border);
  border-radius: var(--nk-dash-radius-lg);
  padding: 22px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  text-decoration: none !important;
  color: var(--nk-dash-text-main) !important;
  box-shadow: var(--nk-dash-shadow-card);
  transition: all 0.22s var(--nk-ease-spring);
}

.nk-dash-bonus-card:hover {
  transform: translateY(-3px);
  border-color: var(--nk-dash-accent-gold);
  box-shadow: var(--nk-dash-shadow-hover);
}

.nk-dash-bonus-icon {
  width: 58px;
  height: 58px;
  border-radius: var(--nk-dash-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s var(--nk-ease-spring);
}

.nk-dash-bonus-card:hover .nk-dash-bonus-icon {
  transform: scale(1.08);
}

.nk-icon-sakura {
  background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%);
  color: #e11d48;
}

.nk-icon-sim {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1d4ed8;
}

.nk-dash-bonus-content h4 {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 5px;
  color: var(--nk-dash-text-main);
}

.nk-dash-bonus-content p {
  font-size: 13px;
  color: var(--nk-dash-text-muted);
  margin: 0 0 10px;
  line-height: 1.45;
}

.nk-bonus-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--nk-dash-primary);
  transition: gap 0.15s ease;
}

.nk-dash-bonus-card:hover .nk-bonus-cta-link {
  gap: 9px;
}

/* ── 10. GUEST LOGIN CARD (PRO MAX CLEAN) ──────────────────── */
.nk-dash-login-wrap {
  max-width: 480px;
  margin: 48px auto;
  background: var(--nk-dash-surface);
  border: 1px solid var(--nk-dash-border);
  border-radius: var(--nk-dash-radius-xl);
  padding: 38px 34px;
  box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.12);
  text-align: center;
}

.nk-guest-top-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.nk-guest-emblem {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nk-emblem-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--nk-dash-primary-glow) 0%, transparent 70%);
}

.nk-emblem-icon {
  color: var(--nk-dash-primary);
}

.nk-guest-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--nk-dash-text-main);
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}

.nk-guest-sub {
  font-size: 14px;
  color: var(--nk-dash-text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}

.nk-guest-alert-pill {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: var(--nk-dash-radius-md);
  padding: 12px 16px;
  margin-bottom: 22px;
  font-size: 12.5px;
  color: #0369a1;
  text-align: left;
  line-height: 1.55;
}

.nk-login-form-container {
  text-align: left;
  margin-bottom: 12px;
}

.nk-login-form-container form p {
  margin-bottom: 14px;
}

.nk-login-form-container label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--nk-dash-text-main);
  margin-bottom: 6px;
}

.nk-login-form-container input[type="text"],
.nk-login-form-container input[type="password"] {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--nk-dash-border);
  border-radius: var(--nk-dash-radius-sm);
  font-size: 14px;
  transition: all 0.2s ease;
  background: var(--nk-dash-surface);
  color: var(--nk-dash-text-main);
}

.nk-login-form-container input[type="text"]:focus,
.nk-login-form-container input[type="password"]:focus {
  outline: none;
  border-color: var(--nk-dash-primary);
  box-shadow: 0 0 0 3px var(--nk-dash-primary-glow);
}

.nk-login-form-container input[type="submit"] {
  width: 100%;
  background: var(--nk-dash-primary);
  color: #ffffff;
  border: none;
  padding: 12px 20px;
  border-radius: var(--nk-dash-radius-sm);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s var(--nk-ease-spring);
  box-shadow: 0 4px 14px var(--nk-dash-primary-glow);
}

.nk-login-form-container input[type="submit"]:hover {
  background: var(--nk-dash-primary-hover);
  transform: translateY(-1px);
}

.nk-guest-links {
  text-align: right;
  margin-bottom: 20px;
}

.nk-lost-pw-link {
  font-size: 12.5px;
  color: var(--nk-dash-text-muted);
  text-decoration: none;
  font-weight: 600;
}

.nk-lost-pw-link:hover {
  color: var(--nk-dash-primary);
  text-decoration: underline;
}

.nk-guest-footer {
  border-top: 1px solid var(--nk-dash-border);
  padding-top: 18px;
  font-size: 13px;
  color: var(--nk-dash-text-muted);
}

.nk-reg-link {
  color: var(--nk-dash-primary);
  font-weight: 800;
  text-decoration: none;
  margin-left: 4px;
}

.nk-reg-link:hover {
  text-decoration: underline;
}

.nk-sample-tag {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--nk-dash-text-muted);
}

/* ── 11. STUDENT THEME SELECTOR TAB ───────────────────────── */
.nk-dash-theme-section {
  padding: 6px 0 32px;
}

.nk-dash-theme-intro {
  background: var(--nk-dash-surface);
  border: 1px solid var(--nk-dash-border);
  border-radius: var(--nk-dash-radius-xl);
  padding: 26px 30px;
  margin-bottom: 24px;
  box-shadow: var(--nk-dash-inner-rim), var(--nk-dash-shadow-card);
}

.nk-dash-theme-pill {
  display: inline-block;
  background: #eff6ff;
  color: var(--nk-dash-primary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
  border: 1px solid #bfdbfe;
}

.nk-dash-theme-intro h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--nk-dash-text-main);
  margin: 0 0 6px;
  letter-spacing: -0.2px;
}

.nk-dash-theme-intro p {
  font-size: 14px;
  color: var(--nk-dash-text-muted);
  margin: 0;
  line-height: 1.55;
}

.nk-dash-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px;
}

.nk-dash-theme-card {
  background: var(--nk-dash-surface);
  border: 2px solid var(--nk-dash-border);
  border-radius: var(--nk-dash-radius-lg);
  overflow: hidden;
  transition: all 0.25s var(--nk-ease-spring);
  display: flex;
  flex-direction: column;
  box-shadow: var(--nk-dash-shadow-card);
  cursor: pointer;
}

.nk-dash-theme-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--nk-dash-shadow-hover);
  border-color: var(--nk-dash-primary);
}

.nk-dash-theme-card.is-active {
  border-color: var(--nk-dash-primary);
  box-shadow: 0 0 0 3px var(--nk-dash-primary-glow), var(--nk-dash-shadow-hover);
}

.nk-dash-theme-banner {
  height: 120px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nk-dash-theme-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}

.nk-dash-theme-active-tag {
  background: #10b981;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.nk-dash-theme-preview-title {
  font-size: 19px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.2px;
}

.nk-dash-theme-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.nk-dash-theme-desc {
  font-size: 13px;
  color: var(--nk-dash-text-muted);
  line-height: 1.55;
  margin: 0 0 16px;
  flex-grow: 1;
}

.nk-dash-theme-pal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.nk-dash-theme-pal-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--nk-dash-text-muted);
}

.nk-dash-theme-swatches {
  display: flex;
  gap: 6px;
  align-items: center;
}

.nk-dash-theme-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  display: inline-block;
}

.nk-dash-theme-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.nk-dash-theme-tag-chip {
  background: var(--nk-dash-surface-muted);
  color: var(--nk-dash-text-muted);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
}

.nk-dash-theme-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--nk-dash-border-subtle);
  gap: 12px;
}

.nk-btn-apply-theme {
  flex-grow: 1;
  padding: 10px 16px;
  border-radius: var(--nk-dash-radius-sm);
  font-size: 13.5px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  background: var(--nk-dash-primary);
  color: #ffffff;
  transition: all 0.2s var(--nk-ease-spring);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: 0 3px 10px var(--nk-dash-primary-glow);
}

.nk-btn-apply-theme:hover:not(:disabled) {
  background: var(--nk-dash-primary-hover);
  transform: translateY(-1px);
}

.nk-btn-apply-theme.is-selected {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  box-shadow: none;
  cursor: default;
}

.nk-dash-theme-preview-link {
  font-size: 12.5px;
  color: var(--nk-dash-primary);
  text-decoration: none;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: var(--nk-dash-radius-sm);
  transition: all 0.15s ease;
}

.nk-dash-theme-preview-link:hover {
  background: var(--nk-dash-surface-muted);
  text-decoration: underline;
}

/* ── 12. RESPONSIVENESS (MOBILE & TABLET) ─────────────────── */
@media (max-width: 900px) {
  .nk-dash-header-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .nk-dash-membership-card {
    min-width: 100%;
  }
  .nk-dash-resume-card {
    flex-direction: column;
    align-items: stretch;
  }
  .nk-dash-resume-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .nk-dash-wrap {
    padding: 16px 12px 40px;
  }
  .nk-dash-header {
    padding: 22px 18px 24px;
    border-radius: var(--nk-dash-radius-lg);
  }
  .nk-dash-welcome h2 {
    font-size: 21px;
  }
  .nk-dash-avatar-wrapper {
    width: 60px;
    height: 60px;
  }
  .nk-dash-avatar {
    width: 60px;
    height: 60px;
  }
  .nk-dash-stats-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .nk-dash-chapters-grid {
    grid-template-columns: 1fr;
  }
  .nk-dash-theme-grid {
    grid-template-columns: 1fr;
  }
  .nk-dash-directory {
    padding: 20px 16px;
  }
  .nk-dash-dir-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── 13. ACCESSIBILITY & PREFERS-REDUCED-MOTION ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid var(--nk-dash-primary);
  outline-offset: 2px;
}

/* Fix Language Dropdown Popover Z-Index */
.nk-dash-lang-wrap {
  position: relative;
  z-index: 100;
}


/* ── 15. MODULAR CURRICULUM GROUPS & INTERACTIVE EXAM HUB (UI/UX PRO MAX) ── */
.nk-curriculum-groups-flow {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 24px;
}

.nk-curriculum-group-wrap {
  background: var(--nk-dash-surface, #ffffff);
  border: 1px solid var(--nk-dash-border, #e2e8f0);
  border-radius: var(--nk-dash-radius-lg, 18px);
  padding: 24px 28px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.nk-group-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.nk-group-title-col {
  max-width: 780px;
}

.nk-group-kicker {
  margin-bottom: 8px;
}

.nk-group-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  display: inline-block;
}

.nk-group-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--nk-dash-text-main, #0f172a);
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}

.nk-group-subtitle {
  font-size: 13.5px;
  color: var(--nk-dash-text-muted, #64748b);
  margin: 0;
  line-height: 1.5;
}

.nk-group-meta-pill {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nk-meta-chip {
  background: var(--nk-dash-surface-muted, #f1f5f9);
  color: var(--nk-dash-text-main, #334155);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 8px;
}

.nk-meta-chip.nk-chip-accent {
  background: rgba(99, 102, 241, 0.1);
  color: #4f46e5;
}

/* JFT Basic Spotlight Card */
.nk-jft-hero-card {
  background: linear-gradient(135deg, rgba(253, 242, 248, 0.7) 0%, rgba(240, 249, 255, 0.7) 100%);
  border: 1.5px solid rgba(236, 72, 153, 0.25);
  border-radius: var(--nk-dash-radius-md, 14px);
  padding: 22px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.nk-jft-hero-left {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 720px;
}

.nk-jft-icon-box {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
  flex-shrink: 0;
}

.nk-jft-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.nk-jft-card-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--nk-dash-text-main, #0f172a);
  margin: 0 0 6px;
}

.nk-jft-card-desc {
  font-size: 13px;
  color: var(--nk-dash-text-muted, #475569);
  margin: 0;
  line-height: 1.5;
}

.nk-jft-start-btn {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 22px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35);
  transition: all 0.2s ease;
}

.nk-jft-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(236, 72, 153, 0.45);
}

/* Subhead inside section */
.nk-section-subhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.nk-section-subhead h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--nk-dash-text-main, #334155);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Quiz Card Styling */
.nk-dash-quiz-card {
  border-left: 3.5px solid #6366f1;
}

.nk-quiz-cta-chip {
  font-size: 12px;
  font-weight: 800;
  color: var(--nk-dash-primary, #6366f1);
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s ease;
}

.nk-dash-quiz-card:hover .nk-quiz-cta-chip {
  gap: 8px;
}

/* Section 7: Interactive Exam Simulation Hub */
.nk-exam-selector-nav {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.nk-exam-lvl-btn {
  background: var(--nk-dash-surface-muted, #f1f5f9);
  border: 1.5px solid var(--nk-dash-border, #e2e8f0);
  border-radius: var(--nk-dash-radius-md, 12px);
  padding: 12px 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.nk-exam-lvl-btn:hover {
  border-color: #6366f1;
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.nk-exam-lvl-btn.active {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border-color: #4338ca;
  box-shadow: 0 4px 14px rgba(49, 46, 129, 0.3);
}

.nk-exam-lvl-btn.active .nk-exam-lvl-text {
  color: #ffffff;
}

.nk-exam-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
}

.nk-tag-n5 { background: #d1fae5; color: #065f46; }
.nk-tag-n4 { background: #dbeafe; color: #1e40af; }
.nk-tag-n3 { background: #ede9fe; color: #5b21b6; }
.nk-tag-n2 { background: #fef3c7; color: #92400e; }
.nk-tag-n1 { background: #fee2e2; color: #991b1b; }

.nk-exam-lvl-text {
  font-size: 14px;
  font-weight: 800;
  color: var(--nk-dash-text-main, #0f172a);
}

.nk-exam-count-pill {
  background: rgba(0, 0, 0, 0.06);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  color: inherit;
}

.nk-exam-lvl-btn.active .nk-exam-count-pill {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.nk-exam-empty-prompt {
  background: var(--nk-dash-surface-muted, #f8fafc);
  border: 2px dashed var(--nk-dash-border, #cbd5e1);
  border-radius: var(--nk-dash-radius-md, 14px);
  padding: 40px 24px;
  text-align: center;
  margin: 10px 0;
}

.nk-exam-empty-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.nk-exam-empty-prompt h4 {
  font-size: 17px;
  font-weight: 800;
  color: var(--nk-dash-text-main, #0f172a);
  margin: 0 0 6px;
}

.nk-exam-empty-prompt p {
  font-size: 13.5px;
  color: var(--nk-dash-text-muted, #64748b);
  margin: 0;
}

.nk-exam-panel {
  margin-top: 12px;
}

.nk-panel-head {
  margin-bottom: 14px;
}

.nk-panel-head h4 {
  font-size: 16px;
  font-weight: 800;
  color: var(--nk-dash-text-main, #0f172a);
  margin: 0;
}

.nk-fade-in {
  animation: nkFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes nkFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── 15. INTERACTIVE CURRICULUM ACCORDION (UI/UX PRO MAX) ──── */
.nk-curriculum-group-wrap.nk-accordion-group {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.nk-curriculum-group-wrap.nk-accordion-group.is-collapsed {
  padding-bottom: 22px;
}

.nk-curriculum-group-wrap.nk-accordion-group.is-collapsed .nk-group-header {
  margin-bottom: 0;
}

.nk-group-header.nk-accordion-header {
  cursor: pointer;
  user-select: none;
  border-radius: var(--nk-dash-radius-md, 12px);
  padding: 6px 10px;
  margin: -6px -10px 18px;
  transition: background-color 0.2s ease;
}

.nk-curriculum-group-wrap.nk-accordion-group.is-collapsed .nk-group-header.nk-accordion-header {
  margin-bottom: -6px;
}

.nk-group-header.nk-accordion-header:hover {
  background: rgba(99, 102, 241, 0.04);
}

.nk-group-header.nk-accordion-header:focus-visible {
  outline: 2px solid var(--nk-dash-primary, #6366f1);
  outline-offset: 2px;
}

.nk-group-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.nk-accordion-toggle-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--nk-dash-surface-muted, #f1f5f9);
  border: 1px solid var(--nk-dash-border, #e2e8f0);
  color: var(--nk-dash-text-main, #334155);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.nk-group-header.nk-accordion-header:hover .nk-accordion-toggle-indicator {
  background: var(--nk-dash-primary, #6366f1);
  color: #ffffff;
  border-color: var(--nk-dash-primary, #6366f1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.nk-accordion-group.is-expanded .nk-accordion-toggle-indicator {
  background: var(--nk-dash-surface-muted, #f1f5f9);
  color: var(--nk-dash-text-main, #334155);
  border-color: var(--nk-dash-border, #e2e8f0);
}

.nk-accordion-group.is-expanded .nk-group-header.nk-accordion-header:hover .nk-accordion-toggle-indicator {
  background: var(--nk-dash-primary, #6366f1);
  color: #ffffff;
  border-color: var(--nk-dash-primary, #6366f1);
}

.nk-accordion-chevron-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 1;
}

.nk-accordion-chevron-icon svg {
  display: block;
}

.nk-accordion-group.is-expanded .nk-accordion-chevron-icon {
  transform: rotate(180deg);
}

.nk-accordion-body {
  animation: nkAccordionSlideDown 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes nkAccordionSlideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .nk-group-actions {
    width: 100%;
    justify-content: space-between;
    margin-top: 8px;
  }
  .nk-accordion-toggle-indicator {
    width: 100%;
    justify-content: center;
  }
}

/* Modul Persiapan JLPT N5 Spotlight Bento Card */
.nk-n5-prep-spotlight-card {
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.8) 0%, rgba(240, 253, 250, 0.8) 100%);
  border: 1.5px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--nk-dash-radius-md, 14px);
  padding: 22px 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.06);
}

.nk-n5-prep-main-info {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nk-n5-prep-icon-box {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  flex-shrink: 0;
}

.nk-n5-prep-text {
  flex: 1;
  min-width: 0;
}

.nk-n5-prep-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.nk-n5-prep-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--nk-dash-text-main, #0f172a);
  margin: 0 0 6px;
}

.nk-n5-prep-desc {
  font-size: 13px;
  color: var(--nk-dash-text-muted, #475569);
  margin: 0;
  line-height: 1.5;
}

.nk-n5-prep-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.nk-n5-prep-mod-item {
  background: #ffffff;
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.nk-n5-prep-mod-item:hover {
  transform: translateY(-2px);
  border-color: #10b981;
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.15);
  background: #f0fdf4;
}

.nk-n5-prep-mod-icon {
  font-size: 24px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #ecfdf5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nk-n5-prep-mod-body {
  flex: 1;
  min-width: 0;
}

.nk-n5-prep-mod-tag {
  font-size: 10px;
  font-weight: 800;
  color: #059669;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}

.nk-n5-prep-mod-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 1px 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nk-n5-prep-mod-sub {
  font-size: 11px;
  color: #64748b;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nk-n5-prep-arrow {
  color: #10b981;
  font-weight: 800;
  font-size: 15px;
  transition: transform 0.2s;
}

.nk-n5-prep-mod-item:hover .nk-n5-prep-arrow {
  transform: translateX(3px);
}

.nk-n5-prep-cta-bar {
  display: flex;
  justify-content: flex-end;
  border-top: 1px dashed rgba(16, 185, 129, 0.25);
  padding-top: 12px;
}

.nk-n5-prep-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #10b981;
  color: #ffffff !important;
  font-size: 12.5px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: all 0.2s;
}

.nk-n5-prep-cta-btn:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

/* Dark mode compatibility */
body.nk-theme-mode-dark .nk-n5-prep-spotlight-card,
html[data-nk-mode="dark"] .nk-n5-prep-spotlight-card {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.25) 0%, rgba(17, 24, 39, 0.6) 100%);
  border-color: rgba(16, 185, 129, 0.3);
}

body.nk-theme-mode-dark .nk-n5-prep-mod-item,
html[data-nk-mode="dark"] .nk-n5-prep-mod-item {
  background: #1e293b;
  border-color: #334155;
  color: #f8fafc !important;
}

body.nk-theme-mode-dark .nk-n5-prep-mod-name,
html[data-nk-mode="dark"] .nk-n5-prep-mod-name {
  color: #f8fafc;
}

body.nk-theme-mode-dark .nk-n5-prep-mod-sub,
html[data-nk-mode="dark"] .nk-n5-prep-mod-sub {
  color: #94a3b8;
}

body.nk-theme-mode-dark .nk-n5-prep-mod-item:hover,
html[data-nk-mode="dark"] .nk-n5-prep-mod-item:hover {
  background: #0f172a;
  border-color: #10b981;
}