/* =========================================================
   1️⃣ GLOBAL RESET
   Premium Clean Base
========================================================= */

/* =========================================================
   FILE GUIDE
   01. Global foundation and reusable layout
   02. Header, navigation, hero, and search
   03. Categories, word lists, and word details
   04. Authentication, footer, and page transitions
   05. Panels, country pages, profile, and settings
   06. Search suggestions
   07. Shared theme-transition support
   08. Responsive breakpoints (always kept at the end)
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth; /* Smooth scrolling everywhere */
}

:root {
  --header-offset: 78px;
}

/* =========================================================
   BASE BODY
   Premium Soft Background + Smooth Feel
========================================================= */

body {
  font-family: "Poppins", sans-serif;

  /* Soft modern gradient */
  background: linear-gradient(135deg, #f1f4f7 0%, #dad8f1 50%, #c0d3f1 100%);

  color: #1a1a1a;

  min-height: 100vh;

  /* Smooth global transition */
  transition:
    background 0.4s ease,
    color 0.4s ease;
}

/* =========================================================
   2️⃣ MAIN CONTAINER
   More Balanced & Professional Spacing
========================================================= */

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
  /* Smooth fade when layout loads */
  animation: fadeInPage 0.6s ease forwards;
}

/* =========================================================
   ✨ GLOBAL SMOOTH ANIMATION
   Used For Page Load Feel
========================================================= */

@keyframes fadeInPage {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   3️⃣ HEADER
   Premium Floating Glass Design
========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 5000;

  /* Premium glass effect */
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  background: rgba(255, 255, 255, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.65);
  padding: 15px 0;
  /* Smooth floating shadow */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

/* Layout */
.header-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

/* =========================================================
   LEFT SECTION — LOGO
========================================================= */

.logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: default;

  transition: transform 0.3s ease;
}

.logo-area:hover {
  transform: none;
}

.logo {
  width: 40px;
  height: 40px;

  border-radius: 50%;

  object-fit: cover;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.logo-area:hover .logo {
  transform: none;
  box-shadow: none;
}

.site-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;

  transition: color 0.3s ease;
}

.logo-area:hover .site-title {
  color: inherit;
}

/* Only title should be clickable, logo stays static */
.site-title.clickable-title {
  cursor: pointer;
}

.site-title.clickable-title:hover {
  color: #2a5cff;
}
/* =========================================================
   PREMIUM DESKTOP MENU BUTTON
========================================================= */

.desktop-menu-btn {
  width: 58px;
  height: 48px;

  border-radius: 14px;

  border: 1px solid rgba(42, 92, 255, 0.25);

  background: linear-gradient(145deg, #ffffff, #f3f6ff);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 5px;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* Bars */
.desktop-menu-btn span {
  width: 20px;
  height: 3px;

  border-radius: 10px;

  background: #2a5cff;

  transition: all 0.3s ease;
}

/* Hover Effect */
.desktop-menu-btn:hover {
  background: #2a5cff;
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(42, 92, 255, 0.3);
}

/* Change bar color on hover */
.desktop-menu-btn:hover span {
  background: white;
}

/* Click effect */
.desktop-menu-btn:active {
  transform: scale(0.93);
}

/* =========================================================
   CENTER — BRANDING
========================================================= */

.branding {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  background: #4704ff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  transition: transform 0.3s ease;
}

.branding:hover {
  transform: scale(1.05);
}

/* =========================================================
   RIGHT — HEADER BUTTONS
========================================================= */

.header-controls {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Buttons */
.header-controls button {
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid #8364f5;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  background: #ffffff;
  color: #1e40af;
  transition: all 0.3s ease;
}

/* Hover effect */
.header-controls button:hover {
  background: #2a5cff;
  color: white;

  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(42, 92, 255, 0.3);
}

#rafiTutorBtn {
  white-space: nowrap;
  background: linear-gradient(135deg, #5b21b6, #2563eb);
  border-color: rgba(91, 33, 182, 0.55);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.24);
}

#rafiTutorBtn:hover,
#rafiTutorBtn:focus-visible {
  background: linear-gradient(135deg, #8750de, #0050ff);
  color: #ffffff;
  border-color: #818cf8;
  box-shadow: 0 9px 22px rgba(79, 70, 229, 0.34);
}

#rafiTutorBtn:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.38);
  outline-offset: 3px;
}

#rafiTutorBtn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.install-app-btn {
  background: linear-gradient(135deg, #0b2f6b, #1d4ed8);
  color: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, 0.36) !important;
  box-shadow: 0 10px 24px rgba(29, 78, 216, 0.34);
}

.install-app-btn:hover {
  background: linear-gradient(135deg, #0a2450, #1e40af) !important;
  color: #ffffff !important;
}

.desktop-panel-content .install-app-btn,
.panel-content .install-app-btn {
  background: linear-gradient(135deg, #0b2f6b, #1d4ed8) !important;
  color: #ffffff !important;
  border: 1px solid rgba(191, 219, 254, 0.42) !important;
  box-shadow: 0 10px 24px rgba(29, 78, 216, 0.28);
}

.desktop-panel-content .install-app-btn:hover,
.panel-content .install-app-btn:hover {
  background: linear-gradient(135deg, #0a2450, #1e40af) !important;
  transform: translateX(6px);
}
/* ========================================================= */
/* ===================== HERO SECTION ====================== */
/* Premium Centered Hero With Smooth Animation */
/* ========================================================= */

.hero {
  text-align: center;

  padding: 20px 20px 20px 20px;
  position: relative;
  z-index: 1000;
  /* Soft premium background feel */
  background: linear-gradient(180deg, rgba(42, 92, 255, 0.05), transparent);

  border-radius: 0 0 40px 40px;

  animation: heroFadeIn 0.8s ease forwards;
}
#homePage {
  position: relative;
  z-index: 1;
}

/* ================= HERO ANIMATION ================= */

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

/* ================= HERO TITLE ================= */

.hero h1 {
  font-size: 50px;
  font-weight: 700;

  background: linear-gradient(90deg, #2828f5, #2260f2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  margin-bottom: 15px;

  transition: transform 0.3s ease;
}

.hero h1:hover {
  transform: scale(1.05);
}

/* ================= HERO SUBTITLE ================= */

.hero p {
  font-size: 18px;
  font-weight: 500;

  opacity: 0.85;

  margin-bottom: 30px;

  letter-spacing: 0.3px;
}

/* ========================================================= */
/* ================= SEARCH CONTAINER ====================== */
/* Premium Floating Search Box */
/* ========================================================= */

.search-container {
  max-width: 520px;
  margin: 0 auto;
  animation: searchFadeIn 0.6s ease forwards;
}

/* Smooth appearance */
@keyframes searchFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= SEARCH INPUT ================= */

#searchInput {
  width: 100%;

  padding: 14px 18px;

  font-size: 16px;
  font-weight: 500;

  border-radius: 14px;
  border: 1px solid #dbe2f0;

  outline: none;

  background: #ffffff;

  transition: all 0.3s ease;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

/* Focus Effect */
#searchInput:focus {
  border-color: #2a5cff;
  box-shadow: 0 8px 25px rgba(42, 92, 255, 0.2);
  transform: translateY(-2px);
}

/* ================= WORD COUNTER ================= */

#wordCount {
  margin-top: 20px;

  font-size: 14px;
  font-weight: 500;

  opacity: 0.6;

  transition: opacity 0.3s ease;
}

#wordCount:hover {
  opacity: 1;
}
.home-sprachwelt-cta {
  width: min(520px, 100%);
  min-height: 52px;
  margin: 18px auto 4px;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 30px;
  background: linear-gradient(135deg, #2a5cff 0%, #6d4cff 58%, #17a886 100%);
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
  cursor: pointer;
  /* 1. Apply the infinite border shine animation */
  animation: border-shine 4s infinite alternate ease-in-out;
  transition:
    transform 0.30s ease,
    box-shadow 0.30s ease,
    border-color 0.30s ease;
}

/* 2. Define the shining border timeline */
@keyframes border-shine {
  0% { border-color: #ffffff; }
  33% { border-color: #406dff; }
  66% { border-color: #00ffea; }
  100% { border-color: #ffffff; }
}

.home-sprachwelt-cta:hover {
  transform: translateY(-3px);
  /* Retains hover styles smoothly */
}

.home-sprachwelt-cta:active {
  transform: scale(0.97);
}

/* =========================================================
   6️⃣ CATEGORY BUTTONS
   Premium Modern Category Grid
========================================================= */

/* Container */
.category-nav {
  display: flex;
  flex-wrap: wrap;

  gap: 16px;

  justify-content: center;

  padding: 0px 20px;

  animation: categoryFadeIn 0.6s ease forwards;
}

/* Smooth entry */
@keyframes categoryFadeIn {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Buttons */
.category-nav button,
.category-btn {
  padding: 12px 22px;

  border-radius: 30px;

  border: 1px solid rgb(40, 87, 243);

  cursor: pointer;

  background: rgba(255, 255, 255, 0.009);

  backdrop-filter: blur(15px);

  font-weight: 600;
  font-size: 14px;

  color: #0b0b0b;

  transition: all 0.3s ease;

  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.03);
}

/* Hover Effect */
.category-nav button:hover,
.category-btn:hover {
  background: #2a5cff;
  color: white;

  transform: translateY(-4px);

  box-shadow: 0 12px 25px rgba(42, 92, 255, 0.3);
}

/* Active Click Effect */
.category-nav button:active,
.category-btn:active {
  transform: scale(0.95);
}

/* =========================================================
   7️⃣ VERTICAL WORD LIST (CATEGORY PAGE)
   Premium List With Smooth Hover & Cards
========================================================= */

/* ================= WORD ITEM ================= */

#categoryPage {
  background: rgb(223, 226, 251);
  padding: 30px 15px;
}
.vertical-word-item {
  display: flex;
  align-items: center;

  padding: 13px 16px;
  margin-bottom: 10px;

  border-radius: 14px;

  background: rgb(255, 255, 255);

  border: 1px solid rgba(213, 193, 193, 0.74);

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03);
}

/* Hover Effect */
.vertical-word-item:hover {
  transform: translateX(10px);
  background-color: #f1f5ff;
  box-shadow: 0 12px 30px rgba(65, 54, 54, 0.416);
}

/* ================= NUMBER ================= */

.word-number {
  width: 45px;

  font-weight: 700;

  color: #2a5cff;

  font-size: 15px;
}

/* ================= WORD TEXT ================= */

.word-text {
  font-size: 18px;

  font-weight: 600;

  color: #111;
}
/* =========================================================
   8️⃣ CATEGORY SEARCH INPUT
   Premium Modern Search Field
========================================================= */

.category-search {
  width: 100%;
  max-width: 750px;

  margin: 30px auto;

  display: block;

  padding: 14px 18px;

  border-radius: 16px;

  border: 1px solid #e2e8f0;

  font-size: 15px;
  font-weight: 500;

  outline: none;

  background: white;

  transition: all 0.3s ease;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03);
}

/* Focus Effect */
.category-search:focus {
  border-color: #2a5cff;

  box-shadow: 0 10px 25px rgba(42, 92, 255, 0.2);

  transform: translateY(-2px);
}

/* =========================================================
   CATEGORY EXPLAINER (DE visible, EN/BN optional)
========================================================= */

.category-explainer {
  max-width: 750px;
  margin: 10px auto 20px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(145deg, #f8fbff, #eef4ff);
  border: 1px solid #dbe7ff;
  box-shadow: 0 10px 24px rgba(42, 92, 255, 0.08);
  animation: categoryExplainIn 0.35s ease;
}

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

.category-explainer h3 {
  font-size: 17px;
  color: #1e40af;
  margin-bottom: 8px;
}

.category-explainer-de,
.category-explain-panel p {
  font-size: 14px;
  line-height: 1.62;
  color: #1f2937;
  white-space: pre-line;
}

.category-explain-btn {
  border: 1px solid #bfdbfe;
  background: #ffffff;
  color: #1d4ed8;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.category-explain-btn:hover,
.category-explain-btn.active {
  background: #2a5cff;
  color: #ffffff;
  border-color: #2a5cff;
}

.category-explain-panel {
  margin-top: 8px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px;
  transform: translateY(0);
  transition:
    max-height 0.28s ease,
    opacity 0.25s ease,
    transform 0.25s ease,
    margin-top 0.25s ease,
    padding 0.25s ease;
}

.category-explain-panel h4 {
  font-size: 13px;
  color: #1e3a8a;
  margin-bottom: 6px;
}

.category-explain-panel.collapsed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}

/* =========================================================
   9️⃣ WORD DETAIL PAGE
   Premium Glass Card Style
========================================================= */

/* Top bar spacing */
.detail-topbar {
  margin-bottom: 10px;
}
#wordDetailPage {
  background: rgb(224, 228, 235);
  border-radius: 20px;
  padding: 35px;
  margin: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  border: 2px solid #8fb8f9;
}
/* Card */
.detail-card {
  background: rgba(69, 52, 254, 0.906);
  backdrop-filter: blur(20px);
  padding: 30px;
  border-radius: 24px;
  max-width: 1000px;
  margin: auto;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
  animation: detailFadeIn 0.5s ease forwards;
}

/* Smooth entry */
@keyframes detailFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Title */
.detail-title {
  text-align: center;
  margin-bottom: 35px;
  font-size: 32px;
  font-weight: 700;
  color: #fcfdff;
}

.detail-level {
  margin: 0 0 28px;
  color: #dbeafe;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.detail-title.has-level {
  margin-bottom: 6px;
}

.detail-category-label {
  display: inline-block;
  font-size: 0.55em;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.82;
  vertical-align: middle;
}

/* Section Blocks */
.detail-section {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 16px;
  background: #f8fafc;
  transition: all 0.3s ease;
}

/* Hover effect for explanation blocks */
.detail-section:hover {
  background: #eef4ff;

  transform: translateX(6px);
}

/* Section Heading */
.detail-section h3 {
  margin-bottom: 10px;

  color: #2a5cff;

  font-size: 16px;
  font-weight: 700;
}

.detail-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.detail-section-heading h3 {
  margin-bottom: 0;
}

.easy-examples-toggle {
  max-width: 100%;
  padding: 7px 12px;
  border: 1px solid rgba(42, 92, 255, 0.3);
  border-radius: 999px;
  background: #ffffff;
  color: #2a5cff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.easy-examples-toggle:hover {
  border-color: #2a5cff;
  box-shadow: 0 6px 16px rgba(42, 92, 255, 0.16);
  transform: translateY(-1px);
}

.easy-examples-toggle:focus-visible {
  outline: 3px solid rgba(42, 92, 255, 0.24);
  outline-offset: 2px;
}

.easy-examples-toggle.active {
  border-color: #2a5cff;
  background: #2a5cff;
  color: #ffffff;
}

.word-examples-content {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  opacity: 1;
  transition:
    height 0.36s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}

.word-examples-content.is-changing {
  opacity: 0;
  transform: translateY(4px);
}

@media (prefers-reduced-motion: reduce) {
  .easy-examples-toggle,
  .word-examples-content {
    transition-duration: 0.01ms;
  }
}

/* Respect \n from JSON meaning/explanations for readable multi-line text */
.detail-section p {
  white-space: pre-line;
  line-height: 1.75;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.verb-example-tense {
  color: #0033ff;
  font-weight: 800;
}

.detail-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.detail-top-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.conjugation-open-btn {
  border: 1px solid #60a5fa;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);
}

.conjugation-open-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.45);
}

.conjugation-open-btn:active {
  transform: translateY(0);
}

#conjugationPage {
  background: rgb(224, 228, 235);
  border-radius: 20px;
  padding: 24px;
  margin: 20px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.18);
  border: 2px solid #8fb8f9;
}

