:where([class^="ri-"])::before {
    content: "\f3c2";
}

body {
    font-family: 'Inter', sans-serif;
}

.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-circle {
    stroke-dasharray: 251.2;
    stroke-dashoffset: 251.2;
    transition: stroke-dashoffset 0.5s ease-in-out;
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.btn-primary {
    background: linear-gradient(135deg, #5F8396 0%, #2F4A61 100%);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(95, 131, 150, 0.3);
}

.progress-bar {
    background: linear-gradient(90deg, #5F8396 0%, #2F4A61 100%);
}

.hero-bg {
    background: linear-gradient(135deg, #BCB9AC15 0%, #5F839610 100%);
    border-bottom: 1px solid #BCB9AC30;
}

.achievement-card {
    background: linear-gradient(135deg, #BCB9AC10 0%, #6F655810 100%);
    border: 1px solid #BCB9AC20;
}

.stat-card {
    background: linear-gradient(135deg, #5F839605 0%, #2F4A6105 100%);
    border: 1px solid #5F839620;
}

.custom-text-white {
    color: #ffffff !important;
}

.custom-text-primary {
    color: #5F8396 !important;
}

.hover\:custom-text-primary:hover {
    color: #5F8396 !important;
}

/* Mirage loader (CSS-only with SVG filter) */
.loader-container {
    --uib-size: 60px;
    --uib-color: #000000;
    --uib-speed: 2.6s;
    --uib-dot-size: calc(var(--uib-size) * 0.23);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--uib-size);
    height: var(--uib-dot-size);
    filter: url('#uib-jelly-ooze');
}

.loader-dot {
    position: absolute;
    top: calc(50% - var(--uib-dot-size) / 2);
    left: calc(0px - var(--uib-dot-size) / 2);
    display: block;
    height: var(--uib-dot-size);
    width: var(--uib-dot-size);
    border-radius: 50%;
    background-color: var(--uib-color);
    animation: loader-stream var(--uib-speed) linear infinite both;
    transition: background-color 0.3s ease;
}

.loader-dot:nth-child(2) { animation-delay: calc(var(--uib-speed) * -0.2); }
.loader-dot:nth-child(3) { animation-delay: calc(var(--uib-speed) * -0.4); }
.loader-dot:nth-child(4) { animation-delay: calc(var(--uib-speed) * -0.6); }
.loader-dot:nth-child(5) { animation-delay: calc(var(--uib-speed) * -0.8); }

@keyframes loader-stream {
    0%, 100% { transform: translateX(0) scale(0); }
    50% { transform: translateX(calc(var(--uib-size) * 0.5)) scale(1); }
    99.999% { transform: translateX(calc(var(--uib-size))) scale(0); }
}

/* Form validation styles */
.input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.input-success {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

.password-strength {
    height: 4px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.strength-weak { 
    background: #ef4444; 
}

.strength-medium { 
    background: #f59e0b; 
}

.strength-strong { 
    background: #10b981; 
}

.custom-bg-primary {
    background-color: #5F8396 !important;
}

/* Floating action button elevation on mobile (to clear bottom nav) */
@media (max-width: 768px) {
    .floating-btn--above-nav {
        bottom: 5rem !important;
        right: 1.25rem !important;
    }
}

/* Custom scrollbar styles */
/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 0; /* Scrollbar width */
    height: 0; /* Horizontal scrollbar height */
}

::-webkit-scrollbar-track {
    background: transparent; /* Track transparent, make content visible */
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5); /* Scrollbar thumb color */
    border-radius: 4px; /* Thumb rounded corners */
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.7); /* Hover color */
}

:root {
	--primary: #5F8396;
	--secondary: #2F4A61;
	--neutral: #BCB9AC;
	--warm: #6F6558;
	--dark: #242527;
	--neutral-light: #BCB9AC20;
	
	/* Light mode colors */
	--bg-primary: #ffffff;
	--bg-secondary: #f9fafb;
	--bg-tertiary: #f3f4f6;
	--text-primary: #242527;
	--text-secondary: #6F6558;
	--border-color: #e5e7eb;
	--card-bg: #ffffff;
	--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	
	/* Primary color variables for light mode */
	--primary-text: #5F8396;
	--primary-bg: #5F8396;
	--primary-border: #5F8396;
	--primary-gradient-from: #5F8396;
	--primary-gradient-to: #2F4A61;
}

/* Dark mode colors */
[data-theme="dark"] {
	--bg-primary: #111822;
	--bg-secondary: #333740;
	--bg-tertiary: #6C6A6A;
	--text-primary: #F3B699;
	--text-secondary: #745850;
	--border-color: #4F362A;
	--card-bg: #333740;
	--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
	
	/* Primary color variables for dark mode */
	--primary-text: #F3B699;
	--primary-bg: #745850;
	--primary-border: #4F362A;
	--primary-gradient-from: #745850;
	--primary-gradient-to: #4F362A;
}

/* Dark mode specific styles */
[data-theme="dark"] body {
	background-color: var(--bg-secondary);
	color: var(--text-primary);
}

[data-theme="dark"] .bg-white {
	background-color: var(--card-bg);
}

[data-theme="dark"] .bg-gray-50 {
	background-color: var(--bg-secondary);
}

[data-theme="dark"] .bg-gray-100 {
	background-color: var(--bg-tertiary);
}

[data-theme="dark"] .bg-gray-200 {
	background-color: var(--bg-tertiary);
}

[data-theme="dark"] .text-dark {
	color: var(--text-primary);
}

[data-theme="dark"] .text-warm {
	color: var(--text-secondary);
}

[data-theme="dark"] .text-secondary {
	color: var(--primary-text);
}

[data-theme="dark"] .border-neutral\/20 {
	border-color: var(--border-color);
}

[data-theme="dark"] .border-gray-100 {
	border-color: var(--border-color);
}

[data-theme="dark"] .border-gray-200 {
	border-color: var(--border-color);
}

[data-theme="dark"] .shadow-sm {
	box-shadow: var(--shadow);
}

[data-theme="dark"] .card-hover:hover {
	background-color: var(--bg-tertiary);
}

[data-theme="dark"] .stat-card {
	background-color: var(--card-bg);
	border-color: var(--border-color);
}

[data-theme="dark"] .achievement-card {
	background-color: var(--card-bg);
	border-color: var(--border-color);
}

[data-theme="dark"] .hero-bg {
	background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

[data-theme="dark"] .custom-text-primary {
	color: var(--primary-text);
}

[data-theme="dark"] .custom-bg-primary {
	background-color: var(--primary-bg);
}

[data-theme="dark"] .bg-primary\/10 {
	background-color: rgba(116, 88, 80, 0.1);
}

[data-theme="dark"] .bg-secondary\/10 {
	background-color: rgba(79, 54, 42, 0.1);
}

[data-theme="dark"] .bg-neutral\/5 {
	background-color: rgba(108, 106, 106, 0.05);
}

[data-theme="dark"] .bg-warm\/10 {
	background-color: rgba(116, 88, 80, 0.1);
}

[data-theme="dark"] .border-primary\/10 {
	border-color: rgba(116, 88, 80, 0.1);
}

[data-theme="dark"] .border-primary\/20 {
	border-color: rgba(116, 88, 80, 0.2);
}

[data-theme="dark"] .border-neutral\/20 {
	border-color: rgba(108, 106, 106, 0.2);
}

[data-theme="dark"] .progress-bar {
	background: linear-gradient(90deg, var(--primary-bg) 0%, var(--primary-gradient-to) 100%);
}

[data-theme="dark"] .progress-ring-circle {
	stroke: var(--primary-bg);
}

[data-theme="dark"] .floating-btn {
	background: linear-gradient(135deg, var(--primary-bg) 0%, var(--primary-gradient-to) 100%);
}

[data-theme="dark"] .floating-btn:hover {
	box-shadow: 0 20px 40px rgba(116, 88, 80, 0.4);
}

[data-theme="dark"] .btn-primary {
	background: linear-gradient(135deg, var(--primary-bg) 0%, var(--primary-gradient-to) 100%);
}

[data-theme="dark"] .btn-primary:hover {
	background: linear-gradient(135deg, var(--primary-gradient-to) 0%, var(--primary-bg) 100%);
}

[data-theme="dark"] .search-container {
	background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
	border-color: var(--border-color);
}

[data-theme="dark"] .search-container:focus-within {
	border-color: var(--primary-bg);
	box-shadow: 0 0 0 4px rgba(116, 88, 80, 0.1);
}

[data-theme="dark"] .search-result {
	background-color: var(--card-bg);
	border-color: var(--border-color);
}

[data-theme="dark"] .dictionary-card {
	background-color: var(--card-bg);
	border-color: var(--border-color);
}

[data-theme="dark"] .dictionary-card:hover {
	box-shadow: 0 8px 25px rgba(116, 88, 80, 0.2);
}

[data-theme="dark"] .korean-text {
	color: var(--primary-text);
}

[data-theme="dark"] .english-text {
	color: var(--text-secondary);
}

[data-theme="dark"] .meaning-text {
	color: var(--text-secondary);
}

[data-theme="dark"] .example-text {
	background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
	border-left-color: var(--primary-bg);
}

[data-theme="dark"] .grammar-table {
	background-color: var(--card-bg);
}

[data-theme="dark"] .grammar-number {
	background: linear-gradient(135deg, rgba(108, 106, 106, 0.2) 0%, rgba(116, 88, 80, 0.1) 100%);
	color: var(--primary-text);
}

[data-theme="dark"] .modal-content {
	background-color: var(--card-bg);
}

[data-theme="dark"] .floating-btn--above-nav {
	background: linear-gradient(135deg, var(--primary-bg) 0%, var(--primary-gradient-to) 100%);
}

[data-theme="dark"] .floating-btn--above-nav:hover {
	box-shadow: 0 20px 40px rgba(116, 88, 80, 0.4);
}

/* Header specific dark mode styles */
[data-theme="dark"] header {
	background-color: rgba(31, 41, 55, 0.95) !important;
	border-color: var(--border-color) !important;
}

[data-theme="dark"] .bg-white\/95 {
	background-color: rgba(31, 41, 55, 0.95) !important;
}

[data-theme="dark"] .backdrop-blur-sm {
	backdrop-filter: blur(8px);
}

/* Navigation links dark mode */
[data-theme="dark"] nav a {
	color: var(--text-primary) !important;
}

[data-theme="dark"] nav a:hover {
	color: var(--primary-text) !important;
}

[data-theme="dark"] .hover\:custom-text-primary:hover {
	color: var(--primary-text) !important;
}

/* Cards and sections dark mode */
[data-theme="dark"] .bg-gradient-to-br {
	background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%) !important;
}

[data-theme="dark"] .from-neutral\/5 {
	--tw-gradient-from: var(--bg-tertiary) !important;
}

[data-theme="dark"] .to-warm\/10 {
	--tw-gradient-to: var(--bg-secondary) !important;
}

[data-theme="dark"] .from-primary\/5 {
	--tw-gradient-from: rgba(230, 223, 201, 0.1) !important;
}

[data-theme="dark"] .to-secondary\/10 {
	--tw-gradient-to: rgba(212, 201, 176, 0.1) !important;
}

/* Button dark mode */
[data-theme="dark"] .btn-primary {
	background: linear-gradient(135deg, var(--primary-gradient-from) 0%, var(--primary-gradient-to) 100%) !important;
	color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-primary:hover {
	background: linear-gradient(135deg, var(--primary-gradient-to) 0%, var(--primary-gradient-from) 100%) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(230, 223, 201, 0.3);
}

/* Progress and stats dark mode */
[data-theme="dark"] .progress-ring-circle {
	stroke: var(--primary-text) !important;
}

[data-theme="dark"] .progress-bar {
	background: linear-gradient(90deg, var(--primary-gradient-from) 0%, var(--primary-gradient-to) 100%) !important;
}

[data-theme="dark"] .bg-primary\/10 {
	background-color: rgba(230, 223, 201, 0.1) !important;
}

/* Modal dark mode */
[data-theme="dark"] .modal-content {
	background-color: var(--card-bg) !important;
}

[data-theme="dark"] .modal-content h2,
[data-theme="dark"] .modal-content label {
	color: var(--text-primary) !important;
}

[data-theme="dark"] .modal-content input,
[data-theme="dark"] .modal-content textarea {
	background-color: var(--bg-tertiary) !important;
	border-color: var(--border-color) !important;
	color: var(--text-primary) !important;
}

[data-theme="dark"] .modal-content input::placeholder,
[data-theme="dark"] .modal-content textarea::placeholder {
	color: var(--text-secondary) !important;
}

/* Mobile navigation dark mode */
[data-theme="dark"] .fixed.bottom-0 {
	background-color: var(--card-bg) !important;
	border-color: var(--border-color) !important;
}

[data-theme="dark"] .fixed.bottom-0 button {
	color: var(--text-primary) !important;
}

[data-theme="dark"] .fixed.bottom-0 button.text-primary {
	color: var(--primary-text) !important;
}

/* Dark mode toggle button styles */
.dark-mode-toggle {
	transition: all 0.3s ease;
}

.dark-mode-toggle.active {
	background-color: var(--primary);
}

.dark-mode-toggle.active .dark-mode-thumb {
	transform: translateX(1.25rem);
}

/* Smooth transitions for theme switching */
* {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Primary color theming for both light and dark modes */
.text-primary,
.custom-text-primary {
	color: var(--primary-text);
}

.bg-primary,
.custom-bg-primary {
	background-color: var(--primary-bg);
}

.border-primary {
	border-color: var(--primary-border);
}

/* Primary gradients for both modes */
.bg-primary-gradient {
	background: linear-gradient(135deg, var(--primary-gradient-from) 0%, var(--primary-gradient-to) 100%);
}

/* Icon colors in both modes */
[data-theme="dark"] .ri-user-3-line,
[data-theme="dark"] .ri-notification-3-line,
[data-theme="dark"] .ri-home-4-line,
[data-theme="dark"] .ri-chat-3-line,
[data-theme="dark"] .ri-book-2-line,
[data-theme="dark"] .ri-arrow-left-line,
[data-theme="dark"] .ri-user-heart-line,
[data-theme="dark"] .ri-award-line,
[data-theme="dark"] .ri-settings-3-line,
[data-theme="dark"] .ri-add-line,
[data-theme="dark"] .ri-close-line,
[data-theme="dark"] .ri-moon-line,
[data-theme="dark"] .ri-logout-box-r-line {
	color: var(--primary-text) !important;
}

/* Primary colored backgrounds and borders */
[data-theme="dark"] .bg-primary\/10 {
	background-color: rgba(230, 223, 201, 0.1) !important;
}

[data-theme="dark"] .border-primary\/10 {
	border-color: rgba(230, 223, 201, 0.1) !important;
}

[data-theme="dark"] .border-primary\/20 {
	border-color: rgba(230, 223, 201, 0.2) !important;
}

[data-theme="dark"] .border-primary\/40 {
	border-color: rgba(230, 223, 201, 0.4) !important;
}

/* Hover states for primary elements */
[data-theme="dark"] .hover\:bg-primary:hover {
	background-color: var(--primary-bg) !important;
}

[data-theme="dark"] .hover\:border-primary:hover {
	border-color: var(--primary-border) !important;
}

/* Chat Interface Styles */
.chat-message {
	animation: slideInUp 0.3s ease-out;
}

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

/* Typing indicator animation */
.typing-dots {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.typing-dots .dot {
	width: 6px;
	height: 6px;
	background-color: currentColor;
	border-radius: 50%;
	animation: typing-bounce 1.4s infinite ease-in-out;
}

.typing-dots .dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dots .dot:nth-child(2) { animation-delay: -0.16s; }
.typing-dots .dot:nth-child(3) { animation-delay: 0s; }

@keyframes typing-bounce {
	0%, 80%, 100% {
		transform: scale(0);
	}
	40% {
		transform: scale(1);
	}
}

/* Chat scrollbar styling */
#chatMessages::-webkit-scrollbar {
	width: 6px;
}

#chatMessages::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 3px;
}

#chatMessages::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 3px;
}

#chatMessages::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}

/* GPT Response section styling */
#gptResponseDisplay {
	animation: fadeInUp 0.5s ease-out;
}

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

/* Chat interface styling */
#chatInterface {
	animation: fadeInUp 0.5s ease-out 0.2s both;
}

/* Smooth transitions for quiz sections */
#quizFormSection,
#gptResponseSection {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

#gptResponseSection.hidden {
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
}

/* Add visual separation between quiz and response sections */
#gptResponseSection:not(.hidden) {
	margin-top: 2rem;
	border-top: 1px solid #e5e7eb;
	padding-top: 2rem;
}