.splash { position: fixed; inset: 0; z-index: 9999; background: linear-gradient(135deg, #1B5E20, #0D3B12); display: flex; align-items: center; justify-content: center; transition: opacity 0.4s ease, transform 0.4s ease; }
.splash.fade-out { opacity: 0; transform: scale(1.05); pointer-events: none; }
.splash-content { text-align: center; color: white; }
.splash-flag { display: flex; flex-direction: column; width: 72px; height: 54px; margin: 0 auto var(--spacing-lg); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.flag-stripe { flex: 1; }
.flag-yellow { background: #FFD600; }
.flag-blue { background: #0277BD; }
.flag-red { background: #CE1126; }
.splash-title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-extrabold); letter-spacing: -1px; }
.splash-subtitle { font-size: var(--font-size-lg); font-weight: var(--font-weight-light); opacity: 0.85; margin-top: 2px; }
.splash-loader { width: 100px; height: 3px; background: rgba(255,255,255,0.2); border-radius: var(--radius-full); margin: var(--spacing-xl) auto 0; overflow: hidden; }
.splash-loader-bar { width: 0%; height: 100%; background: #FFD600; border-radius: var(--radius-full); animation: splash-load 1.2s ease forwards; }
@keyframes splash-load { to { width: 100%; } }

.card { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--spacing-lg); box-shadow: var(--shadow-xs); border: 1px solid var(--color-border); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); position: relative; overflow: hidden; }
.card:active { transform: scale(0.98); }
.card-elevated { box-shadow: var(--shadow-sm); border: none; }
.card-module { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); }
.card-module:active { background: var(--color-surface-alt); }
.card-module-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 20px; color: white; flex-shrink: 0; }
.card-module-info { flex: 1; min-width: 0; }
.card-module-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: 1.3; }
.card-module-desc { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 2px; line-height: 1.4; }
.card-module-meta { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 2px; }

.card-item { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); }
.card-item:active { background: var(--color-surface-alt); }
.card-item-status { font-size: 18px; flex-shrink: 0; }
.card-item-content { flex: 1; min-width: 0; }
.card-item-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: 1.3; }
.card-item-desc { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 2px; line-height: 1.4; }
.card-item-arrow { font-size: 18px; color: var(--color-text-hint); flex-shrink: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: 0 var(--spacing-lg); border-radius: var(--radius-md); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); transition: all var(--transition-fast); min-height: 48px; white-space: nowrap; position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--color-primary); color: white; }
.btn-primary:active { background: var(--color-primary-dark); }
.btn-secondary { background: var(--color-surface-alt); color: var(--color-text); }
.btn-secondary:active { background: var(--color-border); }
.btn-accent { background: var(--color-secondary); color: #1A1A1A; }
.btn-ghost { background: transparent; color: var(--color-primary); }
.btn-ghost:active { background: rgba(27,94,32,0.08); }
.btn-danger { background: var(--color-error); color: white; }
.btn-lg { min-height: 52px; padding: 0 var(--spacing-xl); font-size: var(--font-size-base); border-radius: var(--radius-lg); }
.btn-sm { min-height: 36px; padding: 0 var(--spacing-md); font-size: var(--font-size-xs); border-radius: var(--radius-sm); }
.btn-block { width: 100%; }
.btn-full { width: 100%; }
.btn-outline { background: transparent; color: var(--color-primary); border: 2px solid var(--color-border); }
.btn-outline:active { background: rgba(27,94,32,0.04); border-color: var(--color-primary); }
.btn-success { background: var(--color-success); color: white; }
.btn-success:active { background: #1B5E20; }
.btn:disabled { opacity: 0.4; pointer-events: none; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.badge-sm { padding: 2px 8px; font-size: 0.625rem; }
.badge-primary { background: rgba(27,94,32,0.1); color: var(--color-primary); }
.badge-success { background: rgba(46,125,50,0.1); color: var(--color-success); }
.badge-warning { background: rgba(245,124,0,0.1); color: var(--color-warning); }
.badge-error { background: rgba(211,47,47,0.1); color: var(--color-error); }
.badge-info { background: rgba(25,118,210,0.1); color: var(--color-info); }

.progress-bar { width: 100%; height: 8px; background: var(--color-surface-alt); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar-fill { height: 100%; border-radius: var(--radius-full); transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); background: var(--color-primary); }
.progress-bar-fill.success { background: var(--color-success); }
.progress-bar-fill.warning { background: var(--color-warning); }
.progress-bar-fill.error { background: var(--color-error); }
.progress-bar-sm { height: 5px; }

.stat-card { text-align: center; padding: var(--spacing-md); }
.stat-value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-primary); line-height: 1.2; }
.stat-label { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 2px; }

.option-btn { width: 100%; padding: var(--spacing-md) var(--spacing-lg); background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-md); text-align: left; font-size: var(--font-size-sm); line-height: 1.5; transition: all var(--transition-fast); position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.option-btn:active { transform: scale(0.98); background: var(--color-surface-alt); }
.option-btn.selected { border-color: var(--color-primary); background: rgba(27,94,32,0.04); }
.option-btn.correct { border-color: var(--color-success); background: rgba(46,125,50,0.08); }
.option-btn.wrong { border-color: var(--color-error); background: rgba(211,47,47,0.08); }
.option-btn.disabled { pointer-events: none; }

.quiz-option.correct { border-color: var(--color-success) !important; background: rgba(46,125,50,0.08) !important; }
.quiz-option.incorrect { border-color: var(--color-error) !important; background: rgba(211,47,47,0.08) !important; }

.search-bar { position: relative; }

.form-input { width: 100%; padding: 12px var(--spacing-md); background: var(--color-surface-alt); border: 2px solid transparent; border-radius: var(--radius-md); font-size: var(--font-size-base); outline: none; transition: border-color var(--transition-fast), background var(--transition-fast); }
.form-input:focus { border-color: var(--color-primary); background: var(--color-surface); }

.form-range { -webkit-appearance: none; appearance: none; height: 6px; background: var(--color-border); border-radius: var(--radius-full); outline: none; }
.form-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--color-primary); cursor: pointer; }

