/* Pinyin товч */
.pinyin-btn {
    background-color: #333;
    color: #fff;
    border-left: 3px solid #0ea5e9;
}

.pinyin-btn:hover {
    background-color: #5492f8;
}

.pinyin-btn.active {
    background-color: #3b82f6;
    color: white;
    box-shadow: 0 2px 4px rgba(14, 165, 233, 0.3);
}

.pinyin-btn svg {
    color: #0ea5e9;
}

.pinyin-btn.active svg {
    color: white;
}

/* Орчуулга товч */
.translation-btn {
    background-color: #333;
    color: #fff;
    border-left: 3px solid #22c55e;
}

.translation-btn:hover {
    background-color: #5492f8;
}

.translation-btn.active {
    background-color: #3b82f6;
    color: white;
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
}

.translation-btn svg {
    color: #333;
}

.translation-btn.active svg {
    color: white;
}

/* Жишээ товч */
.example-btn {
    background-color: #333;
    color: #fff;
    border-left: 3px solid #f97316;
}

.example-btn:hover {
    background-color: #5492f8;
}

.example-btn.active {
    background-color: #3b82f6;
    color: white;
    box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
}

.example-btn svg {
    color: #f97316;
}

.example-btn.active svg {
    color: white;
}* 

{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    background-color: #0a0a0a;
    padding: 20px;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Starry night background */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
        radial-gradient(1px 1px at 80% 10%, white, transparent),
        radial-gradient(2px 2px at 90% 60%, white, transparent),
        radial-gradient(1px 1px at 30% 80%, white, transparent),
        radial-gradient(1px 1px at 70% 40%, white, transparent),
        radial-gradient(2px 2px at 40% 90%, white, transparent),
        radial-gradient(1px 1px at 10% 20%, white, transparent),
        radial-gradient(1px 1px at 95% 85%, white, transparent);
    background-size: 200% 200%;
    background-position: 0% 0%;
    animation: stars 200s linear infinite;
    opacity: 0.3;
    z-index: -2;
}

/* Animated meaningful stripes */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: -100%;
    width: 300%;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 40px,
        rgba(59, 130, 246, 0.03) 40px,
        rgba(59, 130, 246, 0.03) 80px,
        transparent 80px,
        transparent 120px,
        rgba(236, 72, 153, 0.03) 120px,
        rgba(236, 72, 153, 0.03) 160px,
        transparent 160px,
        transparent 200px,
        rgba(34, 197, 94, 0.03) 200px,
        rgba(34, 197, 94, 0.03) 240px
    );
    animation: stripes 30s linear infinite;
    z-index: -1;
}

@keyframes stars {
    from { background-position: 0% 0%; }
    to { background-position: 100% 100%; }
}

@keyframes stripes {
    from { transform: translateX(0); }
    to { transform: translateX(240px); }
}

.container {
    background-color: white;
    border-radius: 16px;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 60px rgba(59, 130, 246, 0.1),
        0 0 100px rgba(59, 130, 246, 0.05);
    padding: 24px;
    width: 100%;
    max-width: 500px;
    position: relative;
    z-index: 1;
}

