/* css/styles.css */
:root {
    --bg-color: #fbfdfc;
    --text-color: #1a1d1a;
    --subtle-text-color: #565a56;
    --border-color: #e6e8e6;
    --accent-color: #16A34A;
    --card-bg-color: #ffffff;
    --font-main: 'Verdana', sans-serif;
    --transition-speed: 0.3s;
}
[data-theme="dark"] {
    --bg-color: #111214;
    --text-color: #EDEDED;
    --subtle-text-color: #999999;
    --border-color: #2D2E33;
    --accent-color: #4ADE80;
    --card-bg-color: #1C1D22;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}
.container { width: 90%; max-width: 800px; margin: 0 auto; }
a { color: var(--accent-color); text-decoration: none; transition: opacity var(--transition-speed); }
a:hover { opacity: 0.8; }
.header {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    position: sticky; top: 0;
    background-color: color-mix(in srgb, var(--bg-color) 80%, transparent);
    backdrop-filter: blur(10px); z-index: 100;
}
.header .container { display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 0.5rem; color: var(--text-color); text-decoration: none; }
.logo-text { font-weight: 700; font-size: 1.5rem; }
.logo-ge { font-weight: 200; font-size: 1.5rem; color: var(--accent-color); }
.icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    /* Универсальный способ окраски одноцветных иконок */
    background-color: currentColor; 
}


 
 

 
.icon-arrow {
    width: 16px;
    height: 16px;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e") no-repeat center;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e") no-repeat center;
    transition: transform 0.3s ease;
}

.lang-switcher.open .icon-arrow {
    transform: rotate(180deg);
}

 
.icon-sun, .icon-moon {
    width: 24px;
    height: 24px;
}
.icon-sun {
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='5'%3e%3c/circle%3e%3cline x1='12' y1='1' x2='12' y2='3'%3e%3c/line%3e%3cline x1='12' y1='21' x2='12' y2='23'%3e%3c/line%3e%3cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'%3e%3c/line%3e%3cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'%3e%3c/line%3e%3cline x1='1' y1='12' x2='3' y2='12'%3e%3c/line%3e%3cline x1='21' y1='12' x2='23' y2='12'%3e%3c/line%3e%3cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'%3e%3c/line%3e%3cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'%3e%3c/line%3e%3c/svg%3e") no-repeat center;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='5'%3e%3c/circle%3e%3cline x1='12' y1='1' x2='12' y2='3'%3e%3c/line%3e%3cline x1='12' y1='21' x2='12' y2='23'%3e%3c/line%3e%3cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'%3e%3c/line%3e%3cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'%3e%3c/line%3e%3cline x1='1' y1='12' x2='3' y2='12'%3e%3c/line%3e%3cline x1='21' y1='12' x2='23' y2='12'%3e%3c/line%3e%3cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'%3e%3c/line%3e%3cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'%3e%3c/line%3e%3c/svg%3e") no-repeat center;
}
.icon-moon {
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'%3e%3c/path%3e%3c/svg%3e") no-repeat center;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'%3e%3c/path%3e%3c/svg%3e") no-repeat center;
}

.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
.nav-controls { display: flex; align-items: center; gap: 1rem; }
.lang-switcher { position: relative; }
.lang-switcher button {
    display: flex; align-items: center; gap: 0.3rem;
    background: none; border: 1px solid var(--border-color);
    color: var(--text-color); padding: 0.3rem 0.6rem;
    border-radius: 6px; cursor: pointer; font-weight: 600;
}
.lang-switcher .arrow { transition: transform var(--transition-speed) ease; }
.lang-switcher.open .arrow { transform: rotate(180deg); }
.lang-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    background-color: var(--bg-color); border: 1px solid var(--border-color);
    border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 0.5rem; display: flex; flex-direction: column;
    gap: 0.25rem; min-width: 100%; z-index: 110;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: all var(--transition-speed) ease;
}
.lang-switcher.open .lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-dropdown a { padding: 0.4rem 0.8rem; border-radius: 6px; color: var(--text-color); text-align: center; font-weight: 600; }
.lang-dropdown a:hover { background-color: var(--border-color); opacity: 1; }
.theme-toggle { background: none; border: none; cursor: pointer; color: var(--text-color); padding: 0; }
.theme-toggle .moon { display: none; } .theme-toggle .sun { display: block; }
[data-theme="dark"] .theme-toggle .moon { display: block; } [data-theme="dark"] .theme-toggle .sun { display: none; }
.main-content { padding: 2rem 0; }
.footer {
    padding: 2rem 0; margin-top: 2rem;
    border-top: 1px solid var(--border-color);
    color: var(--subtle-text-color); font-size: 0.9rem;
}
.footer .container { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.footer-links { display: flex; gap: 1.5rem; }
@media (min-width: 768px) {
    .footer .container { flex-direction: row; justify-content: space-between; }
}