.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }

.flashcard-container { perspective: 1200px; width: 100%; max-width: 360px; margin: 0 auto; }
.flashcard { width: 100%; min-height: 220px; position: relative; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-xl); }
.flashcard.flipped { transform: rotateY(180deg); }
.flashcard-front, .flashcard-back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius-xl); padding: var(--spacing-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: var(--shadow-lg); }
.flashcard-front { background: linear-gradient(135deg, #1B5E20, #2E7D32); color: white; }
.flashcard-back { background: var(--color-surface); border: 2px solid var(--color-primary); transform: rotateY(180deg); }
.flashcard-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.7; margin-bottom: var(--spacing-lg); }
.flashcard-text { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: 1.6; }

.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item { display: flex; gap: var(--spacing-md); padding-bottom: var(--spacing-lg); position: relative; }
.timeline-line { position: absolute; left: 15px; top: 36px; bottom: 0; width: 2px; background: var(--color-border); }
.timeline-dot { width: 32px; height: 32px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; z-index: 1; box-shadow: var(--shadow-sm); }
.timeline-content { flex: 1; padding-top: 4px; }
.timeline-date { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-primary); }
.timeline-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); margin-top: 2px; }
.timeline-desc { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 4px; line-height: 1.5; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; display: flex; align-items: flex-end; justify-content: center; backdrop-filter: blur(4px); animation: fade-in 0.2s ease; }
.modal { background: var(--color-surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; width: 100%; max-width: 480px; max-height: 80vh; padding: var(--spacing-xl); padding-bottom: calc(var(--spacing-xl) + var(--safe-area-bottom)); animation: slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.modal-center { align-items: center; border-radius: var(--radius-xl); margin: var(--spacing-lg); max-height: 70vh; animation: fade-in-scale 0.25s ease; }
.modal-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-md); }
.modal-body { margin-bottom: var(--spacing-lg); color: var(--color-text-secondary); line-height: 1.6; }
.modal-actions { display: flex; gap: var(--spacing-sm); }

.toast-container { position: fixed; top: calc(var(--safe-area-top) + 12px); left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; width: calc(100% - 32px); max-width: 400px; }
.toast { background: var(--color-text); color: white; padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); box-shadow: var(--shadow-xl); animation: toast-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: auto; }
.toast.success { background: var(--color-success); }
.toast.error { background: var(--color-error); }
.toast.warning { background: var(--color-warning); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

.search-input { width: 100%; padding: 14px var(--spacing-lg); padding-left: 44px; background: var(--color-surface-alt); border: 2px solid transparent; border-radius: var(--radius-lg); font-size: var(--font-size-base); outline: none; transition: border-color var(--transition-fast), background var(--transition-fast); }
.search-input:focus { border-color: var(--color-primary); background: var(--color-surface); }
.search-wrapper { position: relative; }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-hint); font-size: 18px; pointer-events: none; }

.chip { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); background: var(--color-surface); border: 1.5px solid var(--color-border); transition: all var(--transition-fast); -webkit-tap-highlight-color: transparent; }
.chip:active { transform: scale(0.95); }
.chip.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }

.avatar { width: 48px; height: 48px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--color-surface-alt); flex-shrink: 0; }
.avatar-sm { width: 36px; height: 36px; font-size: 16px; }
.avatar-lg { width: 64px; height: 64px; font-size: 28px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); }

.divider { height: 1px; background: var(--color-divider); margin: var(--spacing-md) 0; }
.section-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-secondary); margin-bottom: var(--spacing-md); letter-spacing: -0.2px; }

.empty-state { text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); color: var(--color-text-secondary); }
.empty-state-icon { font-size: 56px; margin-bottom: var(--spacing-md); }
.empty-state-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-sm); color: var(--color-text); }

.toggle { position: relative; display: inline-block; width: 52px; height: 30px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--color-border); border-radius: var(--radius-full); transition: background var(--transition-smooth); }
.toggle-slider::before { content: ''; position: absolute; height: 24px; width: 24px; left: 3px; bottom: 3px; background: white; border-radius: var(--radius-full); transition: transform var(--transition-smooth); box-shadow: var(--shadow-sm); }
.toggle input:checked + .toggle-slider { background: var(--color-primary); }
.toggle input:checked + .toggle-slider::before { transform: translateX(22px); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-in-scale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }