/* Fonts loaded via wp_enqueue_style(dmh-fonts) — no CSS @import */
/* Daily Mnemonic Hub v3.4 — premium UI, mobile-first, 10x polish */

.dmh-app {
  /* —— Design tokens —— */
  --dmh-indigo: #4f46e5;
  --dmh-indigo-600: #4338ca;
  --dmh-indigo-700: #3730a3;
  --dmh-violet: #7c3aed;
  --dmh-violet-soft: #a78bfa;

  --dmh-slate-50: #f8fafc;
  --dmh-slate-100: #f1f5f9;
  --dmh-slate-200: #e2e8f0;
  --dmh-slate-300: #cbd5e1;
  --dmh-slate-400: #94a3b8;
  --dmh-slate-500: #64748b;
  --dmh-slate-600: #475569;
  --dmh-slate-700: #334155;
  --dmh-slate-800: #1e293b;
  --dmh-slate-900: #0f172a;

  --dmh-success: #059669;
  --dmh-warning: #d97706;
  --dmh-danger: #e11d48;
  --dmh-amber: #f59e0b;

  --dmh-radius-sm: 10px;
  --dmh-radius: 16px;
  --dmh-radius-lg: 20px;
  --dmh-radius-xl: 24px;
  --dmh-radius-full: 999px;

  --dmh-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --dmh-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
  --dmh-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.07);
  --dmh-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.1);
  --dmh-shadow-xl: 0 24px 56px rgba(15, 23, 42, 0.14);
  --dmh-shadow-glow: 0 8px 28px rgba(79, 70, 229, 0.28);
  --dmh-shadow-glow-amber: 0 8px 24px rgba(245, 158, 11, 0.3);

  --dmh-space-1: 4px;
  --dmh-space-2: 8px;
  --dmh-space-3: 12px;
  --dmh-space-4: 16px;
  --dmh-space-5: 20px;
  --dmh-space-6: 24px;
  --dmh-space-8: 32px;

  --dmh-touch: 44px;
  --dmh-header-pad: max(12px, env(safe-area-inset-top, 0px));
  --dmh-bottom-pad: max(16px, env(safe-area-inset-bottom, 0px));

  font-family: 'Noto Sans Bengali', 'Hind Siliguri', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--dmh-slate-900);
  background: transparent;
  margin: 0;
  padding: 0 0 calc(2rem + var(--dmh-bottom-pad));
  box-sizing: border-box;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  max-width: 100%;
}

.dmh-app *,
.dmh-app *::before,
.dmh-app *::after {
  box-sizing: border-box;
}

/* —— Header —— */
.dmh-header {
  position: relative;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--dmh-slate-200);
  border-radius: var(--dmh-radius-lg);
  box-shadow: var(--dmh-shadow-sm);
  margin-bottom: var(--dmh-space-4);
}

.dmh-header-inner {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

@media (min-width: 640px) {
  .dmh-header-inner {
    padding: 14px 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .dmh-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .dmh-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
}

/* Top row: brand + streak (space-between on mobile) */
.dmh-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

@media (min-width: 640px) {
  .dmh-header-top {
    flex: 1 1 auto;
    width: auto;
    gap: 12px;
  }
}

.dmh-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-width: 0;
  flex: 1 1 auto;
  transition: opacity 0.15s;
}

.dmh-brand:hover {
  opacity: 0.9;
}

.dmh-logo {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(145deg, #6366f1 0%, #7c3aed 55%, #6d28d9 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--dmh-shadow-glow);
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .dmh-logo {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
}

.dmh-brand-copy {
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
}

.dmh-brand-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--dmh-slate-900);
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  line-height: 1.25;
}

.dmh-brand-sub {
  margin: 2px 0 0;
  font-size: 10px;
  color: var(--dmh-slate-500);
  font-weight: 500;
  display: none;
  line-height: 1.3;
}

@media (min-width: 380px) {
  .dmh-brand-title {
    font-size: 0.9rem;
  }
}

@media (min-width: 480px) {
  .dmh-brand-title {
    font-size: 1rem;
  }
}

@media (min-width: 640px) {
  .dmh-brand-title {
    font-size: 1.2rem;
  }
  .dmh-brand-sub {
    display: block;
    font-size: 11px;
  }
}

.dmh-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
}

@media (min-width: 640px) {
  .dmh-header-actions {
    gap: 8px;
    width: auto;
  }
}

.dmh-streak {
  padding: 5px 9px;
  min-height: 30px;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1px solid #fed7aa;
  color: #c2410c;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  line-height: 1;
  flex-shrink: 0;
  vertical-align: middle;
}
.dmh-streak #dmh-streak-count,
.dmh-streak .dmh-streak-label,
.dmh-streak .dmh-streak-flame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}

.dmh-streak:hover {
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  box-shadow: 0 2px 10px rgba(194, 65, 12, 0.15);
}

.dmh-streak:active {
  transform: scale(0.97);
}

.dmh-streak:focus-visible {
  outline: 2px solid #ea580c;
  outline-offset: 2px;
}

/* Pure CSS flame icon — no SVG/emoji */
.dmh-streak-flame {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 14px;
  flex-shrink: 0;
  vertical-align: middle;
}
.dmh-streak-flame::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 8px;
  height: 10px;
  margin-left: -4px;
  background: radial-gradient(ellipse at 50% 80%, #fbbf24 0%, #f97316 40%, #ea580c 70%, #c2410c 100%);
  border-radius: 50% 50% 20% 20% / 60% 60% 40% 40%;
  box-shadow: 0 -1px 2px rgba(251, 191, 36, 0.5);
}
.dmh-streak-flame::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 6px;
  margin-left: -2px;
  background: radial-gradient(ellipse at 50% 100%, #fef3c7 0%, #fbbf24 60%, transparent 100%);
  border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%;
  opacity: 0.9;
}

.dmh-streak #dmh-streak-count {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
}

.dmh-streak-label {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.85;
}

@media (min-width: 640px) {
  .dmh-streak {
    padding: 7px 12px;
    min-height: 36px;
    font-size: 12px;
    border-radius: 12px;
    gap: 5px;
  }
  .dmh-streak-flame {
    width: 14px;
    height: 16px;
  }
  .dmh-streak-flame::before {
    width: 10px;
    height: 12px;
    margin-left: -5px;
  }
  .dmh-streak-flame::after {
    width: 5px;
    height: 7px;
    margin-left: -2.5px;
  }
  .dmh-streak #dmh-streak-count {
    font-size: 14px;
  }
  .dmh-streak-label {
    font-size: 12px;
  }
}

.dmh-flame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: dmh-pulse 1.6s ease-in-out infinite;
}

@keyframes dmh-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

/* —— Buttons —— */
.dmh-btn {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  border-radius: 12px;
  padding: 8px 12px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, opacity 0.15s ease, border-color 0.15s ease;
  line-height: 1.25;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.dmh-btn:active {
  transform: scale(0.97);
}

.dmh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.dmh-btn:focus-visible {
  outline: 2px solid var(--dmh-indigo);
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .dmh-btn {
    padding: 9px 14px;
    min-height: 40px;
    font-size: 13px;
  }
}

.dmh-btn-premium {
  background: #eef2ff;
  color: var(--dmh-indigo-600);
  border: 1px solid #c7d2fe;
}

.dmh-btn-premium:hover {
  background: #e0e7ff;
}

.dmh-btn-premium.is-pro {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  border: none;
  box-shadow: var(--dmh-shadow-glow-amber);
}

.dmh-btn-premium.is-pro:hover {
  filter: brightness(1.05);
}

.dmh-btn-ghost {
  background: var(--dmh-slate-100);
  color: var(--dmh-slate-700);
  border: 1px solid var(--dmh-slate-200);
}

.dmh-btn-ghost:hover {
  background: var(--dmh-slate-200);
}

.dmh-btn-amber {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.dmh-btn-amber:hover {
  background: #fef3c7;
}

.dmh-btn-dark {
  background: var(--dmh-slate-900);
  color: #fff;
}

.dmh-btn-dark:hover {
  background: var(--dmh-slate-800);
}

.dmh-btn-primary {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff !important;
  box-shadow: var(--dmh-shadow-glow);
  border: none;
}

.dmh-btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 32px rgba(79, 70, 229, 0.38);
}

.dmh-btn-block {
  width: 100%;
  justify-content: center;
  padding: 14px 18px;
  font-size: 14px;
  min-height: var(--dmh-touch);
  border-radius: 14px;
}

.dmh-premium-label {
  display: none;
}

.dmh-premium-label-sm {
  display: inline;
}

@media (min-width: 640px) {
  .dmh-premium-label {
    display: inline;
  }
  .dmh-premium-label-sm {
    display: none;
  }
}

.dmh-hide-sm {
  display: none;
}

.dmh-hide-mobile {
  display: none !important;
}

@media (min-width: 640px) {
  .dmh-hide-sm {
    display: inline;
  }
  .dmh-hide-mobile {
    display: inline-flex !important;
  }
}

/* —— Main layout —— */
.dmh-main {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

/* —— Banner (hidden on mobile) —— */
.dmh-banner-wrap {
  display: none;
  margin-bottom: var(--dmh-space-4);
}

@media (min-width: 640px) {
  .dmh-banner-wrap {
    display: block;
  }
}

.dmh-banner {
  border-radius: var(--dmh-radius-lg);
  padding: 20px 18px 16px;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #5b21b6 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 140px;
  box-shadow: 0 12px 36px rgba(79, 70, 229, 0.3);
  transition: background 0.45s ease;
}

.dmh-banner::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 70%;
  height: 140%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 65%);
  pointer-events: none;
}

.dmh-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 12% 90%, rgba(255, 255, 255, 0.08), transparent 40%);
  pointer-events: none;
}

@media (min-width: 640px) {
  .dmh-banner {
    padding: 26px 28px 20px;
    min-height: 156px;
    border-radius: 22px;
  }
}

.dmh-banner-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  padding: 5px 12px;
  border-radius: var(--dmh-radius-full);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  letter-spacing: 0.02em;
}

.dmh-banner-title {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.35;
  position: relative;
  z-index: 1;
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .dmh-banner-title {
    font-size: 1.4rem;
  }
}

.dmh-banner-sub {
  margin: 0;
  font-size: 13px;
  opacity: 0.92;
  line-height: 1.5;
  max-width: 36rem;
  position: relative;
  z-index: 1;
}

.dmh-banner-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  position: relative;
  z-index: 1;
  gap: 12px;
}

.dmh-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.dmh-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--dmh-radius-full);
  background: rgba(255, 255, 255, 0.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.25s ease, background 0.2s ease;
  min-width: 8px;
  min-height: 8px;
}

.dmh-dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

.dmh-dot.is-active {
  background: #fff;
  width: 22px;
}

.dmh-banner-meta {
  font-size: 11px;
  opacity: 0.85;
  font-weight: 600;
  white-space: nowrap;
}

/* —— Tabs inside header —— */
.dmh-header-inner .dmh-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0 !important;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0 4px;
  scroll-snap-type: x proximity;
}
.dmh-header-inner .dmh-tabs::-webkit-scrollbar {
  display: none;
}
@media (min-width: 640px) {
  .dmh-header-inner .dmh-tabs {
    flex-wrap: wrap;
    overflow: visible;
    width: auto;
    flex: 1 1 100%;
    order: 3;
  }
  .dmh-header-inner {
    flex-wrap: wrap;
  }
}

.dmh-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.dmh-tab {
  border: 1px solid var(--dmh-slate-200);
  background: #fff;
  color: var(--dmh-slate-700);
  padding: 6px 12px;
  min-height: 34px;
  border-radius: var(--dmh-radius-full);
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--dmh-shadow-xs);
}
@media (min-width: 640px) {
  .dmh-tab {
    padding: 8px 14px;
    min-height: 38px;
    font-size: 12px;
    gap: 5px;
  }
}

.dmh-tab:hover {
  border-color: #a5b4fc;
  color: var(--dmh-indigo-600);
  background: #f8fafc;
}

.dmh-tab:focus-visible {
  outline: 2px solid var(--dmh-indigo);
  outline-offset: 2px;
}

.dmh-tab.is-active {
  background: var(--dmh-slate-900);
  color: #fff;
  border-color: var(--dmh-slate-900);
  box-shadow: none;
}

.dmh-tab-soft {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: var(--dmh-indigo-600);
}

.dmh-tab-soft.is-active {
  background: var(--dmh-indigo);
  color: #fff;
  border-color: var(--dmh-indigo);
  box-shadow: var(--dmh-shadow-glow);
}

.dmh-is-hidden {
  display: none !important;
}

/* —— Topics section —— */
.dmh-section {
  margin-bottom: 1.25rem;
}

/* Category tabs — horizontal scroll */
.dmh-cat-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0 10px;
  margin-bottom: 8px;
}

.dmh-cat-tabs::-webkit-scrollbar {
  display: none;
}

.dmh-cat-tab {
  flex-shrink: 0;
  border: 1px solid var(--dmh-slate-200);
  background: #fff;
  color: var(--dmh-slate-700);
  border-radius: var(--dmh-radius-full);
  padding: 8px 14px;
  min-height: 36px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.dmh-cat-tab:hover {
  border-color: #a5b4fc;
  color: var(--dmh-indigo-600);
}

.dmh-cat-tab.is-active {
  background: var(--dmh-slate-900);
  color: #fff;
  border-color: var(--dmh-slate-900);
}

.dmh-cat-n {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.2);
  padding: 1px 6px;
  border-radius: 999px;
}

.dmh-cat-tab:not(.is-active) .dmh-cat-n {
  background: var(--dmh-slate-100);
  color: var(--dmh-slate-600);
}

/* Subtopics — minimal 2-col centered buttons */
.dmh-subtopics {
  margin-bottom: 12px;
}

.dmh-subtopics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dmh-slate-500);
}

.dmh-sub-clear {
  border: none;
  background: transparent;
  color: var(--dmh-indigo);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 0;
}

.dmh-subtopics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

.dmh-sub-btn {
  border: 1px solid var(--dmh-slate-200);
  background: #fff;
  color: var(--dmh-slate-700);
  border-radius: 10px;
  padding: 6px 10px;
  min-height: 34px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  box-sizing: border-box;
}