.controls-container {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.stats-container {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.stats {
    background-color: #f0f3fa;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 15px;
    color: #333;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: all 0.3s ease;
    min-width: 344px;
}

.stats:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.stats strong {
    color: #1e293b;
}

.stats span {
    font-weight: 600;
    transition: color 0.2s ease;
}

.search-jump-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.search-box {
    display: flex;
    gap: 0;
    align-items: stretch;
}

.search-box input {
    width: 200px;
    padding: 12px 16px;
    border: 1px solid #e2e7f3;
    border-radius: 12px 0 0 12px;
    font-size: 15px;
    background-color: #f8fafc;
    transition: all 0.2s ease;
    border-right: none;
    height: 44px;
}

.search-box input::placeholder {
    font-size: 14px;
}

.search-box input:focus {
    outline: none;
    border-color: #3b82f6;
    background-color: white;
    box-shadow: -3px 0 0 0 #3b82f6, 0 3px 0 0 #3b82f6, 0 -3px 0 0 #3b82f6;
}

.search-box .btn {
    background-color: #3b82f6;
    color: white;
    border-radius: 0 12px 12px 0;
    padding: 12px 20px;
    transition: all 0.2s ease;
    border: 1px solid #3b82f6;
    height: 44px;
}

.search-box .btn:hover {
    background-color: #2563eb;
    border-color: #2563eb;
    transform: none;
    box-shadow: 4px 0 8px rgba(59, 130, 246, 0.2);
}

.search-box .btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.jump-to-word {
    display: flex;
    gap: 0;
    align-items: center;
}

.jump-to-word input {
    width: 100px;
    padding: 12px 16px;
    border: 1px solid #e2e7f3;
    border-radius: 12px 0 0 12px;
    font-size: 15px;
    text-align: center;
    background-color: #f8fafc;
    transition: all 0.2s ease;
    border-right: none;
    height: 44px;
}

.jump-to-word input:focus {
    outline: none;
    border-color: #3b82f6;
    background-color: white;
    box-shadow: -3px 0 0 0 #3b82f6, 0 3px 0 0 #3b82f6, 0 -3px 0 0 #3b82f6;
}

.jump-to-word .btn {
    border-radius: 0 12px 12px 0;
    padding: 12px 16px;
    height: 44px;
    border: 1px solid #e2e7f3;
    border-left: none;
}

.btn {
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background-color: #f0f3fa;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn:hover {
    background-color: #e2e7f3;
    transform: translateY(-1px);
}

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

.btn-primary {
    background-color: #3b82f6;
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.btn-primary:hover {
    background-color: #2563eb;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.language-toggle {
    display: flex;
    margin-bottom: 24px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.language-toggle button {
    flex: 1;
    padding: 12px;
    border: none;
    background-color: #e9ecf3;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.language-toggle button.active {
    background-color: #3b82f6;
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.card {
    background-color: #f9f9fc;
    border-radius: 12px;
    padding: 32px 24px;
    margin-bottom: 20px;
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Хятад үгсэд зориулсан фонт сонголтууд */
.chinese-word {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 125px;
    font-weight: bold;
  
    margin-bottom: 16px;
    line-height: 1.3;
    color: #000;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

/* Монгол үгийн загвар */
.mongolian-word {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 16px;
    line-height: 1.3;
    color: #3563c9;
    text-shadow: 0 1px 2px rgba(53, 99, 201, 0.08);
    transition: all 0.3s ease;
}

.pinyin {
    font-size: 20px;
    color: red;
    margin-bottom: 16px;
    line-height: 1.5;
    font-style: italic;
    opacity: 0.9;
}

.translation {
    font-size: 24px;
    margin-top: 12px;
    line-height: 1.4;
    color: #444;
    transition: all 0.3s;
    animation: fadeIn 0.5s ease;
}

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

.nav-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-container input {
    margin-right: 8px;
    cursor: pointer;
    width: 16px;
    color: red;
    height: 16px;
}

.checkbox-container label {
    margin-left: 6px;
    font-size: 14px;
    color: #333;
    font-weight: bold;
    cursor: pointer;
}

.toggle-actions {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 10px;
    flex-wrap: wrap;
}

.action-btn {
    flex: 1;
    min-width: 100px;
    padding: 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.action-btn:hover {
    transform: translateY(-1px);
}

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

.action-btn svg {
    margin-right: 8px;
    width: 16px;
    height: 16px;
}

/* Active state for toggle buttons */
.action-btn.active {
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.example-container {
    background-color: #f9f9fc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.04);
    animation: slideIn 0.4s ease;
}

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

.example-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.example-pinyin {
    color: #666;
    margin-bottom: 8px;
}

.example-translation {
    font-style: italic;
}

.audio-controls {
    display: flex;
    gap: 8px;
}

.audio-btn {
    background: none;
    border: none;
    color: #3b82f6;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.audio-btn:hover {
    color: #2563eb;
    background-color: rgba(59, 130, 246, 0.1);
    transform: scale(1.1);
}

.search-results {
    background-color: #f9f9fc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.06);
    max-height: 400px;
    overflow-y: auto;
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.search-results-header h3 {
    font-size: 18px;
    color: #333;
    font-weight: bold;
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.close-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #333;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    background-color: white;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.search-result-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.result-number {
    font-weight: bold;
    color: #3b82f6;
    min-width: 30px;
}

.result-content {
    flex: 1;
    text-align: left;
}

.result-chinese {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
}

.result-pinyin {
    font-size: 14px;
    color: #ef4444;
    font-style: italic;
    margin-bottom: 4px;
}

.result-mongolian {
    font-size: 14px;
    color: #666;
}

.result-go-btn {
    background-color: #3b82f6;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.result-go-btn:hover {
    background-color: #2563eb;
    transform: scale(1.05);
}

.result-go-btn svg {
    width: 16px;
    height: 16px;
}

.not-understood {
    margin-top: 24px;
}

.not-understood h3 {
    font-size: 16px;
    margin-bottom: 12px;
    color: #333;
    
    font-weight: bold;
}

.not-understood-list {
    background-color: #f9f9fc;
    border-radius: 12px;
    padding: 16px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.not-understood-item {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.not-understood-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.not-understood-word {
    font-weight: 500;
    color: #333;
}

.not-understood-pinyin {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin-top: 4px;
}

.icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

@media (max-width: 480px) {
    .container {
        padding: 12px;
    }
    
    .card {
        padding: 16px;
        min-height: 240px;
    }
    
    .chinese-word {
        font-size: 100px;
        font-weight:bold;
    }
    
    .mongolian-word {
        font-size: 34px;
    }
    
    .pinyin {
        font-size: 18px;
    }
    
    .translation {
        font-size: 22px;
    }
    
    .toggle-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
        margin-bottom: 15px;
    }
    
    .action-btn {
        min-width: auto;
        flex: 1;
        white-space: nowrap;
        padding: 8px;
    }
    
    .search-jump-container {
        flex-direction: column;
        gap: 8px;
    }
    
    .search-box input {
        width: 180px;
    }
    
    .jump-to-word input {
        width: 80px;
    }
    
}

/* Хятад үгийн фонтны загвар */
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosanssc/v26/k3kXo84MPvpLmixcA63oeALhLOCT-xWNm8Hqd37g1OkDRZe7lR4sg1IzSy-MNbE9VH8V.103.woff2) format('woff2');
    unicode-range: U+4E00-9FFF, U+3400-4DBF, U+20000-2A6DF, U+2A700-2B73F, U+2B740-2B81F, U+2B820-2CEAF;
}

/* Хятад үгсэд зориулсан фонт сонголтууд */
.word {
    /* This rule is kept for backward compatibility */
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 16px;
}

/* Дэлгэцийн хэмжээнээс хамаарсан нэмэлт дүрмүүд */
@media (max-width: 360px) {
    .chinese-word {
        font-size: 34px;
    }
    
    .mongolian-word {
        font-size: 30px;
    }
    
    .pinyin {
        font-size: 16px;
    }
    
    .translation {
        font-size: 20px;
    }
    
    .card {
        min-height: 200px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .chinese-word {
        font-size: 40px;
    }
    
    .mongolian-word {
        font-size: 36px;
    }
    
    .card {
        min-height: 220px;
    }
}