/* ================= GLOBAL STYLING ================= */
body { transition: background 0.3s, color 0.3s; }
body.white { background:#f9fafb; color:#111827; }
body.dim { background:#1f2937; color:#f3f4f6; }
body.dark { background:#0f172a; color:#e5e7eb; }

/* ================= HEADER ================= */
header { transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
body.white header { background:white; color:#111827; }
body.dim header { background:#111827; color:#f3f4f6; }
body.dark header { background:#1e293b; color:#e5e7eb; }

/* ================= SEARCH BAR ================= */
.chatgpt-search input { width:100%; padding:.5rem 1rem; border-radius:.75rem; border:1px solid #e5e7eb; outline:none; transition: border 0.3s, box-shadow 0.3s, background 0.3s, color 0.3s; }
body.white .chatgpt-search input { background:white; color:#111827; }
body.dim .chatgpt-search input { background:#111827; color:#f3f4f6; border-color:#374151; }
body.dark .chatgpt-search input { background:#1e293b; color:#e5e7eb; border-color:#4b5563; }
.chatgpt-search input:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.2); }

/* ================= FLASHCARD ================= */
.flip-card { perspective: 1000px; cursor: pointer; margin-bottom:1rem; }
.flip-card-inner { position: relative; width: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: relative; width: 100%; backface-visibility: hidden; border-radius:1.25rem; padding:1.6rem; box-shadow:0 12px 30px rgba(0,0,0,.08); transition: box-shadow 0.3s, transform 0.3s, background 0.3s, color 0.3s; }
.flip-card-front { font-weight:600; font-size:1.25rem; display:flex; align-items:center; justify-content:center; }
.flip-card-back { transform:rotateY(180deg); }
body.white .flip-card-front, body.white .flip-card-back { background:white; color:#111827; }
body.dim .flip-card-front, body.dim .flip-card-back { background:#111827; color:#f3f4f6; }
body.dark .flip-card-front, body.dark .flip-card-back { background:#1e293b; color:#e5e7eb; }
.flip-card:hover .flip-card-front, .flip-card:hover .flip-card-back { box-shadow:0 20px 45px rgba(0,0,0,.15); }

/* PLAY BUTTON */
.play-btn { padding:.4rem .8rem; border-radius:.75rem; background:#2563eb; color:white; cursor:pointer; transition: background .3s ease; }
.play-btn:hover { background:#1e40af; }

/* TRANSLATION */
.translation { margin-top:.3rem; }
.translation.hidden { display:none; }

/* LANGUAGE SELECT */
.lang-select{ appearance:none; padding:.55rem .9rem; border-radius:.75rem; border:1px solid #e5e7eb; background:#ffffff; color:#111827; box-shadow:0 1px 2px rgba(0,0,0,.05); }
body.dim .lang-select, body.dark .lang-select{ background:#111827; border-color:#374151; color:#f3f4f6; }
.lang-wrap{display:flex;gap:.5rem;align-items:center;}
.lang-badge{font-size:.75rem;color:#6b7280;}
body.dim .lang-badge, body.dark .lang-badge{color:#9ca3af;}

/* QUIZ OPTIONS */
.quiz-option { padding:.5rem 1rem; border-radius:.75rem; border:1px solid #d1d5db; margin-top:.5rem; cursor:pointer; transition: all 0.3s; }
.quiz-option.correct { background:#d1fae5; border-color:#10b981; color:#065f46; }
.quiz-option.wrong { background:#fee2e2; border-color:#ef4444; color:#991b1b; }
.quiz-option:hover { background:#e5e7eb4a; }
.card { padding:1rem; border-radius:1rem; box-shadow:0 4px 15px rgba(0,0,0,.05); background:#fefefe; margin-bottom:1rem; }





body.dim .nav {
    backdrop-filter: blur(16px);
   border-top: 1px solid rgba(0,0,0,.08);
   background-color: #1f29374b;
}


body.dark .nav {
    backdrop-filter: blur(16px);
   border-top: 1px solid rgba(0,0,0,.08);
   background-color: #17202c4b;
}


/* ================= AUDIO PLAYER ================= */

audio {
  width: 100%;
  border-radius: 0.75rem;
  background: transparent;
}

/* DIM MODE → darker professional gray/blue (#0e1520 feel) */
body.dim audio {
  filter:
    invert(0.92)       /* darker base */
    hue-rotate(180deg) /* keep tint natural */
    brightness(0.80)   /* slightly darker */
    contrast(1);       /* maintain clarity */
  opacity: 0.95;       /* subtle polish */
}

/* DARK MODE → deep professional gray/blue (#0e1520 feel) */
body.dark audio {
  filter:
    invert(0.92)       
    hue-rotate(180deg) 
    brightness(0.75)   /* slightly darker than dim mode */
    contrast(1);       
  opacity: 0.95;       
}



/* ================= AUDIO PLAYER ================= */