.dmh-sub-btn:hover {
  border-color: #a5b4fc;
  color: var(--dmh-indigo-600);
  background: #f8fafc;
}

.dmh-sub-btn.is-active {
  background: #eef2ff;
  border-color: #a5b4fc;
  color: var(--dmh-indigo-700);
  font-weight: 700;
}

.dmh-topics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 480px) {
  .dmh-topics {
    gap: 12px;
  }
}

@media (min-width: 640px) {
  .dmh-topics {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 960px) {
  .dmh-topics {
    grid-template-columns: repeat(6, 1fr);
  }
}

.dmh-topic {
  background: #fff;
  border: 1px solid var(--dmh-slate-200);
  border-radius: var(--dmh-radius);
  padding: 14px 12px;
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
  position: relative;
  font-family: inherit;
  width: 100%;
  min-height: 96px;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--dmh-shadow-xs);
}

.dmh-topic:hover {
  box-shadow: var(--dmh-shadow-md);
  transform: translateY(-2px);
}

.dmh-topic:active {
  transform: translateY(0);
}

.dmh-topic:focus-visible {
  outline: 2px solid var(--dmh-indigo);
  outline-offset: 2px;
}

.dmh-topic.is-active-cat {
  outline: 2px solid var(--dmh-indigo);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

.dmh-topic-icon {
  font-size: 1.4rem;
  margin-bottom: 6px;
  line-height: 1;
  display: block;
}

.dmh-topic-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--dmh-radius-full);
  background: #eef2ff;
  color: var(--dmh-indigo-600);
}

.dmh-topic h4 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--dmh-slate-900);
}

.dmh-topic p {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--dmh-slate-500);
  line-height: 1.35;
}

.dmh-topic-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--dmh-slate-500);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.dmh-topic.c-bcs {
  background: linear-gradient(160deg, #eef2ff 0%, #e0e7ff 100%);
  border-color: #c7d2fe;
}

.dmh-topic.c-eng {
  background: linear-gradient(160deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #a7f3d0;
}

.dmh-topic.c-gk {
  background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fde68a;
}

.dmh-topic.c-math {
  background: linear-gradient(160deg, #faf5ff 0%, #f3e8ff 100%);
  border-color: #e9d5ff;
}

.dmh-topic.c-sci {
  background: linear-gradient(160deg, #ecfeff 0%, #cffafe 100%);
  border-color: #a5f3fc;
}

.dmh-topic.c-saved {
  background: linear-gradient(160deg, #fff1f2 0%, #ffe4e6 100%);
  border-color: #fecdd3;
}

/* —— Toolbar —— */
.dmh-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .dmh-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
}

.dmh-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--dmh-slate-200);
  border-radius: 14px;
  padding: 12px 14px;
  max-width: 100%;
  min-height: var(--dmh-touch);
  box-shadow: var(--dmh-shadow-xs);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dmh-search:focus-within {
  border-color: #a5b4fc;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.dmh-search input {
  border: none;
  outline: none;
  flex: 1;
  font-family: inherit;
  font-size: 16px;
  background: transparent;
  min-width: 0;
  color: var(--dmh-slate-900);
  -webkit-appearance: none;
}

.dmh-search input::placeholder {
  color: var(--dmh-slate-400);
}

.dmh-diff-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.dmh-diff-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--dmh-slate-500);
  margin-right: 2px;
}

.dmh-chip {
  border: 1px solid var(--dmh-slate-200);
  background: #fff;
  border-radius: var(--dmh-radius-full);
  padding: 8px 14px;
  min-height: 36px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: var(--dmh-slate-700);
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--dmh-shadow-xs);
}

.dmh-chip:hover {
  border-color: #a5b4fc;
  color: var(--dmh-indigo-600);
}

.dmh-chip:focus-visible {
  outline: 2px solid var(--dmh-indigo);
  outline-offset: 2px;
}

.dmh-chip.is-active {
  background: var(--dmh-indigo);
  color: #fff;
  border-color: var(--dmh-indigo);
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.25);
}

/* —— Feed cards: 1 col mobile, 2 tablet, 4 desktop —— */
.dmh-feed {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .dmh-feed {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (min-width: 1024px) {
  .dmh-feed {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

.dmh-card {
  background: #fff;
  border: 1px solid var(--dmh-slate-200);
  border-radius: var(--dmh-radius);
  padding: 16px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
  box-shadow: var(--dmh-shadow-xs);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

.dmh-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* margin-top auto applied in main .dmh-card-actions below */

@media (min-width: 640px) {
  .dmh-card {
    padding: 18px 20px;
    border-radius: 18px;
  }
}

.dmh-card:hover {
  box-shadow: var(--dmh-shadow-md);
  border-color: var(--dmh-slate-300);
}

.dmh-card.is-locked .dmh-card-body {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}

.dmh-card-lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(2px);
  border-radius: inherit;
  z-index: 2;
  gap: 12px;
  padding: 20px 16px;
  text-align: center;
}

.dmh-card-lock span {
  font-size: 13px;
  font-weight: 700;
  color: var(--dmh-slate-700);
}

.dmh-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.dmh-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--dmh-radius-full);
  background: linear-gradient(145deg, #c7d2fe, #a5b4fc);
  color: #312e81;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
  letter-spacing: 0;
}

.dmh-card-meta {
  flex: 1;
  min-width: 0;
}

.dmh-card-author {
  display: none;
}

.dmh-card-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--dmh-slate-700);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dmh-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--dmh-radius-full);
  background: #eef2ff;
  color: var(--dmh-indigo-600);
  letter-spacing: 0.01em;
}

.dmh-badge-easy {
  background: #ecfdf5;
  color: #047857;
}

.dmh-badge-medium {
  background: #fffbeb;
  color: #b45309;
}

.dmh-badge-hard {
  background: #fef2f2;
  color: #b91c1c;
}

.dmh-badge-prem {
  background: #fef3c7;
  color: #92400e;
}

.dmh-card-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--dmh-slate-900);
}

@media (min-width: 640px) {
  .dmh-card-title {
    font-size: 16px;
  }
}

.dmh-card-mnemonic {
  background: linear-gradient(145deg, #eef2ff 0%, #f5f3ff 100%);
  border: 1px solid #e0e7ff;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 700;
  color: var(--dmh-indigo-700);
  margin-bottom: 12px;
  text-align: center;
  line-height: 1.45;
  letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Math / chemistry symbols (² ³ √ ∑ Δ → ⇌ etc.) */
.dmh-math,
.dmh-card-mnemonic,
.dmh-card-exp,
.dmh-mini-mnemonic,
.dmh-flash-text {
  font-family: 'Noto Sans Math', 'Noto Sans', 'Noto Sans Bengali', 'Hind Siliguri', system-ui, sans-serif;
  font-feature-settings: 'tnum' 1;
  unicode-bidi: plaintext;
}

.dmh-lock-hint {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--dmh-slate-600);
  max-width: 220px;
  line-height: 1.4;
}

.dmh-card-lock .dmh-btn {
  margin-top: 4px;
}

@media (min-width: 640px) {
  .dmh-card-mnemonic {
    font-size: 17px;
    padding: 18px 20px;
  }
}

.dmh-card-exp {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--dmh-slate-700);
  line-height: 1.6;
}