.conjugation-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.conjugation-topbar h1 {
  font-size: 26px;
  color: #1e3a8a;
}

.conjugation-explainer {
  margin-top: 0;
  margin-bottom: 14px;
}

.conjugation-content {
  display: grid;
  gap: 14px;
}

.conjugation-mood {
  border-radius: 16px;
  background: #f8fbff;
  border: 1px solid #dbeafe;
  padding: 14px 0px;
  animation: conjugationMoodIn 0.35s ease;
}

.conjugation-mood h2 {
  font-size: 20px;
  color: #1d4ed8;
  margin-bottom: 10px;
  text-align: center;
}

.conjugation-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: start;
  justify-content: center ;
}

.conjugation-tense-card {
  border-radius: 12px;
  border: 1px solid #a2a2f3;
  background: #ffffff;
  padding: 10px 12px;
  margin: 5px 40px;
  height: auto;
  align-self: start;
  width: fit-content;
  min-width: min(260px, 100%);
  max-width: 100%;
  flex: 0 1 380px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.conjugation-tense-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12);
}

.conjugation-tense-card h3 {
  font-size: 15px;
  color: #1e40af;
  margin-bottom: 8px;
}

.conjugation-person-list {
  list-style: none;
  display: grid;
  gap: 6px;
}

.conjugation-person-list li {
  display: grid;
  grid-template-columns: minmax(64px, 92px) auto;
  justify-content: start;
  align-items: center;
  gap: 8px;
  border-bottom: 1px dashed #77aff8;
  padding-bottom: 5px;
}

.conjugation-person-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.conjugation-person-list span {
  font-size: 12px;
  color: #0f172a;
  font-weight: 700;
}

.conjugation-person-list strong {
  font-size: 13px;
  color: #1d4ed8;
  font-weight: 700;
  text-align: left;
}

.conjugation-empty {
  font-size: 12px;
  color: #64748b;
}

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

/* =========================================================
   🔟 BACK BUTTON
   Premium Pill Style Button
========================================================= */

.back-btn {
  padding: 10px 18px;

  text-decoration: none;

  border: none;

  border-radius: 30px;

  background: #2a5cff;

  color: white;

  font-weight: 600;
  font-size: 14px;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 6px 15px rgba(42, 92, 255, 0.2);
}

/* Hover Effect */
.back-btn:hover {
  transform: translateY(-3px);

  text-decoration: none;

  box-shadow: 0 12px 25px rgba(42, 92, 255, 0.35);

  background: #1e40af;
}

/* Click Effect */
.back-btn:active {
  transform: scale(0.95);

  text-decoration: none;
}

.back-btn:focus-visible {
  text-decoration: none;
}

.level-back-link,
.level-back-link:hover,
.level-back-link:focus-visible,
.level-back-link:active,
.module-back,
.module-back:hover,
.module-back:focus-visible,
.module-back:active,
.download-back,
.download-back:hover,
.download-back:focus-visible,
.download-back:active,
.topic-back,
.topic-back:hover,
.topic-back:focus-visible,
.topic-back:active,
.practice-back,
.practice-back:hover,
.practice-back:focus-visible,
.practice-back:active {
  text-decoration: none;
}

/* =========================================================
   1️⃣1️⃣ AUTH MODAL
   Ultra Premium Glass Authentication System
========================================================= */

/* ================= Overlay ================= */
.modal-overlay {
  position: fixed;
  inset: 0;

  background: rgba(0, 0, 0, 0.6);

  backdrop-filter: blur(18px);

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 2000;

  animation: fadeOverlay 0.35s ease;
}

/* Smooth Overlay Fade */
@keyframes fadeOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ================= Modal Box ================= */
.modal-box {
  width: 450px;

  padding: 40px 35px;

  border-radius: 30px;

  background: rgba(255, 255, 255, 0.85);

  backdrop-filter: blur(30px);

  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);

  text-align: center;

  position: relative;

  animation: modalFloat 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Floating Premium Animation */
@keyframes modalFloat {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ================= Close Button ================= */
.close-btn {
  position: absolute;

  top: 20px;
  right: 24px;

  font-size: 18px;

  cursor: pointer;

  opacity: 0.5;

  transition: all 0.3s ease;
}

.close-btn:hover {
  opacity: 1;

  transform: rotate(90deg) scale(1.2);

  color: #ff3b3b;
}

/* ================= Title ================= */
.modal-box h2 {
  font-size: 24px;

  font-weight: 700;

  margin-bottom: 8px;

  color: #111827;
}

.auth-subtitle {
  margin: 0 0 24px;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}

/* ================= Inputs ================= */
.modal-box input {
  width: 100%;

  padding: 15px;

  margin-bottom: 18px;

  border-radius: 16px;

  border: 1px solid #e5e7eb;

  background: #f9fafb;

  font-size: 14px;

  outline: none;

  transition: all 0.3s ease;
}

/* Input Focus */
.modal-box input:focus {
  border-color: #2a5cff;

  background: white;

  box-shadow: 0 8px 20px rgba(42, 92, 255, 0.15);
}

/* ================= Submit Button ================= */
.modal-box button[type="submit"] {
  width: 100%;

  padding: 15px;

  border-radius: 16px;

  border: none;

  background: linear-gradient(135deg, #6366f1, #4f46e5);

  color: white;

  font-weight: 700;

  font-size: 15px;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
}

/* Hover */
.modal-box button[type="submit"]:hover {
  transform: translateY(-3px);

  box-shadow: 0 15px 30px rgba(79, 70, 229, 0.5);
}

/* Click */
.modal-box button[type="submit"]:active {
  transform: scale(0.96);
}

/* ================= Error Message ================= */
.auth-error {
  color: #ff4d4d;

  font-size: 13px;

  font-weight: 600;

  margin-bottom: 15px;
}

/* ================= Switch Text ================= */
.switch-text {
  margin-top: 18px;

  font-size: 13px;

  color: #6b7280;
}

#switchModeBtn {
  background: none;

  border: none;

  color: #2a5cff;

  font-weight: 600;

  cursor: pointer;

  transition: 0.3s ease;
}

#switchModeBtn:hover {
  text-decoration: underline;
  transform: translateY(-2px);
}

.forgot-password-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
  margin-top: 4px;
  border: none;
  background: transparent;
  color: #2a5cff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    color 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

.forgot-password-btn:hover,
.forgot-password-btn:focus-visible {
  color: #173fb7;
  text-decoration: underline;
  transform: translateY(-2px);
  outline: none;
}

.forgot-password-btn:disabled {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}

/* ================= Hidden Utility ================= */
.hidden {
  display: none;
}

/* Authentication gate keeps protected learning content inaccessible until login. */
body.auth-modal-open { overflow: hidden; }
body.auth-content-locked main,
body.auth-content-locked footer { visibility: hidden; pointer-events: none; }
#authGateSwitch { background: none; border: 0; color: #2a5cff; font-weight: 700; cursor: pointer; }
#authGateClose { border: 0; background: transparent; }

/* =========================================================
   1️⃣2️⃣ FOOTER
   Premium Glass Style Footer
========================================================= */

.footer {
  text-align: left;
  padding: 12px;
  margin-top: 50px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(234 243 255 / 87%));
  backdrop-filter: blur(25px);
  border: 1px solid rgba(30, 64, 175, 0.12);
  border-bottom: none;
  border-radius: 34px 34px 0 0;
  box-shadow:
    0 -18px 42px rgba(50, 87, 210, 0.148),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  animation: footerFadeIn 0.5s ease;
}

