/* =========================================
   1. UTILITIES & BASE
   ========================================= */
/* Tối ưu vùng an toàn trên iOS */
.pb-safe { 
    padding-bottom: env(safe-area-inset-bottom); 
}

/* Custom Scrollbar (Thanh cuộn gọn gàng) */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

/* Mượt mà khi cuộn popup trên thiết bị cảm ứng */
#flashcard-view { 
    -webkit-overflow-scrolling: touch; 
}


/* =========================================
   2. ANIMATIONS (Toast & Tabs)
   ========================================= */
.tab-content { animation: fadeIn 0.3s ease-in-out; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.toast-in { animation: toastIn 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; }
.toast-out { animation: toastOut 0.3s ease-in forwards; }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.8); }
}


/* =========================================
   3. FLASHCARD 3D MECHANICS
   ========================================= */
/* Các class tiện ích 3D dùng chung */
.preserve-3d { transform-style: preserve-3d; }
.backface-hidden { backface-visibility: hidden; }
.rotate-y-180 { transform: rotateY(180deg); }

/* Vùng chứa thẻ học */
.flashcard-container {
    perspective: 2000px;
    width: 100%;
    max-height: 60vh;
}

/* Hiệu ứng lật nảy (Bouncy flip) */
.flashcard-inner {
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
}

/* Mặt trước và mặt sau của thẻ */
.flashcard-front, .flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
}

/* Decorate riêng cho 2 mặt */
.flashcard-front {
    background: radial-gradient(circle at top right, rgba(255,255,255,1) 0%, rgba(248,250,252,1) 100%);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2), inset 0 2px 5px rgba(255,255,255,0.8);
}

.flashcard-back {
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}