.dmh-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  border-top: 1px solid var(--dmh-slate-100);
  padding-top: 12px;
  margin-top: auto;
}

.dmh-action {
  border: none;
  background: var(--dmh-slate-50);
  border-radius: 10px;
  padding: 8px 12px;
  min-height: 36px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: var(--dmh-slate-700);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.dmh-action:hover {
  background: var(--dmh-slate-100);
}

.dmh-action:focus-visible {
  outline: 2px solid var(--dmh-indigo);
  outline-offset: 1px;
}

/* Larger like / save icons */
.dmh-action .dmh-icon-lg-act,
.dmh-action .dmh-icon-heart,
.dmh-action .dmh-icon-bookmark {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
}

/* Like — white fill default; solid pink when on */
.dmh-action[data-act="like"] {
  border: 1px solid #fda4af;
  background: #fff;
  color: #e11d48;
  padding: 8px 14px;
  min-height: 40px;
}

.dmh-action[data-act="like"] .dmh-icon,
.dmh-action[data-act="like"] .dmh-icon-heart {
  fill: #fff !important;
  stroke: #e11d48 !important;
  color: #e11d48;
}

.dmh-action[data-act="like"].is-on {
  background: #fff1f2;
  color: #e11d48;
  border: 1px solid #e11d48;
}

.dmh-action[data-act="like"].is-on .dmh-icon,
.dmh-action[data-act="like"].is-on .dmh-icon-heart {
  fill: #e11d48 !important;
  stroke: #e11d48 !important;
  color: #e11d48;
}

/* Save — outline bookmark; filled indigo when saved (no checkmark) */
.dmh-action[data-act="save"] {
  border: 1px solid #c7d2fe;
  background: #fff;
  color: var(--dmh-indigo-600);
  padding: 8px 14px;
  min-height: 40px;
}

.dmh-action[data-act="save"] .dmh-icon,
.dmh-action[data-act="save"] .dmh-icon-bookmark {
  fill: #fff !important;
  stroke: var(--dmh-indigo-600) !important;
  color: var(--dmh-indigo-600);
}

.dmh-action[data-act="save"].is-saved {
  background: #eef2ff;
  color: var(--dmh-indigo-700);
  border: 1px solid #6366f1;
}

.dmh-action[data-act="save"].is-saved .dmh-icon,
.dmh-action[data-act="save"].is-saved .dmh-icon-bookmark {
  fill: #4f46e5 !important;
  stroke: #4f46e5 !important;
  color: #4f46e5;
}

.dmh-action.is-on:not([data-act="like"]):not([data-act="save"]) {
  background: #fee2e2;
  color: #b91c1c;
}

/* —— Panels (flash / quiz / widget) —— */
.dmh-panel {
  margin-top: 4px;
  animation: dmh-fadein 0.28s ease;
}

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

.dmh-mode-intro {
  text-align: center;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--dmh-slate-200);
  box-shadow: var(--dmh-shadow-xs);
}

.dmh-mode-intro h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 800;
}

.dmh-mode-intro p {
  margin: 0;
  font-size: 13px;
  color: var(--dmh-slate-500);
}

/* Flashcards */
.dmh-flash-wrap {
  max-width: 440px;
  margin: 0 auto;
  width: 100%;
  padding: 0 2px;
}

.dmh-flash-card {
  background: #fff;
  border-radius: var(--dmh-radius-xl);
  border: 1px solid var(--dmh-slate-200);
  box-shadow: var(--dmh-shadow-lg);
  min-height: 260px;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.dmh-flash-card:active {
  transform: scale(0.99);
}

.dmh-flash-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #4f46e5, #7c3aed, #a78bfa);
}

.dmh-flash-inner {
  padding: 36px 24px;
  text-align: center;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

@media (min-width: 640px) {
  .dmh-flash-inner {
    padding: 40px 28px;
    min-height: 280px;
  }
}

.dmh-flash-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--dmh-slate-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dmh-flash-text {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--dmh-slate-900);
  line-height: 1.4;
  word-break: break-word;
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .dmh-flash-text {
    font-size: 1.45rem;
  }
}

.dmh-flash-hint {
  font-size: 12px;
  color: var(--dmh-slate-400);
  margin: 0;
}

.dmh-flash-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.dmh-flash-nav .dmh-btn {
  min-width: 100px;
  min-height: var(--dmh-touch);
}

.dmh-flash-progress {
  text-align: center;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dmh-slate-500);
}

/* Quiz */
.dmh-quiz-box {
  max-width: 540px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--dmh-radius-xl);
  border: 1px solid var(--dmh-slate-200);
  padding: 20px 18px;
  box-shadow: var(--dmh-shadow-md);
  width: 100%;
}

@media (min-width: 640px) {
  .dmh-quiz-box {
    padding: 28px 24px;
  }
}

.dmh-quiz-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--dmh-slate-100);
  padding-bottom: 14px;
}

.dmh-quiz-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  min-height: var(--dmh-touch);
  border-radius: 14px;
  border: 1px solid var(--dmh-slate-200);
  background: var(--dmh-slate-50);
  margin-bottom: 10px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s ease;
  color: var(--dmh-slate-900);
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}

.dmh-quiz-opt:hover:not(:disabled) {
  background: #eef2ff;
  border-color: #a5b4fc;
}

.dmh-quiz-opt:focus-visible {
  outline: 2px solid var(--dmh-indigo);
  outline-offset: 2px;
}

.dmh-quiz-opt.is-correct {
  background: #10b981 !important;
  color: #fff !important;
  border-color: #059669 !important;
}

.dmh-quiz-opt.is-wrong {
  background: #f43f5e !important;
  color: #fff !important;
  border-color: #e11d48 !important;
}

.dmh-quiz-opt:disabled {
  cursor: default;
}

