/* Общие стили */
:root {
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --accent-color: #e74c3c;
    --light-color: #ecf0f1;
    --dark-color: #2c3e50;
    --success-color: #2ecc71;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;
    --info-color: #3498db;
    --border-radius: 4px;
    --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

[class*="col-"] {
    padding: 0 15px;
}

.col-md-3 {
    width: 25%;
}

.col-md-4 {
    width: 33.33%;
}

.col-md-6 {
    width: 50%;
}

.col-md-9 {
    width: 75%;
}

@media (max-width: 768px) {
    .col-md-3, .col-md-4, .col-md-6, .col-md-9 {
        width: 100%;
    }
}

/* Шапка сайта */
.main-header {
    background-color: var(--primary-color);
    color: white;
    padding: 15px 0;
    box-shadow: var(--box-shadow);
}

.logo {
    display: flex;
    align-items: center;
}

.logo a {
    display: flex;
    align-items: center;
    color: white;
    text-decoration: none;
    font-size: 24px;
    font-weight: 700;
}

.logo img {
    height: 40px;
    margin-right: 10px;
}

/* Навигационное меню */
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-menu {
    display: flex;
    list-style-type: none;
}

.nav-menu li {
    margin-right: 20px;
}

.nav-menu li:last-child {
    margin-right: 0;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.nav-menu a:hover, .nav-menu a.active {
    background-color: rgba(255, 255, 255, 0.2);
}

.user-menu {
    display: flex;
    align-items: center;
}

.btn {
    display: inline-block;
    padding: 8px 16px;
    margin: 2px;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    text-align: center;
    transition: var(--transition);
}

.btn-login {
    background-color: transparent;
    color: white;
    border: 1px solid white;
}

.btn-login:hover {
    background-color: white;
    color: var(--primary-color);
}

.btn-register {
    background-color: white;
    color: var(--primary-color);
}

.btn-register:hover {
    background-color: var(--secondary-color);
    color: white;
}

.dropdown {
    position: relative;
}

.dropdown-toggle {
    background-color: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius);
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.dropdown-toggle i {
    margin-right: 5px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    display: none;
    min-width: 200px;
    background-color: white;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    padding: 10px 0;
    margin-top: 5px;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    color: var(--dark-color);
    transition: var(--transition);
}

.dropdown-item:hover {
    background-color: var(--light-color);
}

.dropdown-item i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

.dropdown-divider {
    height: 1px;
    background-color: #e9ecef;
    margin: 5px 0;
}

/* Основной контейнер */
.main-container {
    flex: 1;
    padding: 30px 0;
}

/* Основное содержимое */
.main-content {
    padding-right: 30px;
}

@media (max-width: 768px) {
    .main-content {
        padding-right: 15px;
    }
}

/* Боковая панель */
.sidebar {
    margin-bottom: 30px;
}

.sidebar-block {
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
    margin-bottom: 30px;
}

.sidebar-title {
    color: var(--dark-color);
    font-size: 18px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--light-color);
}

.login-form .form-group {
    margin-bottom: 15px;
}

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    font-size: 14px;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--secondary-color);
}

.btn-block {
    display: block;
    width: 100%;
}

.user-info {
    display: flex;
    align-items: center;
}

.user-avatar {
    flex: 0 0 70px;
    margin-right: 15px;
}

.user-avatar img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}

.user-details {
    flex: 1;
}

.user-name {
    font-weight: 700;
    margin-bottom: 5px;
}

.user-role {
    color: #777;
    font-size: 14px;
    margin-bottom: 10px;
}

.category-list, .stats-list {
    list-style-type: none;
}

.category-list li, .stats-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--light-color);
}

.category-list li:last-child, .stats-list li:last-child {
    border-bottom: none;
}

.category-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--dark-color);
    text-decoration: none;
    transition: var(--transition);
}

.category-list a:hover {
    color: var(--primary-color);
}

.badge {
    background-color: var(--light-color);
    color: var(--dark-color);
    border-radius: 50px;
    padding: 2px 8px;
    font-size: 12px;
}

.stats-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stats-value {
    font-weight: 700;
    color: var(--primary-color);
}

/* Flash сообщения */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: var(--border-radius);
    position: relative;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.alert-dismissible {
    padding-right: 40px;
}