.footer-shell {
  padding: clamp(22px, 4vw, 42px);
  border-radius: 26px 26px 0 0;
  background:
    radial-gradient(circle at 10% 15%, rgba(42, 92, 255, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.36);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
}

.footer-brand {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.footer-brand strong {
  color: #102a6b;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 900;
  line-height: 1.12;
}

.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-action {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgb(132 153 221);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(42, 92, 255, 0.1), rgba(34, 197, 94, 0.08)),
    rgba(255, 255, 255, 0.76);
  color: #102a6b;
  box-shadow: 0 12px 28px rgba(30, 64, 175, 0.1);
  font-weight: 600;
  cursor: pointer;
}

.footer-action:hover,
.footer-action:focus-visible {
  color: #ffffff;
  background: linear-gradient(135deg, #2a5cff, #173fb7);
  box-shadow: 0 18px 34px rgba(42, 92, 255, 0.24);
  transform: translateY(-3px);
  outline: none;
}

.footer-email {
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.footer-email:hover,
.footer-email:focus-visible {
  color: #2a5cff;
  transform: translateX(3px);
  outline: none;
}

.footer-social {
  display: grid;
  gap: 16px;
  justify-items: center;
}

.footer-social h2 {
  margin: 0;
  color: #102a6b;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
}

.footer-social-icons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-social-icons a {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(42, 92, 255, 0.14);
  border-radius: 16px;
  color: #102a6b;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 26px rgba(30, 64, 175, 0.1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.footer-social-icons a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2a5cff, #16a34a);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.footer-social-icons i {
  position: relative;
  z-index: 1;
  font-size: 20px;
}

.footer-social-icons a:hover,
.footer-social-icons a:focus-visible {
  color: #ffffff;
  border-color: rgba(42, 92, 255, 0.35);
  box-shadow: 0 18px 34px rgba(42, 92, 255, 0.22);
  transform: translateY(-5px) scale(1.04);
  outline: none;
}

.footer-social-icons a:hover::before,
.footer-social-icons a:focus-visible::before {
  opacity: 1;
}

.footer-copy {
  margin: 20px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(30, 64, 175, 0.1);
  color: #00040a;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

/* Footer Animation */
@keyframes footerFadeIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   1️⃣3️⃣ PAGE FADE TRANSITION
   Smooth Professional Page Transition
========================================================= */

/* Pages fade in smoothly */
#homePage,
#categoryPage,
#wordDetailPage,
#conjugationPage {
  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

/* Active Page */
#homePage.active,
#categoryPage.active,
#wordDetailPage.active,
#conjugationPage.active {
  opacity: 1;

  transform: translateY(0);
}
/* =========================================================
   GLOBAL THEME TRANSITION
   Animates visual theme changes; theme colors live in dark.css.
========================================================= */

body {
  transition:
    background 0.5s ease,
    color 0.5s ease;
}

/* =========================================================
   SECTION BUTTONS (Premium Look)
========================================================= */

.section-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin: 25px 0;
}

.section-btn {
  padding: 10px 18px;

  border-radius: 30px;

  border: none;

  background: #2a5cff;

  color: white;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 6px 15px rgba(42, 92, 255, 0.2);
}

.section-btn:hover {
  background: #1e40af;

  transform: translateY(-3px);

  box-shadow: 0 12px 25px rgba(42, 92, 255, 0.35);
}

/* =========================================================
   TWO COLUMN WORD LIST (Better Spacing + Smooth)
========================================================= */

/* =========================================
   FOUR COLUMN LAYOUT (MAIN CATEGORIES)
========================================= */

.four-column-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* Keep two column as fallback */
.two-column-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
/* =========================================================
   MOBILE AND PANEL BASE STYLES
   Responsive behavior is defined in the unified media section at file end
========================================================= */

/* Mobile Menu Button */
.mobile-menu-btn {
  display: none;
  width: 58px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(42, 92, 255, 0.25);
  background: linear-gradient(145deg, #ffffff, #f3f6ff);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.mobile-menu-btn span {
  width: 20px;
  height: 3px;
  border-radius: 10px;
  background: #2a5cff;
  transition: all 0.3s ease;
}

.mobile-menu-btn:hover {
  background: #2a5cff;
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(42, 92, 255, 0.3);
}

.mobile-menu-btn:hover span {
  background: white;
}

.desktop-menu-btn.is-active span:nth-child(1),
.mobile-menu-btn.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.desktop-menu-btn.is-active span:nth-child(2),
.mobile-menu-btn.is-active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.desktop-menu-btn.is-active span:nth-child(3),
.mobile-menu-btn.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.desktop-menu-btn.is-active,
.mobile-menu-btn.is-active {
  background: linear-gradient(135deg, #1e40af, #2a5cff);
  box-shadow: 0 18px 36px rgba(42, 92, 255, 0.34);
}

.desktop-menu-btn.is-active span,
.mobile-menu-btn.is-active span {
  background: #ffffff;
}

/* =========================================================
   DROPDOWN SIDE PANEL
========================================================= */

.desktop-side-panel,
.mobile-side-panel {
  position: fixed;
  top: var(--header-offset);
  left: auto;
  right: clamp(10px, 2.6vw, 32px);
  width: min(320px, calc(100vw - 20px));
  max-height: calc(100vh - var(--header-offset) - 14px);
  padding: 12px 0 0;
  z-index: 4500;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-22px) scale(0.97);
  transform-origin: top right;
  transition:
    opacity 0.32s ease,
    visibility 0.32s ease,
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.desktop-side-panel.active,
.mobile-side-panel.active {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.desktop-panel-content,
.panel-content {
  width: 100%;
  max-height: calc(100vh - var(--header-offset) - 44px);
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid rgba(42, 92, 255, 0.16);
  border-radius: 0 0 22px 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.88)),
    rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 24px 56px rgba(30, 64, 175, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.desktop-panel-content button,
.panel-content button {
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 13px;
  border: 1px solid rgba(42, 92, 255, 0.12);
  background: rgba(255, 255, 255, 0.78);
  color: #102a6b;
  cursor: pointer;
  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    color 0.28s ease,
    transform 0.28s ease;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 10px 24px rgba(30, 64, 175, 0.08);
}

.desktop-panel-content button:hover,
.desktop-panel-content button:focus-visible,
.panel-content button:hover,
.panel-content button:focus-visible {
  background: linear-gradient(135deg, #2a5cff, #1e40af);
  border-color: rgba(42, 92, 255, 0.34);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(42, 92, 255, 0.22);
  outline: none;
}

.desktop-panel-content .sprachcoach-panel-btn,
.panel-content .sprachcoach-panel-btn {
  background: linear-gradient(135deg, #5b21b6, #2563eb);
  border-color: rgba(91, 33, 182, 0.55);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.2);
}

.desktop-panel-content .sprachcoach-panel-btn:hover,
.desktop-panel-content .sprachcoach-panel-btn:focus-visible,
.panel-content .sprachcoach-panel-btn:hover,
.panel-content .sprachcoach-panel-btn:focus-visible {
  background: linear-gradient(135deg, #8750de, #0050ff);
  border-color: #818cf8;
  color: #ffffff;
}

.desktop-panel-content::-webkit-scrollbar,
.panel-content::-webkit-scrollbar {
  width: 6px;
}

.desktop-panel-content::-webkit-scrollbar-thumb,
.panel-content::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.7);
  border-radius: 8px;
}

/* =========================================================
   CUSTOM PANEL PAGES + USER PROFILE
========================================================= */

:root {
  --panel-hero-height: clamp(170px, 40vw, 400px);
  --panel-card-photo-ratio: 16 / 22;
  --panel-card-photo-height: auto;
  --country-hero-height: clamp(320px, 36vw, 420px);
  --country-card-photo-ratio: 16 / 10;
  --country-card-photo-height: auto;
}
.panel-page-wrap {
  max-width: 1500px;
  margin: 22px auto;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
  animation: panelPageEnter 0.35s ease;
}

.panel-hero-image {
  width: 100%;
  height: var(--panel-hero-height);
  border-radius: 14px;
  background-size: cover;
  background-position: var(--photo-position, center);
  margin-bottom: 16px;
}

.panel-hero-image--sprachwelt {
  height: clamp(220px, 40vw, 420px);
  background-position: center 5%;
}

.panel-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.panel-page-content h1 {
  font-size: 28px;
  margin-bottom: 0;
}

.panel-language-toggle {
  flex: 0 0 auto;
  border: 1px solid rgba(30, 64, 175, 0.22);
  border-radius: 999px;
  background: #ffffff;
  color: #1e40af;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(30, 64, 175, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.panel-language-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(30, 64, 175, 0.18);
}

.panel-page-description {
  line-height: 1.65;
  opacity: 0.85;
  margin-bottom: 14px;
}

.panel-page-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}

.panel-page-cards--sprachwelt {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.panel-page-card {
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #dbe7ff;
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.panel-page-card-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.panel-page-card-link:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.45);
  outline-offset: 3px;
}

.panel-photo-placeholder {
  display: grid;
  place-items: center;
  min-height: 138px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(30, 64, 175, 0.34);
  background:
    linear-gradient(135deg, rgba(219, 234, 254, 0.88), rgba(240, 249, 255, 0.92));
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 14px;
}

.panel-page-photo {
  display: block;
  width: 100%;
  height: var(--photo-height, var(--panel-card-photo-height));
  aspect-ratio: var(--photo-ratio, var(--panel-card-photo-ratio));
  margin-bottom: 12px;
  border-radius: 12px;
  object-fit: cover;
  object-position: var(--photo-position, center);
  background: #e2e8f0;
}
.panel-page-card--sprachwelt .panel-page-photo {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.panel-page-card--sprachwelt {
  padding: 10px;
  overflow: hidden;
}

/* Sprachwelt level cards behave visually like large navigation buttons. */
.panel-page-card--sprachwelt.panel-page-card-link {
  position: relative;
  border: 2px solid #93b4f5;
  background: linear-gradient(145deg, #ffffff, #edf4ff);
  box-shadow:
    0 6px 0 #c7d8f7,
    0 12px 24px rgba(30, 64, 175, 0.12);
  cursor: pointer;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.panel-page-card--sprachwelt .panel-level-action {
  display: block;
  align-self: stretch;
  margin-top: auto;
  padding: 8px 10px;
  border: 1px solid #2563eb;
  border-radius: 9px;
  background: #2563eb;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
  transition:
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.panel-page-card--sprachwelt.panel-page-card-link .panel-page-photo {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}

.panel-page-card--sprachwelt.panel-page-card-link:hover {
  border-color: #2563eb;
  background: linear-gradient(145deg, #ffffff, #e3efff);
  transform: translateY(-6px);
  box-shadow:
    0 8px 0 #8eb2ed,
    0 18px 32px rgba(30, 64, 175, 0.2);
}

.panel-page-card--sprachwelt.panel-page-card-link:hover .panel-level-action {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(37, 99, 235, 0.28);
}

.panel-page-card--sprachwelt.panel-page-card-link:hover .panel-page-photo {
  transform: scale(1.025);
  filter: saturate(1.08);
}

.panel-page-card--sprachwelt.panel-page-card-link:active {
  transform: translateY(1px) scale(0.985);
  box-shadow:
    0 2px 0 #8eb2ed,
    0 7px 15px rgba(30, 64, 175, 0.16);
  transition-duration: 0.12s;
}

.panel-page-card--sprachwelt.panel-page-card-link:focus-visible {
  border-color: #1d4ed8;
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 4px;
}

.panel-page-card--sprachwelt h3 {
  font-size: clamp(12px, 1.15vw, 14px);
  line-height: 1.25;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.panel-page-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(34, 80, 210, 0.14);
}

.panel-page-card h3 {
  font-size: 16px;
  margin-bottom: 8px;
  color: #1e40af;
}

.panel-page-card p,
.panel-card-body {
  font-size: 14px;
  line-height: 1.6;
}

.panel-card-body {
  overflow: hidden;
  margin-bottom: 12px;
  transition: max-height 0.28s ease;
}

.panel-page-card.is-collapsed .panel-card-body {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.panel-page-card.is-expanded .panel-card-body {
  display: block;
}

.panel-card-read-more {
  align-self: flex-start;
  margin-top: auto;
  padding: 8px 12px;
  border: 1px solid rgba(30, 64, 175, 0.22);
  border-radius: 8px;
  background: #ffffff;
  color: #1e40af;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    background-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
}

.panel-card-read-more:hover {
  transform: translateY(-1px);
  background: #1e40af;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(30, 64, 175, 0.2);
}

.panel-page-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.3);
  color: #64748b;
  font-size: 13px;
  text-align: center;
}

.germany-page {
  width: min(1180px, calc(100% - 28px));
  margin: 20px auto 42px;
  display: grid;
  gap: 18px;
  color: #162033;
  animation: germanyPageIn 0.55s ease both;
}

.germany-page,
.germany-page * {
  box-sizing: border-box;
}

.germany-page.is-switching {
  opacity: 0.82;
  transform: translateY(3px) scale(0.998);
  transition:
    opacity 0.26s ease,
    transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.germany-page.has-switched {
  animation: germanyLanguageIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bangladesh-page.has-switched {
  animation: germanyLanguageIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.germany-hero {
  min-height: var(--country-hero-height);
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(20px, 4vw, 42px);
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.24);
}

.germany-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 10, 20, 0.08), rgba(5, 10, 20, 0.36)),
    linear-gradient(90deg, rgba(5, 10, 20, 0.22), transparent 68%);
  pointer-events: none;
}

.germany-hero-copy {
  max-width: 720px;
  position: relative;
  z-index: 1;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.46);
}

.bangladesh-hero-side {
  position: relative;
  z-index: 1;
  margin-left: auto;
  width: min(360px, 100%);
  flex: 0 1 360px;
  display: grid;
  place-items: center;
  gap: 14px;
}

.germany-hero-copy span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  backdrop-filter: blur(10px);
}

.germany-hero-copy h1 {
  margin: 12px 0 10px;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 0.95;
  letter-spacing: 0;
}

.germany-hero-copy p {
  max-width: 650px;
  font-size: clamp(15px, 1.8vw, 19px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
}

.germany-lang-toggle {
  align-self: flex-start;
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: #ffffff;
  color: #111827;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  line-height: 1;
  min-height: 42px;
  min-width: 104px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
  transform: translateY(0) scale(1);
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.34s ease,
    background-color 0.34s ease,
    border-color 0.34s ease,
    color 0.34s ease;
}

.bangladesh-lang-toggle {
  align-self: start;
  margin-bottom: 10px;
}

.germany-lang-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.65) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.germany-lang-toggle:hover {
  transform: translateY(-3px) scale(1.02);
  background: #ffce2e;
  color: #111827;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.germany-lang-toggle:active {
  transform: translateY(-1px) scale(0.99);
}

.germany-lang-toggle:hover::after {
  transform: translateX(120%);
}

.germany-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px;
}

.germany-stat,
.germany-block,
.germany-feature,
.bangladesh-stat,
.bangladesh-block,
.bangladesh-feature {
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}

.germany-stat {
  border-radius: 8px;
  padding: 18px;
  display: grid;
  gap: 5px;
  animation: germanyCardIn 0.55s ease both;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.germany-stat:nth-child(1) {
  border-top: 4px solid #111827;
}

.germany-stat:nth-child(2) {
  border-top: 4px solid #d10f1f;
}

.germany-stat:nth-child(3) {
  border-top: 4px solid #f0bf28;
}

.germany-stat:nth-child(4) {
  border-top: 4px solid #2563eb;
}

.germany-stat:nth-child(5) {
  border-top: 4px solid #16a34a;
}

.germany-stat:hover,
.germany-block:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.14);
}

.germany-stat strong {
  font-size: clamp(26px, 3.5vw, 42px);
  line-height: 1;
  color: #101827;
}

.germany-stat span {
  font-size: 13px;
  color: #516070;
  line-height: 1.35;
}

.germany-block {
  border-radius: 8px;
  padding: clamp(18px, 3vw, 28px);
  animation: germanyCardIn 0.6s ease both;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.germany-section-head {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.germany-section-head h2,
.germany-feature h2 {
  font-size: clamp(22px, 3vw, 34px);
  color: #101827;
  letter-spacing: 0;
}

.germany-section-head p,
.germany-feature p {
  color: #475569;
  line-height: 1.72;
  font-size: 15px;
}

.germany-state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px;
}

.germany-state-grid span {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background:
    radial-gradient(circle at top right, rgba(240, 191, 40, 0.22), transparent 34%),
    linear-gradient(135deg, #ffffff, #f8fafc);
  padding: 13px 12px;
  font-size: 14px;
  font-weight: 800;
  color: #27364a;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  isolation: isolate;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  opacity: 0;
  animation: germanyStateIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.34s ease,
    border-color 0.34s ease,
    background 0.34s ease;
}

.germany-state-grid span:nth-child(1) { animation-delay: 0.02s; }
.germany-state-grid span:nth-child(2) { animation-delay: 0.04s; }
.germany-state-grid span:nth-child(3) { animation-delay: 0.06s; }
.germany-state-grid span:nth-child(4) { animation-delay: 0.08s; }
.germany-state-grid span:nth-child(5) { animation-delay: 0.1s; }
.germany-state-grid span:nth-child(6) { animation-delay: 0.12s; }
.germany-state-grid span:nth-child(7) { animation-delay: 0.14s; }
.germany-state-grid span:nth-child(8) { animation-delay: 0.16s; }
.germany-state-grid span:nth-child(9) { animation-delay: 0.18s; }
.germany-state-grid span:nth-child(10) { animation-delay: 0.2s; }
.germany-state-grid span:nth-child(11) { animation-delay: 0.22s; }
.germany-state-grid span:nth-child(12) { animation-delay: 0.24s; }
.germany-state-grid span:nth-child(13) { animation-delay: 0.26s; }
.germany-state-grid span:nth-child(14) { animation-delay: 0.28s; }
.germany-state-grid span:nth-child(15) { animation-delay: 0.3s; }
.germany-state-grid span:nth-child(16) { animation-delay: 0.32s; }

.germany-state-grid span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: translateX(-120%);
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}

.germany-state-grid span:hover {
  transform: translateY(-3px) scale(1.008);
  border-color: rgba(209, 15, 31, 0.32);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
}

.germany-state-grid span:active {
  transform: translateY(-1px) scale(0.995);
}

.germany-state-grid span:hover::after {
  transform: translateX(120%);
}

.germany-state-grid b {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #111827;
  color: #ffce2e;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  position: relative;
  z-index: 1;
}

.germany-state-grid em {
  position: relative;
  z-index: 1;
  font-style: normal;
}

.germany-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.germany-feature {
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  animation: germanyCardIn 0.65s ease both;
}

.germany-feature:nth-child(2n) {
  animation-delay: 0.05s;
}

.germany-feature:nth-child(3n) {
  animation-delay: 0.1s;
}

.germany-feature:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(37, 99, 235, 0.36);
  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.14);
}

.germany-feature img {
  width: 100%;
  height: var(--photo-height, var(--country-card-photo-height));
  aspect-ratio: var(--photo-ratio, var(--country-card-photo-ratio));
  object-fit: cover;
  object-position: var(--photo-position, center);
  display: block;
  background: #dbeafe;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.germany-feature:hover img {
  transform: scale(1.045);
  filter: saturate(1.1) contrast(1.03);
}

.germany-feature div {
  padding: 18px;
  display: grid;
  gap: 9px;
}

.germany-feature h2 {
  font-size: 20px;
  overflow-wrap: anywhere;
}

.germany-feature p {
  font-size: 14px;
}

.germany-company-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.germany-company-list p {
  position: relative;
  margin: 0;
  padding: 13px 13px 13px 42px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)),
    linear-gradient(90deg, #111827, #d10f1f, #f0bf28);
  border: 1px solid rgba(148, 163, 184, 0.32);
  color: #334155;
  line-height: 1.55;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.germany-company-list p::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 16px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(135deg, #111827 0 33%, #d10f1f 33% 66%, #f0bf28 66%);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
}

.germany-company-list p:hover {
  transform: translateY(-4px);
  border-color: rgba(209, 15, 31, 0.3);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
}

.germany-note {
  margin: 0;
  padding: 12px 14px;
  border-left: 4px solid #d10f1f;
  background: #fff7ed;
  color: #7c2d12;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.bangladesh-page {
  width: min(1180px, calc(100% - 28px));
  margin: 20px auto 42px;
  display: grid;
  gap: 18px;
  color: #123224;
  animation: panelPageEnter 0.35s ease;
}

.bangladesh-page,
.bangladesh-page * {
  box-sizing: border-box;
}

.bangladesh-hero {
  min-height: clamp(340px, 38vw, 450px);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(22px, 4vw, 44px);
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 206, 46, 0.18), transparent 25%),
    radial-gradient(circle at 82% 26%, rgba(255, 255, 255, 0.12), transparent 20%),
    linear-gradient(145deg, #0a5f45 0%, #064a38 48%, #042f24 100%);
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
  box-shadow: 0 26px 60px rgba(10, 34, 27, 0.28);
}

.bangladesh-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 30%, transparent 70%, rgba(255, 255, 255, 0.08)),
    linear-gradient(180deg, rgba(2, 20, 14, 0.06), rgba(2, 20, 14, 0.28));
  pointer-events: none;
}