/* Widget preview */
.dmh-widget-preview {
  max-width: 400px;
  margin: 0 auto;
  background: linear-gradient(145deg, #4f46e5, #7c3aed);
  border-radius: var(--dmh-radius-lg);
  padding: 24px 20px;
  color: #fff;
  min-height: 230px;
  text-align: center;
  box-shadow: 0 16px 44px rgba(79, 70, 229, 0.38);
  width: 100%;
}

.dmh-widget-preview h4 {
  margin: 0 0 14px;
  font-size: 13px;
  opacity: 0.9;
  font-weight: 600;
}

.dmh-widget-preview .mn {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.dmh-widget-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.dmh-widget-nav button {
  background: rgba(255, 255, 255, 0.22);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: var(--dmh-radius-full);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.dmh-widget-nav button:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Empty / CTA */
.dmh-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--dmh-slate-500);
  font-size: 14px;
  background: #fff;
  border-radius: var(--dmh-radius);
  border: 1px dashed var(--dmh-slate-300);
}

.dmh-empty a {
  color: var(--dmh-indigo);
  font-weight: 700;
}

.dmh-premium-cta {
  margin-top: 18px;
  padding: 22px 18px;
  background: linear-gradient(145deg, #f0f9ff, #e0f2fe);
  border: 1px solid #bae6fd;
  border-radius: var(--dmh-radius);
  text-align: center;
}

.dmh-premium-cta p {
  margin: 0 0 14px;
  font-weight: 600;
  color: #0c4a6e;
  font-size: 14px;
}

/* —— Modals —— */
.dmh-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (min-width: 640px) {
  .dmh-modal {
    align-items: center;
    padding: 20px;
    padding-bottom: 20px;
  }
}

.dmh-modal.dmh-is-hidden {
  display: none !important;
}

.dmh-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dmh-modal-card {
  position: relative;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 28px 22px calc(28px + env(safe-area-inset-bottom, 0px));
  max-width: 100%;
  width: 100%;
  box-shadow: var(--dmh-shadow-xl);
  z-index: 1;
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: dmh-sheet-up 0.3s ease;
}

@media (min-width: 640px) {
  .dmh-modal-card {
    border-radius: 22px;
    padding: 32px 28px;
    max-width: 420px;
    max-height: 90vh;
    animation: dmh-modal-in 0.25s ease;
  }
}

@keyframes dmh-sheet-up {
  from {
    transform: translateY(40px);
    opacity: 0.6;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes dmh-modal-in {
  from {
    transform: scale(0.96) translateY(8px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.dmh-modal-wide {
  max-width: 100%;
}

@media (min-width: 640px) {
  .dmh-modal-wide {
    max-width: 500px;
  }
}

.dmh-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: none;
  background: var(--dmh-slate-100);
  width: 36px;
  height: 36px;
  border-radius: var(--dmh-radius-full);
  font-size: 18px;
  cursor: pointer;
  color: var(--dmh-slate-700);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}

.dmh-modal-close:hover {
  background: var(--dmh-slate-200);
}

.dmh-modal-icon {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 10px;
}

.dmh-modal-card h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: -0.02em;
}

.dmh-modal-desc {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--dmh-slate-500);
  text-align: center;
  line-height: 1.55;
}

.dmh-premium-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  font-size: 14px;
}

.dmh-premium-benefits li {
  padding: 10px 0;
  border-bottom: 1px solid var(--dmh-slate-100);
  font-weight: 600;
  color: var(--dmh-slate-800);
}

.dmh-premium-benefits li::before {
  content: '✓ ';
  color: var(--dmh-success);
  font-weight: 800;
}

.dmh-modal-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--dmh-slate-500);
  text-align: center;
  line-height: 1.45;
}

.dmh-form label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--dmh-slate-700);
}

.dmh-form input,
.dmh-form select,
.dmh-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  min-height: 44px;
  border: 1px solid var(--dmh-slate-200);
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  background: #fff;
  color: var(--dmh-slate-900);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
}

.dmh-form textarea {
  min-height: 88px;
  resize: vertical;
}

.dmh-form input:focus,
.dmh-form select:focus,
.dmh-form textarea:focus {
  outline: none;
  border-color: #a5b4fc;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.dmh-check {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-weight: 600 !important;
  min-height: 44px;
}

.dmh-check input {
  width: 18px !important;
  height: 18px !important;
  min-height: 0 !important;
  margin: 0 !important;
  accent-color: var(--dmh-indigo);
}

/* —— Toast —— */
.dmh-toast {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 100001;
  background: var(--dmh-slate-900);
  color: #fff;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
  border: 1px solid #334155;
  max-width: min(340px, calc(100vw - 32px));
  text-align: center;
  animation: dmh-toast-in 0.35s ease;
}

@media (min-width: 640px) {
  .dmh-toast {
    left: auto;
    right: 24px;
    transform: none;
    text-align: left;
  }
}

.dmh-toast.dmh-is-hidden {
  display: none !important;
}