.close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
}

/* Секции на главной странице */
section {
    margin-bottom: 40px;
}

.welcome-section h1 {
    color: var(--dark-color);
    margin-bottom: 10px;
}

.timestamp {
    font-size: 14px;
    color: #777;
    margin-bottom: 20px;
}

.intro-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.features-section h2, .content-section h2, .getting-started h2 {
    color: var(--dark-color);
    margin-bottom: 20px;
    text-align: center;
}

.feature-card {
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 30px 20px;
    margin-bottom: 30px;
    text-align: center;
    height: 100%;
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    font-size: 48px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.feature-card h3 {
    color: var(--dark-color);
    margin-bottom: 15px;
}

.data-container {
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
}

.data-list {
    list-style-position: inside;
}

.data-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--light-color);
}

.data-item:last-child {
    border-bottom: none;
}

.step-card {
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 30px 20px;
    margin-bottom: 30px;
    text-align: center;
    height: 100%;
    position: relative;
    transition: var(--transition);
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background-color: var(--primary-color);
    color: white;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-card h3 {
    color: var(--dark-color);
    margin-bottom: 15px;
    margin-top: 10px;
}

/* Подвал сайта */
.main-footer {
    background-color: var(--secondary-color);
    color: white;
    padding: 40px 0 20px;
}

.footer-block {
    margin-bottom: 30px;
}

.footer-block h3 {
    font-size: 18px;
    margin-bottom: 20px;
}

.contact-list {
    list-style-type: none;
}

.contact-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.contact-list i {
    margin-right: 10px;
    min-width: 20px;
}

.footer-links {
    list-style-type: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #bdc3c7;
    text-decoration: none;
    transition: var(--transition);
}

.footer-links a:hover {
    color: white;
}

.social-icons {
    display: flex;
    margin-top: 20px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    margin-right: 10px;
    text-decoration: none;
    transition: var(--transition);
}

.social-icon:hover {
    background-color: var(--primary-color);
}

.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    color: #bdc3c7;
}

.dev-mode {
    margin-top: 5px;
    color: #e74c3c;
    font-weight: 700;
}