.bangladesh-hero-copy {
  max-width: 730px;
  position: relative;
  z-index: 1;
  color: #fffef7;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.bangladesh-hero-copy span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  backdrop-filter: blur(10px);
}

.bangladesh-hero-copy h1 {
  margin: 12px 0 10px;
  font-size: clamp(38px, 6vw, 74px);
  line-height: 0.95;
  letter-spacing: 0;
}

.bangladesh-hero-copy p {
  max-width: 670px;
  font-size: clamp(15px, 1.8vw, 19px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
}

.bangladesh-flag-panel {
  position: relative;
  z-index: 1;
  margin-left: auto;
  width: min(360px, 100%);
  flex: 0 1 360px;
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(7, 25, 18, 0.26);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}

.bangladesh-flag-art {
  width: min(290px, 100%);
  aspect-ratio: 5 / 3;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%),
    #006a4e;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 34px rgba(0, 0, 0, 0.2);
}

.bangladesh-flag-art::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.bangladesh-flag-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #f42a41;
  box-shadow: 0 10px 24px rgba(244, 42, 65, 0.3);
}

.bangladesh-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px;
}

.bangladesh-stat,
.bangladesh-block,
.bangladesh-feature {
  border: 1px solid rgba(121, 162, 139, 0.26);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 46px rgba(10, 34, 27, 0.08);
}

.bangladesh-stat {
  border-radius: 8px;
  padding: 18px;
  display: grid;
  gap: 5px;
  animation: germanyCardIn 0.55s ease both;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.bangladesh-stat:nth-child(1) {
  border-top: 4px solid #006a4e;
}

.bangladesh-stat:nth-child(2) {
  border-top: 4px solid #f42a41;
}

.bangladesh-stat:nth-child(3) {
  border-top: 4px solid #0f766e;
}

.bangladesh-stat:nth-child(4) {
  border-top: 4px solid #f0bf28;
}

.bangladesh-stat:nth-child(5) {
  border-top: 4px solid #1d4ed8;
}

.bangladesh-stat:hover,
.bangladesh-block:hover {
  transform: translateY(-4px);
  border-color: rgba(6, 95, 70, 0.38);
  box-shadow: 0 24px 56px rgba(10, 34, 27, 0.14);
}

.bangladesh-stat strong {
  font-size: clamp(26px, 3.5vw, 42px);
  line-height: 1;
  color: #0e1f17;
}

.bangladesh-stat span {
  font-size: 13px;
  color: #54665d;
  line-height: 1.35;
}

.bangladesh-block {
  border-radius: 8px;
  padding: clamp(18px, 3vw, 28px);
  animation: germanyCardIn 0.6s ease both;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.bangladesh-section-head {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.bangladesh-section-head h2,
.bangladesh-feature h2 {
  font-size: clamp(22px, 3vw, 34px);
  color: #0e1f17;
  letter-spacing: 0;
}

.bangladesh-section-head p,
.bangladesh-feature p {
  color: #4b6258;
  line-height: 1.72;
  font-size: 15px;
}

.bangladesh-division-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px;
}

.bangladesh-division-grid span {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(121, 162, 139, 0.28);
  background:
    radial-gradient(circle at top right, rgba(6, 106, 78, 0.18), transparent 34%),
    linear-gradient(135deg, #ffffff, #f8fbf9);
  padding: 13px 12px;
  font-size: 14px;
  font-weight: 800;
  color: #273d33;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  isolation: isolate;
  box-shadow: 0 10px 26px rgba(10, 34, 27, 0.06);
  opacity: 0;
  animation: germanyStateIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.34s ease,
    border-color 0.34s ease,
    background 0.34s ease;
}

.bangladesh-division-grid span:nth-child(1) { animation-delay: 0.02s; }
.bangladesh-division-grid span:nth-child(2) { animation-delay: 0.04s; }
.bangladesh-division-grid span:nth-child(3) { animation-delay: 0.06s; }
.bangladesh-division-grid span:nth-child(4) { animation-delay: 0.08s; }
.bangladesh-division-grid span:nth-child(5) { animation-delay: 0.1s; }
.bangladesh-division-grid span:nth-child(6) { animation-delay: 0.12s; }
.bangladesh-division-grid span:nth-child(7) { animation-delay: 0.14s; }
.bangladesh-division-grid span:nth-child(8) { animation-delay: 0.16s; }

.bangladesh-division-grid span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  transform: translateX(-120%);
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}

.bangladesh-division-grid span:hover {
  transform: translateY(-3px) scale(1.008);
  border-color: rgba(6, 106, 78, 0.32);
  box-shadow: 0 18px 38px rgba(10, 34, 27, 0.12);
}

.bangladesh-division-grid span:active {
  transform: translateY(-1px) scale(0.995);
}

.bangladesh-division-grid span:hover::after {
  transform: translateX(120%);
}

.bangladesh-division-grid b {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #006a4e;
  color: #f8fafc;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  position: relative;
  z-index: 1;
}

.bangladesh-division-grid em {
  position: relative;
  z-index: 1;
  font-style: normal;
}

.bangladesh-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.bangladesh-feature {
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  animation: germanyCardIn 0.65s ease both;
}

.bangladesh-feature:nth-child(2n) {
  animation-delay: 0.05s;
}

.bangladesh-feature:nth-child(3n) {
  animation-delay: 0.1s;
}

.bangladesh-feature:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(6, 106, 78, 0.36);
  box-shadow: 0 24px 54px rgba(10, 34, 27, 0.14);
}

.bangladesh-feature img {
  width: 100%;
  height: var(--photo-height, var(--country-card-photo-height));
  aspect-ratio: var(--photo-ratio, var(--country-card-photo-ratio));
  object-fit: cover;
  object-position: var(--photo-position, center);
  display: block;
  background: #d1fae5;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.bangladesh-feature:hover img {
  transform: scale(1.045);
  filter: saturate(1.08) contrast(1.03);
}

.bangladesh-feature div {
  padding: 18px;
  display: grid;
  gap: 9px;
}

.bangladesh-feature h2 {
  font-size: 20px;
  overflow-wrap: anywhere;
}

.bangladesh-feature p {
  font-size: 14px;
}

.bangladesh-snapshot-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.bangladesh-snapshot-list p {
  position: relative;
  margin: 0;
  padding: 13px 13px 13px 42px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 249, 0.95)),
    linear-gradient(90deg, #006a4e, #f42a41, #f0bf28);
  border: 1px solid rgba(121, 162, 139, 0.28);
  color: #31443b;
  line-height: 1.55;
  box-shadow: 0 10px 24px rgba(10, 34, 27, 0.06);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.bangladesh-snapshot-list p::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 16px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #006a4e;
  box-shadow: 0 0 0 4px rgba(244, 42, 65, 0.14);
}