@keyframes dmh-toast-in {
  from {
    transform: translateX(-50%) translateY(16px);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

@media (min-width: 640px) {
  @keyframes dmh-toast-in {
    from {
      transform: translateY(16px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/* —— SVG icons —— */
.dmh-icon {
  display: inline-block;
  vertical-align: -0.2em;
  flex-shrink: 0;
}

.dmh-icon-sm {
  width: 14px;
  height: 14px;
}

.dmh-icon-lg {
  width: 28px;
  height: 28px;
}

.dmh-icon-flame {
  color: #f97316;
}

.dmh-icon-topic {
  width: 22px;
  height: 22px;
  color: #475569e6;
}

.dmh-logo .dmh-icon {
  width: 20px;
  height: 20px;
  color: #fff;
}

.dmh-btn .dmh-icon {
  width: 16px;
  height: 16px;
}

.dmh-tab .dmh-icon {
  width: 15px;
  height: 15px;
  margin-right: 2px;
}

.dmh-action .dmh-icon {
  width: 14px;
  height: 14px;
}

.dmh-search .dmh-icon {
  color: #94a3b8;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.dmh-modal-icon .dmh-icon {
  color: #f59e0b;
}

/* —— Free mini widget (sidebar) — responsive —— */
.dmh-mini-widget {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: var(--dmh-mini-h, 220px);
  margin: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  font-family: 'Noto Sans Bengali', 'Hind Siliguri', 'Noto Sans Math', 'Noto Sans', system-ui, sans-serif;
  box-shadow: 0 12px 32px rgba(79, 70, 229, 0.25);
  box-sizing: border-box;
  contain: layout;
}

/* Fluid: grows with container width, keeps aspect, respects margins */
.dmh-mini-widget.dmh-mini-fluid {
  height: auto !important;
  min-height: clamp(180px, 42vw, 280px);
  aspect-ratio: 16 / 11;
  max-height: 360px;
}

@media (min-width: 480px) {
  .dmh-mini-widget.dmh-mini-fluid {
    min-height: clamp(200px, 28vw, 300px);
  }
}

@media (min-width: 768px) {
  .dmh-mini-widget.dmh-mini-fluid {
    min-height: 220px;
    max-height: 320px;
  }
}

.dmh-mini-widget *,
.dmh-mini-widget *::before,
.dmh-mini-widget *::after {
  box-sizing: border-box;
  max-width: 100%;
}

.dmh-mini-gradient .dmh-mini-inner,
.dmh-mini-widget .dmh-mini-inner {
  background: linear-gradient(145deg, #4f46e5, #7c3aed);
  color: #fff;
  padding: clamp(12px, 2.5vw, 20px);
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.dmh-mini-widget.dmh-mini-fluid .dmh-mini-inner {
  min-height: inherit;
}

.dmh-mini-dark .dmh-mini-inner {
  background: linear-gradient(145deg, #0f172a, #1e293b);
}

.dmh-mini-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  min-height: 22px;
}

.dmh-mini-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: var(--dmh-radius-full);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dmh-mini-cat {
  opacity: 0.85;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dmh-mini-mnemonic {
  font-size: clamp(0.95rem, 2.8vw, 1.25rem);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  max-height: 4.05em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  align-self: stretch;
  margin-top: auto;
  margin-bottom: auto;
  padding: 4px 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.dmh-mini-widget.dmh-mini-fluid .dmh-mini-mnemonic {
  max-height: 5.4em;
  -webkit-line-clamp: 4;
  font-size: clamp(1rem, 3vw, 1.4rem);
}

.dmh-mini-title {
  margin: 0 0 10px;
  font-size: 12px;
  opacity: 0.9;
  text-align: center;
  line-height: 1.35;
  height: 2.7em;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.dmh-mini-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
}

.dmh-mini-prev,
.dmh-mini-next {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--dmh-radius-full);
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.dmh-mini-prev:hover,
.dmh-mini-next:hover {
  background: rgba(255, 255, 255, 0.35);
}

.dmh-mini-link {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--dmh-radius-full);
  padding: 9px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease;
}

.dmh-mini-link:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #fff !important;
}

.dmh-mini-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
  flex-shrink: 0;
  min-height: 8px;
}

.dmh-mini-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--dmh-radius-full);
  background: rgba(255, 255, 255, 0.35);
  transition: width 0.2s ease, background 0.2s ease;
}

.dmh-mini-dot.is-active {
  background: #fff;
  width: 16px;
}

/* —— Extra mobile refinements —— */
@media (max-width: 379px) {
  .dmh-header-inner {
    padding: 10px 12px;
  }

  .dmh-brand-title {
    max-width: 7.5rem;
    font-size: 0.95rem;
  }

  .dmh-streak {
    padding: 5px 8px;
    font-size: 11px;
  }

  .dmh-btn {
    padding: 7px 10px;
    font-size: 11px;
  }

  .dmh-banner {
    padding: 16px 14px 14px;
    min-height: 128px;
  }

  .dmh-banner-title {
    font-size: 1rem;
  }

  .dmh-topic {
    padding: 12px 10px;
    min-height: 88px;
  }

  .dmh-topic h4 {
    font-size: 12px;
  }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .dmh-app *,
  .dmh-app *::before,
  .dmh-app *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ========== Category Card Grid (responsive 2/3/4) ========== */
.dmh-cat-intro {
  margin: 0 0 16px;
  text-align: center;
}
.dmh-cat-intro h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dmh-slate-900);
  text-align: center;
}
.dmh-cat-intro p {
  margin: 0;
  font-size: 12px;
  color: var(--dmh-slate-500);
  font-weight: 500;
  text-align: center;
}

.dmh-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  margin-bottom: 12px;
}
/* last lone card expands across 2 columns */
.dmh-cat-grid > .dmh-cat-card:last-child:nth-child(odd) {
  grid-column: span 2;
}
@media (min-width: 640px) {
  .dmh-cat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .dmh-cat-grid > .dmh-cat-card:last-child:nth-child(odd) {
    grid-column: auto;
  }
  /* alone on last row of 3-col grid */
  .dmh-cat-grid > .dmh-cat-card:last-child:nth-child(3n+1) {
    grid-column: span 2;
  }
}
@media (min-width: 1024px) {
  .dmh-cat-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .dmh-cat-grid > .dmh-cat-card:last-child:nth-child(3n+1) {
    grid-column: auto;
  }
  .dmh-cat-grid > .dmh-cat-card:last-child:nth-child(4n+1) {
    grid-column: span 2;
  }
}

.dmh-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 10px;
  background: #fff;
  border: 1px solid var(--dmh-slate-200, #e2e8f0);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  min-height: 96px;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.dmh-cat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.12);
  border-color: #c7d2fe;
}
.dmh-cat-card:active {
  transform: translateY(-1px);
}
.dmh-cat-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.dmh-cat-card-icon.bcs { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.dmh-cat-card-icon.eng { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.dmh-cat-card-icon.gk { background: linear-gradient(135deg, #10b981, #059669); }
.dmh-cat-card-icon.math { background: linear-gradient(135deg, #f59e0b, #d97706); }
.dmh-cat-card-icon.sci { background: linear-gradient(135deg, #ec4899, #db2777); }
.dmh-cat-card-icon.all { background: linear-gradient(135deg, #64748b, #475569); }
.dmh-cat-card-icon.saved { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.dmh-cat-card-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--dmh-slate-800, #1e293b);
  line-height: 1.3;
  word-break: break-word;
}
.dmh-cat-card-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--dmh-slate-400, #94a3b8);
}

/* Hide old horizontal cat tabs style when used as grid */
.dmh-cat-tabs {
  /* legacy fallback */
}

/* ========== Nav bar (sticky single Back replaces primary header) ========== */
.dmh-nav-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 0;
  min-height: 44px;
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dmh-slate-200, #e2e8f0);
  box-sizing: border-box;
  width: 100%;
}
.dmh-nav-bar.dmh-is-hidden,
.dmh-nav-bar[hidden] {
  display: none !important;
}
.dmh-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--dmh-slate-200, #e2e8f0);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dmh-slate-700, #334155);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.2;
}
.dmh-back-btn:hover {
  background: #f8fafc;
  border-color: #c7d2fe;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}
.dmh-back-arrow {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.dmh-back-label {
  white-space: nowrap;
}
.dmh-nav-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--dmh-slate-800);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header hide when in sub/feed view */
.dmh-app.dmh-nav-deep .dmh-header {
  display: none !important;
}
.dmh-app.dmh-nav-deep .dmh-cat-intro {
  display: none !important;
}
.dmh-app.dmh-nav-deep .dmh-cat-grid {
  display: none !important;
}
.dmh-app.dmh-nav-deep .dmh-banner-wrap {
  display: none !important;
}

/* Subtopics grid improvements */
.dmh-subtopics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 640px) {
  .dmh-subtopics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .dmh-subtopics-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.dmh-sub-btn {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--dmh-slate-200);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--dmh-slate-700);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.dmh-sub-btn:hover {
  border-color: #a5b4fc;
  background: #eef2ff;
  transform: translateY(-2px);
}
.dmh-sub-btn.is-active {
  border-color: #6366f1;
  background: linear-gradient(145deg, #eef2ff, #fff);
  color: #4338ca;
  font-weight: 700;
}

/* ========== Widget full-width responsive fix ========== */
.dmh-mini-widget {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 180px;
}
.dmh-mini-widget.dmh-mini-fluid {
  height: auto !important;
  min-height: 180px;
  overflow: visible !important;
}
.dmh-mini-widget .dmh-mini-inner {
  height: auto !important;
  min-height: 160px;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
}
.dmh-mini-mnemonic {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-word;
  height: auto !important;
  max-height: none !important;
  line-height: 1.4;
}
.dmh-mini-title {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-word;
  height: auto !important;
}
.dmh-mini-widget *,
.dmh-mini-widget *::before,
.dmh-mini-widget *::after {
  box-sizing: border-box;
}

/* Premium CTA message exact text support */
.dmh-premium-cta,
.dmh-card-lock {
  text-align: center;
}
.dmh-lock-hint,
.dmh-premium-cta p {
  line-height: 1.5;
}

/* Ensure header-top aligns streak */
.dmh-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.dmh-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}


/* === FINAL WIDGET RESPONSIVE OVERRIDE (shortcode fix) === */
.dmh-mini-widget,
.dmh-mini-widget.dmh-mini-fluid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 180px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  contain: none !important;
}
.dmh-mini-widget .dmh-mini-inner,
.dmh-mini-widget.dmh-mini-fluid .dmh-mini-inner {
  height: auto !important;
  min-height: 160px !important;
  overflow: visible !important;
  max-height: none !important;
}
.dmh-mini-mnemonic,
.dmh-mini-widget .dmh-mini-mnemonic,
.dmh-mini-widget.dmh-mini-fluid .dmh-mini-mnemonic {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-word !important;
  height: auto !important;
  max-height: none !important;
  min-height: 2.5em;
  flex: 1 1 auto !important;
}
.dmh-mini-title,
.dmh-mini-widget .dmh-mini-title {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-word !important;
  height: auto !important;
}


/* === v3.5.4 FINAL FIXES === */

/* All inputs 16px (iOS zoom prevention + consistency) */
.dmh-app input,
.dmh-app textarea,
.dmh-app select,
.dmh-search input,
.dmh-form input,
.dmh-form textarea,
.dmh-form select {
  font-size: 16px !important;
}

/* Sticky single back bar — only one arrow (arrow span + label text without arrow) */
.dmh-back-btn .dmh-back-arrow {
  display: inline-block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  margin: 0;
}
.dmh-back-btn .dmh-back-label {
  font-size: 13px;
  font-weight: 700;
}

/* When deep: primary header fully hidden; sticky back at top */
.dmh-app.dmh-nav-deep > .dmh-header {
  display: none !important;
}
.dmh-app.dmh-nav-deep .dmh-nav-bar:not(.dmh-is-hidden):not([hidden]) {
  display: flex !important;
  position: fixed;
  top: 0;
  z-index: 9999950;
  left: 0;
  margin: 0 0 12px;
  padding: 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dmh-slate-200, #e2e8f0);
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-top: max(8px, env(safe-area-inset-top, 0px));
  padding-bottom: 8px;
}

/* Space so content is not under fixed back bar */
.dmh-app.dmh-nav-deep {
  padding-top: 0;
}

/* Streak: icon + label side by side, no overlap */
.dmh-streak {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
}
.dmh-streak-flame {
  flex-shrink: 0;
  position: relative;
}
.dmh-streak #dmh-streak-count,
.dmh-streak .dmh-streak-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Widget full-width: kill parent side margins/padding common in WP themes */
.widget .dmh-mini-widget,
.widget-area .dmh-mini-widget,
.textwidget .dmh-mini-widget,
.entry-content .dmh-mini-widget,
.wp-block-shortcode .dmh-mini-widget,
.sidebar .dmh-mini-widget,
aside .dmh-mini-widget {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Fixed outer size; content scrolls inside — width never changes */
.dmh-mini-widget,
.dmh-mini-widget.dmh-mini-fluid,
.dmh-mini-widget.dmh-mini-gradient {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  contain: none !important;
  box-sizing: border-box !important;
}

.dmh-mini-widget .dmh-mini-inner,
.dmh-mini-widget.dmh-mini-fluid .dmh-mini-inner,
.dmh-mini-widget.dmh-mini-gradient .dmh-mini-inner {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box !important;
}

.dmh-mini-mnemonic,
.dmh-mini-title {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-word !important;
  height: auto !important;
  max-height: none !important;
  flex-shrink: 0;
}

/* Responsive grids: mobile 2 / tablet 3 / desktop 4 */
.dmh-cat-grid,
.dmh-subtopics-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .dmh-cat-grid,
  .dmh-subtopics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .dmh-cat-grid,
  .dmh-subtopics-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* Streak removed from UI */
.dmh-streak,
#dmh-streak-btn {
  display: none !important;
}

/* Input font 16px everywhere */
.dmh-app input,
.dmh-app textarea,
.dmh-app select,
.dmh-search input {
  font-size: 16px !important;
}


/* ========== Category page: hide home chrome, keep chips + feed ========== */
.dmh-app.dmh-nav-sub .dmh-header,
.dmh-app.dmh-nav-sub .dmh-banner-wrap,
.dmh-app.dmh-nav-sub .dmh-cat-intro,
.dmh-app.dmh-nav-sub .dmh-cat-grid,
.dmh-app.dmh-nav-sub .dmh-topics,
.dmh-app.dmh-nav-sub .dmh-subtopics-head {
  display: none !important;
}
/* feed + toolbar + subtopic chips stay visible */
.dmh-app.dmh-nav-sub .dmh-toolbar {
  display: flex !important;
}
.dmh-app.dmh-nav-sub .dmh-feed {
  display: grid !important;
}
.dmh-app.dmh-nav-sub .dmh-subtopics {
  display: block !important;
}
.dmh-app.dmh-nav-sub .dmh-subtopics-grid {
  display: grid !important;
}

.dmh-app.dmh-nav-sub #dmh-topics-section {
  margin: 0;
  padding: 0;
}

.dmh-app.dmh-nav-sub .dmh-subtopics,
.dmh-app.dmh-nav-sub .dmh-subtopics-grid {
  display: grid !important;
  width: 100%;
}

.dmh-app.dmh-nav-sub .dmh-subtopics {
  display: block !important;
}

.dmh-app.dmh-nav-sub .dmh-subtopics-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 640px) {
  .dmh-app.dmh-nav-sub .dmh-subtopics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .dmh-app.dmh-nav-sub .dmh-subtopics-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* —— v3.5 polish: homepage + feed —— */
.dmh-cat-card.is-active {
  border-color: #a5b4fc;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.14);
  background: linear-gradient(180deg, #eef2ff 0%, #fff 100%);
}
.dmh-cat-card-name {
  font-size: 13px;
}
.dmh-sub-btn {
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 42px;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.dmh-sub-btn.is-active {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.28);
}
.dmh-sub-btn.is-active .dmh-sub-count {
  opacity: 0.85;
  color: #e0e7ff;
}
.dmh-feed {
  gap: 14px;
}
.dmh-card {
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.dmh-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 10px 28px rgba(79, 70, 229, 0.1);
  transform: translateY(-2px);
}
.dmh-empty {
  padding: 56px 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fafc, #fff);
  color: var(--dmh-slate-500);
  font-weight: 500;
}
.dmh-banner {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
.dmh-subtopics {
  margin-bottom: 16px;
  padding: 4px 0 8px;
}

.dmh-tab svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .dmh-tab svg {
    width: 16px;
    height: 16px;
  }
}

/* Banner removed */
.dmh-banner-wrap { display: none !important; }

.dmh-cat-intro,
.dmh-cat-intro h3,
.dmh-cat-intro p {
  text-align: center !important;
}


/* ===== v37.1 forced fixes ===== */
.dmh-header-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 12px 14px !important;
}
@media (min-width: 640px) {
  .dmh-header-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px 18px !important;
  }
}
.dmh-cat-intro,
.dmh-cat-intro h3,
.dmh-cat-intro p {
  text-align: center !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.dmh-banner-wrap { display: none !important; height: 0 !important; overflow: hidden !important; }

/* Category view: chips + full feed grid */
.dmh-app.dmh-nav-sub .dmh-feed {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
@media (min-width: 640px) {
  .dmh-app.dmh-nav-sub .dmh-feed {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (min-width: 1024px) {
  .dmh-app.dmh-nav-sub .dmh-feed {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
.dmh-app.dmh-nav-sub .dmh-subtopics {
  display: block !important;
  visibility: visible !important;
}
.dmh-app.dmh-nav-sub .dmh-subtopics-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
.dmh-app.dmh-nav-sub .dmh-toolbar {
  display: flex !important;
  visibility: visible !important;
}
.dmh-card.is-locked {
  min-height: 180px;
}

/* ============================================================
   DMH FIX BLOCK — v38-patch (issues #1–#3)
   ============================================================ */

/* FIX #1: header-inner সবসময় column — flex-wrap:wrap ওভাররাইড */
.dmh-header-inner,
.dmh-app .dmh-header-inner {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;      /* ← wrap বন্ধ করা হলো */
  align-items: stretch !important;
  gap: 10px !important;
  padding: 12px 14px !important;
}
@media (min-width: 640px) {
  .dmh-header-inner,
  .dmh-app .dmh-header-inner {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    padding: 14px 18px !important;
  }
}

/* FIX #2: dmh-cat-intro center — nav-sub state-এও দেখা যাবে */
.dmh-cat-intro,
.dmh-cat-intro h3,
.dmh-cat-intro p,
.dmh-app.dmh-nav-deep .dmh-cat-intro,
.dmh-app.dmh-nav-deep .dmh-cat-intro h3,
.dmh-app.dmh-nav-deep .dmh-cat-intro p {
  text-align: center !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* FIX #3: banner-wrap সম্পূর্ণ রিমুভ — desktop-এও দেখাবে না */
.dmh-banner-wrap,
.dmh-app .dmh-banner-wrap,
.dmh-app.dmh-nav-deep .dmh-banner-wrap {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   DMH FIX BLOCK — part 2  (3-level nav layout)
   ============================================================ */

/* ── Level 2 (nav-sub): Subject selected, show category grid ── */
.dmh-app.dmh-nav-sub .dmh-header       { display: none !important; }
.dmh-app.dmh-nav-sub .dmh-banner-wrap  { display: none !important; }
.dmh-app.dmh-nav-sub .dmh-cat-intro    { display: none !important; }
.dmh-app.dmh-nav-sub .dmh-cat-grid     { display: none !important; }
.dmh-app.dmh-nav-sub .dmh-topics       { display: none !important; }
.dmh-app.dmh-nav-sub .dmh-toolbar      { display: none !important; }
.dmh-app.dmh-nav-sub .dmh-feed         { display: none !important; }
/* Show ONLY the category/topic grid */
.dmh-app.dmh-nav-sub .dmh-subtopics    { display: block  !important; }
.dmh-app.dmh-nav-sub #dmh-topics-section { display: block !important; padding: 0 !important; margin: 0 !important; }

/* Category grid on Level 2 */
.dmh-app.dmh-nav-sub .dmh-subtopics-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 4px 0 !important;
}
@media (min-width: 480px) {
  .dmh-app.dmh-nav-sub .dmh-subtopics-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 768px) {
  .dmh-app.dmh-nav-sub .dmh-subtopics-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Category button (Level 2 cards) */
.dmh-app.dmh-nav-sub .dmh-sub-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 18px 10px !important;
  min-height: 80px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  border: 1.5px solid var(--dmh-slate-200) !important;
  background: #fff !important;
  color: var(--dmh-slate-700) !important;
  transition: all 0.15s ease !important;
  text-align: center !important;
}
.dmh-app.dmh-nav-sub .dmh-sub-btn:hover {
  border-color: #a5b4fc !important;
  background: #f0f4ff !important;
  transform: translateY(-2px) !important;
}
.dmh-app.dmh-nav-sub .dmh-sub-btn.is-active {
  border-color: #6366f1 !important;
  background: linear-gradient(145deg, #eef2ff, #fff) !important;
  color: #4338ca !important;
}
.dmh-sub-name {
  display: block;
  line-height: 1.3;
}
.dmh-sub-count {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--dmh-slate-400);
  margin-top: 2px;
}
.dmh-app.dmh-nav-sub .dmh-sub-btn.is-active .dmh-sub-count {
  color: #818cf8 !important;
}

/* ── Level 2 (nav-sub): category topic list only — NO feed ── */
.dmh-app.dmh-nav-sub .dmh-header         { display: none !important; }
.dmh-app.dmh-nav-sub .dmh-banner-wrap    { display: none !important; }
.dmh-app.dmh-nav-sub .dmh-cat-intro      { display: none !important; }
.dmh-app.dmh-nav-sub .dmh-cat-grid       { display: none !important; }
.dmh-app.dmh-nav-sub .dmh-topics         { display: none !important; }
.dmh-app.dmh-nav-sub .dmh-featured       { display: none !important; }
.dmh-app.dmh-nav-sub .dmh-feed           { display: none !important; }
.dmh-app.dmh-nav-sub .dmh-toolbar        { display: none !important; }
.dmh-app.dmh-nav-sub #dmh-topics-section { display: block !important; }
.dmh-app.dmh-nav-sub .dmh-subtopics:not(.dmh-is-hidden):not([hidden]) {
  display: block !important;
  margin-top: 8px;
}

.dmh-subtopics-intro {
  text-align: center;
  margin-bottom: 16px;
}
.dmh-subtopics-heading {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
}
.dmh-subtopics-hint {
  margin: 0;
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 500;
}

/* Mobile: single tag alone → full width + extra horizontal padding */
@media (max-width: 639px) {
  .dmh-subtopics-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dmh-subtopics-grid .dmh-sub-btn:only-child,
  .dmh-subtopics-grid .dmh-sub-btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ── Level 3 (nav-feed): clean mnemonic feed — NO topic chips ── */
.dmh-app.dmh-nav-feed .dmh-header         { display: none !important; }
.dmh-app.dmh-nav-feed .dmh-banner-wrap    { display: none !important; }
.dmh-app.dmh-nav-feed .dmh-cat-intro      { display: none !important; }
.dmh-app.dmh-nav-feed .dmh-cat-grid       { display: none !important; }
.dmh-app.dmh-nav-feed .dmh-topics         { display: none !important; }
.dmh-app.dmh-nav-feed .dmh-featured       { display: none !important; }
.dmh-app.dmh-nav-feed .dmh-subtopics      { display: none !important; }
.dmh-app.dmh-nav-feed .dmh-toolbar        { display: flex !important; }
.dmh-app.dmh-nav-feed #dmh-topics-section { display: block !important; }
.dmh-app.dmh-nav-feed .dmh-feed {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  visibility: visible !important;
}
@media (min-width: 640px) {
  .dmh-app.dmh-nav-feed .dmh-feed {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (min-width: 1024px) {
  .dmh-app.dmh-nav-feed .dmh-feed {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ── sub-btn pointer fix ── */
.dmh-subtopics .dmh-sub-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ============================================================
   HOME VIEW — category grid + daily featured (no mixed feed)
   ============================================================ */
.dmh-app.dmh-view-home .dmh-feed,
.dmh-app.dmh-view-home .dmh-toolbar {
  display: none !important;
}
.dmh-app.dmh-view-home .dmh-featured {
  display: block !important;
  margin-top: 28px;
  padding-top: 8px;
}

.dmh-featured-head {
  margin-bottom: 14px;
  text-align: center;
}
.dmh-featured-title {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.dmh-featured-sub {
  margin: 0;
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 500;
}
.dmh-featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .dmh-featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .dmh-featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.dmh-featured-card {
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dmh-featured-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
}
.dmh-featured-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px;
  color: #64748b;
}

/* Category page: featured stays hidden */
.dmh-app.dmh-view-category .dmh-featured {
  display: none !important;
}