/* Адаптивность */
@media (max-width: 992px) {
    .col-lg-3 {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .main-nav {
        flex-direction: column;
    }
    
    .nav-menu {
        margin-top: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav-menu li {
        margin: 5px 10px;
    }
    
    .user-menu {
        margin-top: 15px;
        justify-content: center;
    }
    
    .col-lg-3 {
        width: 100%;
    }
}

/* Иконки (FontAwesome) */
/* Вместо использования внешней библиотеки FontAwesome, определим базовые иконки через CSS */
[class^="icon-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.2em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-user {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg>');
}

.icon-login {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201L201 79c-15-15-41-4.5-41 17v96H24c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z"></path></svg>');
}

.icon-user-plus {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="white" d="M624 208h-64v-64c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v64h-64c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h64v64c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-64h64c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm-400 48c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg>');
}

.icon-profile {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 288c79.5 0 144-64.5 144-144S335.5 0 256 0 112 64.5 112 144s64.5 144 144 144zm128 32h-55.1c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16H128C57.3 320 0 377.3 0 448v16c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-16c0-70.7-57.3-128-128-128z"></path></svg>');
}

.icon-dashboard {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M288 32C128.94 32 0 160.94 0 320c0 52.8 14.25 102.26 39.06 144.8 5.61 9.62 16.3 15.2 27.44 15.2h443c11.14 0 21.83-5.58 27.44-15.2C561.75 422.26 576 372.8 576 320c0-159.06-128.94-288-288-288zm0 64c14.71 0 26.58 10.13 30.32 23.65-1.11 2.26-2.64 4.23-3.45 6.67l-9.22 27.67c-5.13 3.49-10.97 6.01-17.64 6.01-17.67 0-32-14.33-32-32S270.33 96 288 96zM96 384c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm48-160c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm246.77-72.41l-61.33 184C343.13 347.33 352 364.54 352 384c0 11.72-3.38 22.55-8.88 32H232.88c-5.5-9.45-8.88-20.28-8.88-32 0-33.94 26.5-61.43 59.9-63.59l61.34-184.01c4.17-12.56 17.73-19.45 30.36-15.17 12.57 4.19 19.35 17.79 15.17 30.36zm14.66 57.2l15.52-46.55c3.47-1.29 7.13-2.23 11.05-2.23 17.67 0 32 14.33 32 32s-14.33 32-32 32c-11.38-.01-20.89-6.28-26.57-15.22zM480 384c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"></path></svg>');
}

.icon-logout {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34zM192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96c-53 0-96 43-96 96v192c0 53 43 96 96 96h84c6.6 0 12-5.4 12-12z"></path></svg>');
}

.icon-database {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448 73.143v45.714C448 159.143 347.667 192 224 192S0 159.143 0 118.857V73.143C0 32.857 100.333 0 224 0s224 32.857 224 73.143zM448 176v102.857C448 319.143 347.667 352 224 352S0 319.143 0 278.857V176c48.125 33.143 136.208 48.572 224 48.572S399.874 209.143 448 176zm0 160v102.857C448 479.143 347.667 512 224 512S0 479.143 0 438.857V336c48.125 33.143 136.208 48.572 224 48.572S399.874 369.143 448 336z"></path></svg>');
}

.icon-eye {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"></path></svg>');
}

.icon-settings {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"></path></svg>');
}

.icon-map-marker {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="white" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"></path></svg>');
}

.icon-phone {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path></svg>');
}

.icon-envelope {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg>');
}

.icon-facebook {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg>');
}

.icon-twitter {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>');
}

.icon-instagram {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg>');
}

.icon-youtube {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="white" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg>');
}

/* Анимации при наведении и переходы */
a, button, .btn {
    transition: all 0.3s ease;
}

/* Улучшения для мобильных устройств */
@media (max-width: 576px) {
    .feature-card, .step-card {
        margin-bottom: 20px;
    }
    
    .container {
        padding: 0 10px;
    }
    
    .main-header {
        padding: 10px 0;
    }
    
    .logo a {
        font-size: 20px;
    }
    
    .logo img {
        height: 30px;
    }
    
    h1 {
        font-size: 24px;
    }
    
    h2 {
        font-size: 20px;
    }
    
    h3 {
        font-size: 18px;
    }
}

/* Дополнительные улучшения доступности */
:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Темная тема (если в будущем понадобится) */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #f5f5f5;
    }
    
    .feature-card, .step-card, .sidebar-block, .data-container {
        background-color: #1e1e1e;
        color: #f5f5f5;
    }
    
    .main-header {
        background-color: #1a1a1a;
    }
    
    h1, h2, h3, .sidebar-title {
        color: #f5f5f5;
    }
    
    .form-control {
        background-color: #333;
        border-color: #444;
        color: #f5f5f5;
    }
    
    .category-list a, .sidebar-title, .feature-card h3, .step-card h3 {
        color: #f5f5f5;
    }
    
    .data-item, .category-list li, .stats-list li, .sidebar-title {
        border-color: #444;
    }
    
    .badge {
        background-color: #444;
        color: #f5f5f5;
    }
}

/* Стили для активных пунктов меню */
.nav-menu a.active {
    background-color: rgba(255, 255, 255, 0.25);
    font-weight: 600;
    position: relative;
}

/* Добавляем индикатор активного пункта */
.nav-menu a.active:after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 3px;
    background-color: white;
    border-radius: 3px;
}

/* Стили для активных пунктов в dropdown меню */
.dropdown-item.active {
    background-color: var(--primary-color);
    color: white;
}

/* Стили для активных кнопок авторизации */
.btn-login.active, .btn-register.active {
    transform: scale(1.05);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
    .nav-menu a.active:after {
        bottom: -2px;
        width: 50%;
    }
}

/* Стили для страницы ошибки 404 */
.error-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
}

.error-container {
    max-width: 600px;
    padding: 40px 20px;
}

.error-code {
    font-size: 120px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.error-section h1 {
    margin-bottom: 20px;
    color: var(--dark-color);
}

.error-section p {
    font-size: 18px;
    margin-bottom: 30px;
    color: #666;
}

.action-buttons {
    margin-top: 30px;
}

.action-buttons .btn {
    margin: 0 10px;
}