.bangladesh-snapshot-list p:hover {
  transform: translateY(-4px);
  border-color: rgba(6, 106, 78, 0.34);
  box-shadow: 0 18px 38px rgba(10, 34, 27, 0.12);
}

.bangladesh-note {
  margin: 0;
  padding: 12px 14px;
  border-left: 4px solid #006a4e;
  background: #ecfdf5;
  color: #14532d;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}

/* =========================================================
   SETTINGS + ACCOUNT EXPERIENCE (DESKTOP)
========================================================= */
.settings-wrap {
  max-width: 980px;
  margin: 16px auto;
  padding: 16px;
  display: grid;
  gap: 14px;
}

.settings-head {
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(140deg, #f8fbff, #e8f2ff);
  border: 1px solid #c7dbff;
}

.premium-glow {
  box-shadow:
    0 18px 40px rgba(37, 99, 235, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.settings-head h1 {
  font-size: 28px;
  margin-bottom: 6px;
}

.settings-head p {
  font-size: 14px;
  color: #334155;
}

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

.settings-card {
  background: #ffffff;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.settings-card h3 {
  font-size: 18px;
  color: #1d4ed8;
}

.settings-card label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.settings-help {
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}

.settings-card select,
.settings-card input {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
}

.settings-toggle {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

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

.kpi-item {
  border: 1px solid #dbeafe;
  background: #f8fbff;
  border-radius: 10px;
  padding: 9px 10px;
  display: grid;
  gap: 2px;
}

.kpi-item strong {
  font-size: 18px;
  color: #1e40af;
}

.kpi-item span {
  font-size: 11px;
  color: #475569;
}

.settings-status {
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 10px;
}

.settings-status.ok {
  background: #e7f9ef;
  color: #166534;
}

.settings-status.warn {
  background: #fff7ed;
  color: #9a3412;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.settings-primary,
.settings-secondary,
.settings-cta {
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.settings-primary {
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  color: #fff;
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.22);
}

.settings-secondary {
  background: #eef2ff;
  color: #1e3a8a;
}

.settings-cta {
  background: #0f766e;
  color: #fff;
}

.settings-primary:hover,
.settings-secondary:hover,
.settings-cta:hover {
  transform: translateY(-1px);
}

.settings-word-grid {
  display: grid;
  gap: 8px;
}

.settings-word-item {
  border: 1px solid #dbeafe;
  border-radius: 10px;
  padding: 9px 10px;
  background: #f8fbff;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.settings-word-item:hover {
  background: #eaf2ff;
  transform: translateX(2px);
}

.settings-word-item small {
  color: #64748b;
}

.settings-list-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.settings-history-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.settings-history-item {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

.settings-history-item:hover {
  background: #e2e8f0;
}

.settings-empty {
  font-size: 12px;
  color: #64748b;
}

.settings-textarea {
  width: 100%;
  min-height: 78px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 9px 10px;
  resize: vertical;
}

.settings-card.locked {
  opacity: 0.9;
}

.favorite-btn {
  margin-left: auto;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #1e293b;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.favorite-btn.active {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}

/* Word-detail utility controls for logged-in learning flow */
.learned-btn.active {
  background: #dcfce7;
  border-color: #22c55e;
  color: #166534;
}

.word-note-input {
  width: 100%;
  min-height: 84px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 13px;
  resize: vertical;
}

.word-note-actions,
.word-list-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.compact-toggle-btn {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

body.text-compact {
  font-size: 14px;
}

body.text-large {
  font-size: 17px;
}

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

.user-modal-box {
  width: min(420px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  text-align: left;
  animation: userModalIn 0.22s ease;
}

.warning-modal-box {
  width: min(520px, 92vw);
  text-align: left;
  padding: 28px 24px;
}

.warning-modal-text {
  font-size: 14px;
  line-height: 1.65;
  color: #334155;
  margin-bottom: 10px;
}

.warning-modal-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.warning-modal-actions .settings-primary,
.warning-modal-actions .settings-secondary {
  min-width: 120px;
}

#closeUserInfo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  font-size: 14px;
  font-weight: 700;
  z-index: 3;
}

#closeUserInfo:hover {
  background: rgba(239, 68, 68, 0.2);
}

.user-info-content {
  display: grid;
  gap: 10px;
}

.user-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f0f7ff;
  border: 1px solid #dbeafe;
}

.user-avatar-large {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  color: white;
  font-size: 18px;
}

.user-card-head h3 {
  font-size: 16px;
  margin-bottom: 2px;
}

.user-card-head p {
  font-size: 13px;
  opacity: 0.75;
}

.user-info-row {
  border-radius: 10px;
  background: #f7faff;
  border: 1px solid #dbeafe;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}

.password-preview-wrap {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.password-preview-wrap input {
  flex: 1;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
}

.password-preview-wrap button {
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  background: #1d4ed8;
  color: #fff;
  cursor: pointer;
}

.password-row small {
  margin-top: 8px;
  display: block;
  opacity: 0.8;
  font-size: 11px;
}

.user-action-row {
  display: grid;
  gap: 8px;
}

.user-action-grid {
  display: grid;
  gap: 8px;
}

/* Keep change/delete sections collapsed until user expands them */
.user-action-grid.hidden {
  display: none;
}

.user-action-grid input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
}

.user-action-btn {
  border: none;
  border-radius: 8px;
  padding: 9px 10px;
  background: #1d4ed8;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}

.danger-btn {
  border: none;
  border-radius: 8px;
  padding: 9px 10px;
  background: #dc2626;
  color: #ffffff;
  cursor: pointer;
  font-weight: 600;
}

.app-toast {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 9999;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #16a34a;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.22s ease;
}

.app-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.app-toast.error {
  background: #dc2626;
}

#userInfoModal {
  z-index: 7000;
}

@keyframes userModalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#loginBtn.profile-btn {
  min-width: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 8px 20px rgba(29, 78, 216, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

#loginBtn.profile-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 10px 22px rgba(29, 78, 216, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.profile-avatar-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
}

.profile-avatar-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  transform: translateX(-50%);
}

.profile-avatar-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 14px;
  height: 8px;
  border-radius: 10px 10px 8px 8px;
  background: rgba(255, 255, 255, 0.95);
  transform: translateX(-50%);
}

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

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

@keyframes germanyCardIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes germanyStateIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes germanyLanguageIn {
  from {
    opacity: 0.82;
    transform: translateY(3px) scale(0.998);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ===============================
   SEARCH SUGGESTIONS
================================ */

.search-container {
  position: relative;
  z-index: 3000;
}

/* ===============================
   PREMIUM SEARCH SUGGESTIONS
================================ */

.suggestions-box {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;

  background: #ffffff;

  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);

  max-height: 260px;
  overflow-y: auto;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;

  z-index: 9999;

  pointer-events: auto;
}

/* Active state */
.suggestions-box.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Suggestion item */
.suggestion-item {
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

/* Hover */
.suggestion-item:hover,
.suggestion-item.active {
  background: #e3eff7cb;
}

/* Highlighted letters */
.suggestion-item mark {
  background: none;
  color: #2a5cff;
  font-weight: 700;
}

.submit-word-hint-btn {
  margin-top: 8px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.submit-word-hint-btn:hover {
  background: #dbeafe;
}

/* =========================================================
   THEME TRANSITION SUPPORT
   Shared motion only; dark colors now live in dark.css.
========================================================= */

body,
.header,
.hero,
#homePage,
#categoryPage,
#wordDetailPage,
#conjugationPage,
.footer,
button,
input,
.modal-box,
.vertical-word-item,
.category-nav button {
  transition:
    background-color 0.35s ease,
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.25s ease;
}

/* Authentication modal entrance animation. */
@keyframes fadeInModal {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
}

/* =========================================================
   RESPONSIVE DESIGN (MOBILE/TABLET)
   Unified breakpoints: 1200 / 992 / 768 / 480 / 360
========================================================= */

/* Keep the SprachCoach launcher compact on wide desktop headers. */
@media (min-width: 993px) {
  #rafiTutorBtn {
    padding: 6px 13px;
    font-size: 13px;
  }
}

@media (max-width: 1200px) {
  :root {
    --panel-hero-height: clamp(170px, 40vw, 400px);
    --country-card-photo-ratio: 16 / 9;

  }
  .panel-hero-image--sprachwelt {
  height: clamp(370px, 30vw, 200px);
  background-position: center 10%;
}

  .germany-feature-grid,
  .bangladesh-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .container {
    max-width: 1120px;
    padding: 0 20px;
  }

  .hero h1 {
    font-size: clamp(40px, 5vw, 48px);
  }

  .detail-card {
    max-width: 940px;
    padding: 26px;
  }

  .section-buttons {
    gap: 10px;
  }

  #conjugationPage {
    margin: 16px 14px;
    padding: 20px 16px;
  }

  .conjugation-tense-card {
    margin: 5px 18px;
    flex: 0 1 340px;
  }

}

@media (max-width: 992px) {
  :root {
    --panel-hero-height: clamp(170px, 40vw, 300px);
    --country-hero-height: 340px;
  }
  .panel-hero-image--sprachwelt {
  height: clamp(270px, 30vw, 200px);
  background-position: center 10%;
}

  .germany-page,
  .bangladesh-page {
    width: min(100% - 24px, 900px);
    gap: 14px;
  }

  .germany-hero,
  .bangladesh-hero {
    min-height: 340px;
  }

  .germany-stats,
  .bangladesh-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-page-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-page-cards--sprachwelt {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .panel-page-card--sprachwelt h3 {
    white-space: pre-line;
  }

  .germany-state-grid,
  .bangladesh-division-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .container {
    max-width: 960px;
    padding: 0 18px;
  }

  .header-inner {
    gap: 14px;
  }

  .category-nav {
    gap: 12px;
  }

  .detail-card {
    max-width: 880px;
    padding: 24px;
    border-radius: 20px;
  }

  .detail-section {
    padding: 16px;
  }

  /* Long meaning/examples readability on tablet */
  .detail-section h3 {
    font-size: 15px;
  }

  .detail-section p {
    font-size: 15px;
    line-height: 1.75;
  }

#conjugationPage {
    margin: 14px 12px;
    padding: 18px 14px;
  }

  .conjugation-topbar h1 {
    font-size: 22px;
  }

  .conjugation-grid {
    justify-content: center;
    gap: 10px;
  }

  .conjugation-tense-card {
    margin: 5px 12px;
    flex: 0 1 320px;
  }
}

@media (max-width: 768px) {

  .footer {
    margin-top: 72px;
    padding: 8px;
    border-radius: 26px 26px 0 0;
  }

  .footer-shell {
    padding: 24px 18px;
    border-radius: 20px 20px 0 0;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }

  .footer-brand,
  .footer-social {
    justify-items: center;
  }

  .footer-actions,
  .footer-social-icons {
    justify-content: center;
  }

  .footer-email {
    overflow-wrap: anywhere;
  }

  .panel-page-cards--sprachwelt {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .panel-page-card--sprachwelt {
    padding: 9px;
  }

  .panel-page-card--sprachwelt h3 {
    font-size: 12.5px;
    line-height: 1.22;
  }

  .container {
    padding: 0 14px;
  }

  .logo-area {
    grid-column: 1;
    justify-self: start;
  }

  .header-controls {
    grid-column: 3;
    justify-self: end;
    justify-content: flex-end;
  }

  .site-title {
    font-size: 12px;
  }

  #darkToggle,
  #loginBtn {
    display: none;
  }

  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 38px;
    border-radius: 12px;
    gap: 4px;
  }

  .mobile-menu-btn span {
    width: 17px;
    height: 2.5px;
  }

  .mobile-menu-btn.is-active span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .mobile-menu-btn.is-active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .desktop-menu-btn {
    display: none;
  }

  .hero {
    padding: 18px 14px 20px;
  }

  .hero h1 {
    font-size: clamp(32px, 6vw, 42px);
  }

  .hero p {
    font-size: 15px;
    margin-bottom: 22px;
  }

  #searchInput {
    padding: 12px 14px;
    font-size: 15px;
  }

  .home-sprachwelt-cta {
    width: 100%;
    min-height: 50px;
    margin-top: 16px;
    padding: 13px 18px;
    font-size: 15px;
  }

  .category-nav button {
    width: 100%;
  }

  .category-explainer {
    margin: 8px auto 14px;
    padding: 12px;
    border-radius: 12px;
  }

  .category-explainer h3 {
    font-size: 15px;
  }

  .category-explainer-de,
  .category-explain-panel p {
    font-size: 13px;
    line-height: 1.55;
  }

  .four-column-wrapper,
  .two-column-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  .vertical-word-item {
    font-size: 13px;
    padding: 11px;
  }

  .word-number {
    width: 38px;
    font-size: 12px;
  }

  .word-text {
    font-size: 15px;
  }

  #wordDetailPage {
    margin: 12px 10px;
    padding: 20px 14px;
  }

  /* Keep container spacing consistent on mobile and tablet */

  .detail-card {
    max-width: 100%;
    margin: 12px auto;
    padding: 20px 18px;
    border-radius: 18px;
  }

  .detail-section {
    padding: 13px 12px;
    margin-bottom: 11px;
  }

  .detail-section p {
    font-size: 13.5px;
    line-height: 1.62;
    font-weight: 500;
  }

#conjugationPage {
    margin: 12px 10px;
    padding: 16px 12px;
    border-radius: 16px;
  }

  .conjugation-topbar h1 {
    font-size: 20px;
  }

  .conjugation-grid {
    justify-content: center;
    gap: 10px;
  }

  .conjugation-tense-card {
    width: 100%;
    min-width: 0;
    margin: 4px 0;
  }

  .panel-page-wrap {
    margin: 12px auto;
    padding: 12px;
  }

  .panel-hero-image {
    height: 200px;
  }

  .panel-page-content h1 {
    font-size: 24px;
  }

  .panel-page-heading {
    align-items: flex-start;
  }

  .panel-language-toggle {
    padding: 7px 12px;
    font-size: 12px;
  }

  .germany-page,
  .bangladesh-page {
    width: min(100% - 18px, 720px);
    margin-top: 12px;
    gap: 12px;
  }

  .germany-hero,
  .bangladesh-hero {
    min-height: min(390px, calc(100svh - 120px));
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
    padding: 18px;
    gap: 16px;
    overflow: visible;
  }

  .germany-hero-copy,
  .bangladesh-hero-copy {
    width: 100%;
  }

  .bangladesh-hero-side {
    width: 100%;
    flex-basis: auto;
    margin-left: 0;
  }

  .germany-hero-copy span,
  .bangladesh-hero-copy span {
    font-size: 11px;
    min-height: 26px;
    padding: 4px 9px;
  }

  .germany-hero-copy h1,
  .bangladesh-hero-copy h1 {
    font-size: clamp(34px, 10vw, 52px);
    line-height: 1;
  }

  .germany-hero-copy p,
  .bangladesh-hero-copy p {
    font-size: 14px;
    line-height: 1.55;
  }

  .germany-lang-toggle {
    align-self: flex-end;
    min-height: 40px;
    padding: 9px 14px;
  }

  .bangladesh-flag-panel {
    width: 100%;
    padding: 14px;
    border-radius: 20px;
  }

  .bangladesh-flag-art {
    width: min(260px, 100%);
  }

  .germany-stats,
  .bangladesh-stats,
  .germany-feature-grid,
  .bangladesh-feature-grid,
  .germany-company-list,
  .bangladesh-snapshot-list {
    grid-template-columns: 1fr;
  }

  .germany-state-grid,
  .bangladesh-division-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .germany-state-grid span,
  .bangladesh-division-grid span {
    min-height: 52px;
    padding: 11px 10px;
    font-size: 13px;
    gap: 8px;
  }

  .germany-state-grid b,
  .bangladesh-division-grid b {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .settings-wrap {
    padding: 10px;
    gap: 9px;
  }

  .settings-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .settings-head h1 {
    font-size: 22px;
    margin-bottom: 4px;
  }

  .settings-head p {
    font-size: 13px;
    line-height: 1.45;
  }

  .settings-card {
    padding: 12px;
    gap: 8px;
  }

  .settings-card h3 {
    font-size: 16px;
  }

  .settings-card label {
    font-size: 12px;
    gap: 5px;
  }

  .settings-card select,
  .settings-card input {
    min-height: 40px;
    font-size: 13px;
    padding: 8px 10px;
  }

  .settings-status {
    font-size: 11px;
    padding: 7px 9px;
  }

  .settings-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .settings-primary,
  .settings-secondary,
  .settings-cta {
    min-height: 40px;
    font-size: 13px;
    padding: 9px 10px;
  }

  .favorite-btn {
    margin-left: 0;
    width: 100%;
    min-height: 38px;
    font-size: 12px;
    padding: 8px 10px;
  }

  .settings-word-item {
    padding: 8px 9px;
    border-radius: 9px;
    gap: 8px;
  }

  .settings-word-item span {
    font-size: 13px;
  }

  .settings-word-item small {
    font-size: 11px;
  }

  .settings-kpi-grid,
  .settings-list-actions,
  .word-note-actions,
  .word-list-actions {
    grid-template-columns: 1fr;
  }

  .settings-textarea,
  .word-note-input {
    min-height: 74px;
    font-size: 12px;
  }

  .section-btn,
  .back-btn {
    font-size: 12px;
    padding: 7px 10px;
  }

  .mobile-side-panel {
    width: min(300px, calc(100vw - 20px));
    right: 10px;
    padding: 18px 12px;
  }

  .panel-content button {
    padding: 8px 10px;
    margin: 7px 0;
    font-size: 13px;
    border-radius: 11px;
  }

  .modal-box {
    width: min(80vw, 350px);
    max-height: 84vh;
    overflow-y: auto;
    padding: 20px 14px;
  }

  .user-modal-box {
    width: min(78vw, 330px);
  }

  .warning-modal-box {
    width: min(92vw, 420px);
    padding: 20px 14px;
  }

  .warning-modal-actions {
    flex-direction: column;
  }

  .warning-modal-actions .settings-primary,
  .warning-modal-actions .settings-secondary {
    width: 100%;
    min-width: 0;
  }

}

@media (max-width: 480px) {
  .detail-section-heading {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .detail-section-heading h3 {
    min-width: 0;
    font-size: 15px;
  }

  .easy-examples-toggle {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 10px;
    font-size: 0.68rem;
    line-height: 1;
    box-shadow: none;
  }

  .easy-examples-toggle:hover {
    box-shadow: 0 3px 10px rgba(42, 92, 255, 0.14);
  }

  .footer-actions {
    width: 100%;
  }

  .footer-action {
    flex: 1 1 10%;
  }

  .footer-social-icons a {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  :root {
    --panel-hero-height: 150px;
    --panel-card-photo-ratio: 16 / 20;
    --country-hero-height: min(390px, calc(100svh - 120px));
  }
  .panel-hero-image--sprachwelt {
  height: clamp(200px, 30vw, 200px);
}
  .container {
    padding: 0 12px;
  }

  .header-inner {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
  }

  .header-controls {
    grid-column: 3;
    justify-self: end;
  }

  .site-title {
    display: none;
  }

  .logo {
    width: 34px;
    height: 34px;
  }

  .hero {
    padding: 14px 10px 20px;
  }

  .hero h1 {
    font-size: clamp(26px, 8vw, 34px);
    line-height: 1.2;
  }

  .hero p {
    font-size: 13px;
    margin-bottom: 16px;
  }

  #searchInput {
    font-size: 14px;
    padding: 10px 12px;
  }

  .germany-hero,
  .bangladesh-hero {
    min-height: min(360px, calc(100svh - 112px));
    padding: 14px;
    justify-content: flex-start;
    overflow: visible;
  }

  .germany-hero-copy h1,
  .bangladesh-hero-copy h1 {
    font-size: clamp(32px, 11vw, 42px);
  }

  .germany-hero-copy p,
  .bangladesh-hero-copy p {
    font-size: 13px;
    line-height: 1.5;
  }

  .germany-lang-toggle {
    min-height: 38px;
    min-width: 92px;
    padding: 8px 12px;
    font-size: 12px;
  }

  .bangladesh-flag-panel {
    padding: 12px;
  }

  .bangladesh-flag-art {
    width: min(240px, 100%);
    border-radius: 20px;
  }

  .germany-stats,
  .bangladesh-stats {
    gap: 9px;
  }

  .germany-state-grid,
  .bangladesh-division-grid {
    grid-template-columns: 1fr;
  }

  .germany-block,
  .germany-feature div,
  .germany-stat,
  .bangladesh-block,
  .bangladesh-feature div,
  .bangladesh-stat {
    padding: 14px;
  }

  .germany-section-head,
  .bangladesh-section-head {
    margin-bottom: 14px;
  }

  .germany-section-head h2,
  .germany-feature h2,
  .bangladesh-section-head h2,
  .bangladesh-feature h2 {
    font-size: clamp(19px, 6vw, 24px);
  }

  .germany-section-head p,
  .germany-feature p,
  .germany-company-list p,
  .germany-note,
  .bangladesh-section-head p,
  .bangladesh-feature p,
  .bangladesh-snapshot-list p,
  .bangladesh-note {
    font-size: 13px;
    line-height: 1.58;
  }

  .category-explainer {
    padding: 10px;
    border-radius: 10px;
  }

  .category-explainer h3 {
    font-size: 14px;
  }

  .category-explainer-de,
  .category-explain-panel p {
    font-size: 12px;
    line-height: 1.5;
  }

  .category-explain-btn {
    font-size: 11.5px;
    padding: 6px 9px;
  }

  .four-column-wrapper,
  .two-column-wrapper {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }

  #categoryPage[data-category="Nomen-Verb Verbindung"] .two-column-wrapper,
  #categoryPage[data-category="Redewendungen"] .two-column-wrapper,
  #categoryPage[data-category="Sprichwörter"] .two-column-wrapper,
  #categoryPage[data-category="Best YT Kanäle"] .two-column-wrapper,
  #categoryPage[data-category="Filme & Serien"] .two-column-wrapper,
  #categoryPage[data-category="Feste Wendungen"] .two-column-wrapper {
    grid-template-columns: 1fr !important;
  }

  .detail-top-actions {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }

  .detail-top-actions .favorite-btn {
    margin-left: 0;
  }

  .vertical-word-item {
    padding: 8px 9px;
    border-radius: 10px;
    font-size: 12px;
  }

  .word-number {
    width: 30px;
    font-size: 11px;
  }

  .word-text {
    font-size: 13px;
  }

  #wordDetailPage {
    margin: 8px 6px;
    padding: 12px 8px;
    border-radius: 14px;
  }

.detail-card {
    padding: 14px 12px;
    border-radius: 14px;
  }

  .detail-title {
    font-size: 22px;
    margin-bottom: 12px;
  }

  #conjugationPage {
    margin: 8px 6px;
    padding: 12px 8px;
    border-radius: 14px;
  }

  .conjugation-topbar h1 {
    font-size: 17px;
  }

  .conjugation-mood {
    padding: 10px;
    border-radius: 12px;
  }

  .conjugation-mood h2 {
    font-size: 16px;
  }

  .conjugation-tense-card {
    padding: 8px 9px;
  }

  .conjugation-tense-card h3 {
    font-size: 13px;
  }

  .conjugation-person-list span,
  .conjugation-person-list strong {
    font-size: 12px;
  }

  .conjugation-person-list li {
    grid-template-columns: minmax(58px, 82px) auto;
    gap: 6px;
  }

  .conjugation-tense-card {
    margin: 4px 0;
  }

  .settings-head {
    padding: 12px;
    border-radius: 12px;
  }

  .settings-head h1 {
    font-size: 19px;
    margin-bottom: 3px;
  }

  .settings-head p {
    font-size: 12px;
  }

  .settings-card {
    padding: 10px;
    border-radius: 12px;
    gap: 7px;
  }

  .settings-card h3 {
    font-size: 15px;
  }

  .settings-card label {
    font-size: 11.5px;
  }

  .settings-card select,
  .settings-card input {
    min-height: 38px;
    font-size: 12px;
    padding: 7px 9px;
  }

  .settings-status {
    font-size: 10.5px;
    padding: 6px 8px;
  }

  .settings-primary,
  .settings-secondary,
  .settings-cta {
    width: 100%;
    font-size: 12px;
    min-height: 38px;
    padding: 8px 9px;
  }

  .settings-word-item {
    padding: 8px;
    border-radius: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .settings-word-item span {
    font-size: 12.5px;
  }

  .settings-word-item small {
    font-size: 10.5px;
  }

  .settings-history-item {
    font-size: 11px;
    padding: 5px 9px;
  }

  .compact-toggle-btn {
    font-size: 12px;
    padding: 7px 8px;
  }

  .detail-section {
    padding: 10px 9px;
    margin-bottom: 9px;
    margin-inline: -10px;
  }

  .detail-section h3 {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .detail-section p {
    font-size: 12.5px;
    line-height: 1.58;
    font-weight: 500;
  }

  .panel-page-cards {
    grid-template-columns: 1fr;
  }

  .panel-page-cards--sprachwelt {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .panel-page-card--sprachwelt {
    padding: 8px;
  }

  .panel-page-card--sprachwelt .panel-page-photo {
    margin-bottom: 8px;
  }

  .panel-page-card--sprachwelt h3 {
    font-size: 11.5px;
    line-height: 1.2;
    margin-bottom: 6px;
  }

  .mobile-side-panel {
    width: min(250px, 74vw);
    right: 8px;
    padding: 16px 10px;
  }

  .panel-content button {
    font-size: 12px;
    padding: 7px 8px;
    margin: 6px 0;
  }

  .modal-box {
    width: min(86vw, 310px);
    max-height: 84vh;
    overflow-y: auto;
    padding: 16px 12px;
    border-radius: 14px;
  }

  .user-modal-box {
    width: min(90vw, 340px);
    max-height: 86vh;
  }

  .warning-modal-box {
    width: min(92vw, 340px);
    padding: 16px 12px;
    border-radius: 14px;
  }

  .warning-modal-text {
    font-size: 13px;
    line-height: 1.55;
  }

}

@media (max-width: 360px) {
  .detail-section-heading {
    gap: 6px;
  }

  .detail-section-heading h3 {
    font-size: 14px;
  }

  .easy-examples-toggle {
    min-height: 28px;
    padding: 4px 7px;
    font-size: 0.62rem;
  }

  :root {
    --panel-hero-height: 135px;
    --country-hero-height: min(330px, calc(100svh - 104px));
  }

  .germany-page,
  .bangladesh-page {
    width: min(100% - 12px, 348px);
    margin-top: 8px;
    gap: 10px;
  }

  .germany-hero,
  .bangladesh-hero {
    min-height: min(330px, calc(100svh - 104px));
    padding: 12px;
    border-radius: 7px;
  }

  .germany-hero-copy h1,
  .bangladesh-hero-copy h1 {
    font-size: clamp(28px, 12vw, 34px);
  }

  .germany-hero-copy p,
  .bangladesh-hero-copy p {
    font-size: 12px;
  }

  .germany-hero-copy span,
  .bangladesh-hero-copy span {
    font-size: 10px;
    letter-spacing: 0.05em;
  }

  .germany-lang-toggle {
    min-height: 36px;
    min-width: 86px;
    padding: 7px 10px;
    font-size: 11.5px;
  }

  .bangladesh-flag-panel {
    padding: 10px;
    border-radius: 16px;
  }

  .bangladesh-flag-art {
    width: min(220px, 100%);
    border-radius: 16px;
  }

  .bangladesh-stats,
  .germany-stats,
  .germany-feature-grid,
  .bangladesh-feature-grid,
  .germany-company-list,
  .bangladesh-snapshot-list,
  .germany-state-grid,
  .bangladesh-division-grid {
    gap: 8px;
  }

  .germany-state-grid span,
  .bangladesh-division-grid span {
    min-height: 46px;
    padding: 9px;
    font-size: 12px;
  }

  .germany-state-grid b,
  .bangladesh-division-grid b {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: 11px;
  }

  .germany-block,
  .germany-feature div,
  .germany-stat,
  .bangladesh-block,
  .bangladesh-feature div,
  .bangladesh-stat {
    padding: 12px;
  }

  .germany-company-list p,
  .bangladesh-snapshot-list p {
    padding: 11px 11px 11px 36px;
  }

  .container {
    padding: 0 10px;
  }

  .header-inner {
    gap: 6px;
  }

  .logo {
    width: 32px;
    height: 32px;
  }

  .mobile-menu-btn {
    width: 38px;
    height: 34px;
    border-radius: 10px;
    gap: 3px;
  }

  .mobile-menu-btn span {
    width: 15px;
    height: 2.5px;
  }

  .mobile-menu-btn.is-active span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }

  .mobile-menu-btn.is-active span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
  }

  .hero h1 {
    font-size: clamp(22px, 8.5vw, 28px);
  }

  .hero p {
    font-size: 12px;
  }

  .category-explainer {
    padding: 9px;
    border-radius: 10px;
  }

  .category-explainer h3 {
    font-size: 13px;
  }

  .category-explainer-de,
  .category-explain-panel p {
    font-size: 11.5px;
    line-height: 1.48;
  }

  .category-explain-btn {
    width: 100%;
    font-size: 11px;
    padding: 6px 8px;
  }

  .four-column-wrapper,
  .two-column-wrapper {
    grid-template-columns: 1fr !important;
  }

  #categoryPage[data-category="Slang"] .four-column-wrapper,
  #categoryPage[data-category="Nomen"] .four-column-wrapper,
  #categoryPage[data-category="Schimpfwörter"] .four-column-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #categoryPage[data-category="Slang"] .vertical-word-item,
  #categoryPage[data-category="Nomen"] .vertical-word-item,
  #categoryPage[data-category="Schimpfwörter"] .vertical-word-item {
    font-size: 11px;
    padding: 7px;
  }

  #categoryPage[data-category="Slang"] .word-number,
  #categoryPage[data-category="Nomen"] .word-number,
  #categoryPage[data-category="Schimpfwörter"] .word-number {
    width: 24px;
    font-size: 10px;
  }

  #categoryPage[data-category="Slang"] .word-text,
  #categoryPage[data-category="Nomen"] .word-text,
  #categoryPage[data-category="Schimpfwörter"] .word-text {
    font-size: 12px;
  }

  .vertical-word-item {
    font-size: 12px;
    padding: 9px;
  }

  .word-number {
    width: 28px;
    font-size: 11px;
  }

  .word-text {
    font-size: 13px;
  }

  #wordDetailPage {
    margin: 6px 4px;
    padding: 10px 6px;
  }

.detail-card {
    padding: 12px 10px;
    border-radius: 12px;
  }

  .detail-title {
    font-size: 20px;
  }

  #conjugationPage {
    margin: 6px 4px;
    padding: 10px 6px;
    border-radius: 12px;
  }

  .conjugation-topbar h1 {
    font-size: 15px;
  }

  .conjugation-mood {
    padding: 8px;
  }

  .conjugation-mood h2 {
    font-size: 14px;
  }

  .conjugation-tense-card h3 {
    font-size: 12px;
  }

  .conjugation-person-list li {
    grid-template-columns: minmax(54px, 76px) auto;
    gap: 6px;
  }

  .conjugation-tense-card {
    margin: 4px 0;
  }

  .settings-head h1 {
    font-size: 17px;
  }

  .settings-card h3 {
    font-size: 14px;
  }

  .settings-card label {
    font-size: 11px;
  }

  .settings-wrap {
    padding: 8px;
    gap: 8px;
  }

  .settings-head {
    padding: 10px;
    border-radius: 10px;
  }

  .settings-head p {
    font-size: 11px;
  }

  .settings-card {
    padding: 9px;
    border-radius: 10px;
    gap: 6px;
  }

  .settings-card select,
  .settings-card input {
    min-height: 36px;
    font-size: 11.5px;
    padding: 7px 8px;
  }

  .settings-status {
    font-size: 10px;
    padding: 6px 7px;
  }

  .settings-primary,
  .settings-secondary,
  .settings-cta,
  .favorite-btn {
    min-height: 36px;
    font-size: 11.5px;
    padding: 7px 8px;
  }

  .settings-word-item span {
    font-size: 12px;
  }

  .settings-word-item small {
    font-size: 10px;
  }

  .settings-textarea,
  .word-note-input {
    min-height: 68px;
    font-size: 11px;
    padding: 7px 8px;
  }

  .settings-history-item {
    font-size: 10.5px;
    padding: 5px 8px;
  }

  .compact-toggle-btn {
    font-size: 11px;
    padding: 7px;
  }

  .detail-section {
    padding: 8px 8px;
    margin-bottom: 8px;
    margin-inline: -10px;
  }

  .detail-section p {
    font-size: 12px;
    line-height: 1.52;
    font-weight: 500;
    word-break: break-word;
  }

  .detail-section h3 {
    font-size: 13px;
    margin-bottom: 7px;
  }

  .panel-hero-image {
    height: 130px;
  }

  .panel-page-content h1 {
    font-size: 20px;
  }

  .panel-page-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .panel-language-toggle {
    padding: 6px 10px;
    font-size: 11px;
  }

  .section-btn,
  .back-btn {
    font-size: 11px;
    padding: 6px 8px;
  }

  .mobile-side-panel {
    width: min(220px, 72vw);
    right: 6px;
    padding: 14px 8px;
  }

  .panel-content button {
    font-size: 11px;
    padding: 6px 7px;
    margin: 5px 0;
  }

  .modal-box {
    width: min(90vw, 280px);
    max-height: 82vh;
    overflow-y: auto;
    padding: 14px 10px;
    border-radius: 12px;
  }

  .user-modal-box {
    width: min(94vw, 310px);
    max-height: 84vh;
  }

  .warning-modal-box {
    width: min(94vw, 300px);
    padding: 14px 10px;
    border-radius: 12px;
  }

  .warning-modal-text {
    font-size: 12px;
    line-height: 1.5;
  }

.footer-action {
    flex: 1 1 100%;
  }
}

/* Keep narrow-header text and logo content constrained. */
@media (max-width: 768px) {
  .logo { flex: 0 0 auto; }
  .site-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 380px) {
  .learning-tool-page { padding: 10px 6px 22px; }
  .learning-tool-head {
    gap: 6px;
    margin-bottom: 9px;
  }
  .learning-tool-head h1 {
    font-size: 1.16rem;
    line-height: 1.12;
  }
  .learning-tool-head p:not(.quality-eyebrow) {
    font-size: .76rem;
    line-height: 1.3;
  }
  .quality-eyebrow {
    font-size: .58rem;
    letter-spacing: .05em;
  }
  .practice-score {
    padding: 5px 7px;
    font-size: .7rem;
  }
  .practice-card {
    padding: 12px 8px;
    border-radius: 11px;
  }
  .practice-card h2 {
    margin: 5px 0 8px;
    font-size: 1.08rem;
  }
  .practice-card > p,
  .practice-feedback {
    font-size: .78rem;
    line-height: 1.3;
  }
  .practice-level {
    padding: 2px 6px;
    font-size: .61rem;
  }
  .practice-card #practiceForm {
    gap: 5px;
    margin-top: 10px;
  }
  .practice-card #practiceForm label { font-size: .72rem; }
  .practice-card #practiceForm input {
    min-height: 38px;
    padding: 6px 8px;
    font-size: .86rem;
  }
  .practice-card #practiceForm .settings-primary,
  .practice-feedback-actions button {
    min-height: 36px;
    padding: 5px 8px;
    font-size: .74rem;
  }
  .category-topbar h1 { font-size: 1.16rem; }
  .category-topbar .category-practice-btn {
    width: min(100%, 270px);
    min-height: 36px;
    padding: 5px 8px;
    font-size: .76rem;
  }
}

/* Accessibility, responsive search, and dictionary quality tools */
.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 10000;
  padding: 10px 14px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.close-btn {
  border: 0;
  background: transparent;
  color: inherit;
  line-height: 1;
}
:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}
.suggestion-item { cursor: pointer; }
.suggestion-item small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: .76rem;
}
.quality-page { padding: 32px 18px 56px; overflow-x: clip; }
.quality-shell { width: min(1100px, 100%); margin: 0 auto; }
.quality-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.quality-heading h1 { margin: 2px 0 6px; }
.quality-eyebrow { margin: 0; color: #2563eb; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.quality-export-btn { min-height: 44px; padding: 10px 16px; border: 0; border-radius: 10px; background: #1d4ed8; color: #fff; font-weight: 700; }
.quality-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 24px 0 14px; }
.quality-kpis article { min-width: 0; padding: 18px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }
.quality-kpis strong { display: block; font-size: clamp(1.5rem, 4vw, 2.2rem); }
.quality-kpis span { color: #64748b; }
.quality-error strong, .quality-badge { color: #b91c1c; }
.quality-warning strong { color: #a16207; }
.quality-note { padding: 13px 15px; border-radius: 10px; background: #eff6ff; color: #1e3a8a; }
.quality-controls { display: grid; grid-template-columns: 180px 240px 1fr; gap: 12px; margin: 22px 0 10px; }
.quality-controls label { color: #475569; font-size: .82rem; font-weight: 600; }
.quality-controls :is(select, input) { display: block; width: 100%; min-height: 44px; margin-top: 5px; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; }
.quality-result-count { color: #64748b; }
.quality-issues { display: grid; gap: 9px; }
.quality-issue { display: grid; grid-template-columns: 78px minmax(150px, 220px) 1fr; align-items: center; gap: 14px; width: 100%; padding: 14px; text-align: left; border: 1px solid #e2e8f0; border-left: 4px solid #dc2626; border-radius: 10px; background: #fff; color: #0f172a; }
.quality-issue.quality-warning { border-left-color: #d97706; }
.quality-issue small { display: block; margin-top: 3px; color: #64748b; overflow-wrap: anywhere; }
.quality-badge { font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.quality-warning .quality-badge { color: #a16207; }
.quality-message { min-width: 0; overflow-wrap: anywhere; }
.quality-empty { padding: 28px; text-align: center; border: 1px dashed #cbd5e1; border-radius: 12px; color: #64748b; }
@media (max-width: 720px) {
  .quality-page { padding: 22px 12px 42px; }
  .quality-heading { flex-direction: column; gap: 14px; }
  .quality-export-btn { width: 100%; }
  .quality-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .quality-kpis article { padding: 13px; }
  .quality-controls { grid-template-columns: 1fr 1fr; }
  .quality-query { grid-column: 1 / -1; }
  .quality-issue { grid-template-columns: 65px 1fr; gap: 9px; }
  .quality-message { grid-column: 1 / -1; }
  .desktop-side-panel button, .mobile-side-panel button { min-height: 44px; }
}
@media (max-width: 420px) {
  .quality-kpis, .quality-controls { grid-template-columns: 1fr; }
  .quality-query { grid-column: auto; }
}

/* Conjugation practice, spaced repetition, and pronunciation */
.learning-tool-page {
  padding: 32px 18px 60px;
  overflow-x: clip;
}
.learning-tool-shell {
  width: min(880px, 100%);
  margin: 0 auto;
}
.learning-tool-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 20px;
  margin-bottom: 22px;
}
.learning-tool-head h1 { margin: 2px 0 5px; }
.practice-score {
  padding: 10px 14px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  white-space: nowrap;
}
.practice-card {
  position: relative;
  padding: clamp(22px, 5vw, 42px);
  border: 1px solid #dbe3ef;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .09);
  text-align: center;
}
.practice-card h2 {
  margin: 10px 0 16px;
  font-size: clamp(1.8rem, 6vw, 3rem);
}
.practice-level {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: .78rem;
  font-weight: 700;
}
.practice-question-count {
  margin: 9px 0 0;
  color: #64748b;
  font-size: .82rem;
  font-weight: 700;
}
.practice-round-complete {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(560px, 100%);
  margin: 0 auto;
}
.practice-round-complete h2 { margin: 2px 0 0; }
.practice-round-complete p { margin: 0; }
.practice-complete-icon {
  font-size: 3rem;
  line-height: 1;
}
.practice-final-score {
  color: #1d4ed8;
  font-size: 1.15rem;
  font-weight: 800;
}
.practice-round-complete .settings-primary {
  min-height: 44px;
  margin-top: 8px;
  padding: 9px 16px;
}
.practice-tense { margin: 8px 0 22px; color: #64748b; }
.practice-card #practiceForm {
  display: grid;
  gap: 11px;
  width: min(480px, 100%);
  margin: 22px auto 0;
  text-align: left;
}
.practice-card #practiceForm input {
  width: 100%;
  min-height: 50px;
  padding: 11px 14px;
  border: 2px solid #cbd5e1;
  border-radius: 11px;
  font-size: 1.05rem;
}
.practice-feedback {
  width: min(560px, 100%);
  margin: 18px auto 0;
  padding: 14px;
  border-radius: 12px;
}
.practice-feedback.is-correct { background: #dcfce7; color: #166534; }
.practice-feedback.is-wrong { background: #fee2e2; color: #991b1b; }
.practice-feedback-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 13px;
}
.practice-feedback-actions button,
.audio-pronounce-btn {
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  color: #1e40af;
  font-weight: 700;
  cursor: pointer;
}
.review-card .audio-pronounce-btn {
  position: absolute;
  top: 18px;
  right: 18px;
}
.review-card { padding-inline: clamp(56px, 8vw, 76px); }
.review-nav-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 52px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  color: #1d4ed8;
  font-size: 2rem;
  line-height: 1;
  transform: translateY(-50%);
  box-shadow: 0 7px 18px rgba(15, 23, 42, .1);
}
.review-prev { left: 10px; }
.review-next { right: 10px; }
.review-due-label {
  margin-top: -8px;
  color: #64748b;
  font-size: .83rem;
}
.category-practice-btn { margin-left: auto; }
.category-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.category-topbar .back-btn {
  grid-column: 1;
  justify-self: start;
}
.category-topbar h1 {
  grid-column: 2;
  justify-self: center;
  margin-inline: 0;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}
.category-topbar .category-practice-btn {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  width: min(100%, 360px);
  margin: 4px auto 0;
}
.review-answer {
  visibility: hidden;
  min-height: 70px;
  margin: 20px 0;
  padding: 16px;
  border-radius: 12px;
  background: #f8fafc;
}
.review-answer.is-visible { visibility: visible; }
.review-ratings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 20px;
}
.review-ratings button {
  min-height: 64px;
  padding: 9px;
  border: 1px solid #cbd5e1;
  border-radius: 11px;
  background: #fff;
  font-weight: 700;
}
.review-ratings small { display: block; margin-top: 3px; color: #64748b; font-weight: 500; }
.review-empty { padding: 30px 0; }
@media (max-width: 650px) {
  .learning-tool-page { padding: 14px 8px 30px; }
  .learning-tool-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    margin-bottom: 12px;
  }
  .learning-tool-head .back-btn { grid-column: 1 / -1; justify-self: start; }
  .learning-tool-head h1 {
    margin: 0 0 3px;
    font-size: clamp(1.3rem, 6vw, 1.65rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  .learning-tool-head p:not(.quality-eyebrow) {
    margin: 0;
    font-size: .86rem;
    line-height: 1.35;
  }
  .quality-eyebrow { font-size: .66rem; }
  .practice-score {
    padding: 6px 9px;
    font-size: .78rem;
  }
  .practice-card {
    padding: 16px 10px;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .07);
  }
  .practice-card h2 {
    margin: 7px 0 10px;
    font-size: clamp(1.2rem, 6.5vw, 1.65rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .practice-card > p {
    margin-block: 7px;
    font-size: .88rem;
  }
  .practice-level {
    padding: 3px 8px;
    font-size: .68rem;
  }
  .practice-question-count {
    margin-top: 6px;
    font-size: .7rem;
  }
  .practice-round-complete { gap: 7px; }
  .practice-complete-icon { font-size: 2.15rem; }
  .practice-final-score { font-size: .95rem; }
  .practice-round-complete .settings-primary {
    min-height: 40px;
    margin-top: 5px;
    padding: 7px 11px;
    font-size: .82rem;
  }
  .practice-card #practiceForm {
    gap: 7px;
    margin-top: 13px;
  }
  .practice-card #practiceForm label { font-size: .8rem; }
  .practice-card #practiceForm input {
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: .95rem;
  }
  .practice-card #practiceForm .settings-primary {
    min-height: 40px;
    padding: 7px 11px;
    font-size: .86rem;
  }
  .practice-feedback {
    margin-top: 11px;
    padding: 10px;
    border-radius: 9px;
    font-size: .86rem;
  }
  .practice-feedback-actions {
    gap: 6px;
    margin-top: 8px;
  }
  .practice-feedback-actions button {
    min-height: 38px;
    padding: 6px 10px;
    font-size: .8rem;
  }
  .review-ratings { grid-template-columns: repeat(2, 1fr); }
  .category-topbar {
    gap: 6px;
  }
  .category-topbar h1 {
    font-size: clamp(1.25rem, 7vw, 1.65rem);
    line-height: 1.15;
  }
  .category-practice-btn {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 300px);
    min-height: 40px;
    margin: 4px auto 0;
    padding: 7px 10px;
    font-size: .84rem;
    line-height: 1.2;
  }
  .detail-top-actions .audio-pronounce-btn,
  .detail-top-actions .review-add-btn,
  .detail-top-actions .practice-open-btn { min-height: 40px; }
}
@media (max-width: 480px) {
  .back-btn {
    display: none !important;
  }

  .review-card {
    padding-inline: 14px;
    padding-bottom: 82px;
  }
  .review-nav-btn {
    top: auto;
    bottom: 14px;
    width: calc(50% - 22px);
    height: 46px;
    transform: none;
  }
  .review-prev { left: 14px; }
  .review-next { right: 14px; }
  .review-card .audio-pronounce-btn {
    position: static;
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 12px auto 0;
  }
}
@media (max-width: 380px) {
  .practice-question-count {
    margin-top: 4px;
    font-size: .63rem;
  }
  .practice-round-complete { gap: 5px; }
  .practice-complete-icon { font-size: 1.8rem; }
  .practice-final-score { font-size: .84rem; }
  .practice-round-complete .settings-primary {
    min-height: 36px;
    margin-top: 4px;
    padding: 5px 8px;
    font-size: .74rem;
  }
}

/* Final shared header below desktop: one centered coach launcher at every size. */
@media (max-width: 992px) {
  .header {
    padding: 10px 0;
  }

  .header .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
  }

  .header .logo-area {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  body .header .branding {
    position: static;
    display: block;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: max-content;
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(0.68rem, 3.3vw, 0.88rem);
    text-overflow: ellipsis;
    transform: none;
  }

  body .header .branding:hover {
    transform: scale(1.05);
  }

  body:has(.header #rafiTutorBtn) .header .branding {
    display: none;
  }

  .header .header-controls {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    align-items: center;
    gap: 8px;
  }

  body:has(.header #rafiTutorBtn) .header .header-controls {
    display: contents;
  }

  body:has(.header #rafiTutorBtn) .header .header-actions {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-items: center;
    gap: 8px;
  }

  .header #rafiTutorBtn {
    position: static;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    z-index: 2;
    width: auto;
    max-width: min(44vw, 150px);
    min-height: 36px;
    padding: 6px 12px;
    overflow: hidden;
    border: none;
    border-radius: 12px;
    background: #ffffff;
    color: #213bff;
    box-shadow: none;
    font-size: 13px;
    text-overflow: ellipsis;
    transform: none;
    white-space: nowrap;
  }

  .header #rafiTutorBtn:hover,
  .header #rafiTutorBtn:focus-visible {
    border: none;
    background: #f5f5f5;
    color: #213bff;
    box-shadow: none;
    transform: translateY(-2px);
  }

  .header #rafiTutorBtn:active {
    transform: scale(0.97);
  }
}

/* Compact, proportional Sprachwelt cards on narrow phones. */
@media (max-width: 468px) {
  .panel-page-cards--sprachwelt {
    gap: 6px;
  }

  .panel-page-card--sprachwelt {
    min-width: 0;
    padding: 6px;
    border-radius: 11px;
  }

  .panel-page-card--sprachwelt .panel-page-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin-bottom: 6px;
    border-radius: 8px;
    object-fit: cover;
  }

  .panel-page-card--sprachwelt h3 {
    margin-bottom: 6px;
    font-size: clamp(10.5px, 3vw, 11px);
    line-height: 1.28;
    text-align: center;
  }

  .panel-page-card--sprachwelt .panel-level-action {
    min-height: 30px;
    padding: 5px 6px;
    border-radius: 7px;
    font-size: 10px;
    line-height: 1.2;
  }
}

/* Shared keyboard access and compact learning controls. */
.skip-link{position:fixed;top:8px;left:8px;z-index:100000;padding:12px 18px;background:#fff;color:#123e79;transform:translateY(-160%);border:2px solid currentColor;border-radius:8px}
.skip-link:focus{transform:none}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid #287be0;outline-offset:3px}
.daily-return{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:16px;margin:16px auto;max-width:1100px;border:1px solid #7186a3;border-radius:12px}
.daily-return a{font-weight:600;text-decoration:underline;padding:10px}
.daily-steps{display:grid;gap:12px;padding-left:24px}
.daily-steps li{padding:16px;border:1px solid #7186a3;border-radius:12px}
.daily-steps li span{display:block;margin-bottom:12px;overflow-wrap:anywhere}
.progress-sync-actions{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}
.progress-sync-actions button{padding:12px;min-height:44px;border:1px solid #7186a3;border-radius:8px;background:transparent;color:inherit;cursor:pointer}
@media(max-width:600px){.modal-box{max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;box-sizing:border-box}.modal-box input{font-size:16px}.daily-steps .progress-primary-link{display:inline-flex;min-height:44px;align-items:center;white-space:normal}.progress-sync-actions{flex-direction:column}.daily-return{margin:12px 16px}.header-inner{min-width:0}.site-title{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.daily-return,*:focus{scroll-behavior:auto!important}}