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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #0f172a;
    background-color: #ffffff;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.app-container {
    position: relative;
    height: 100dvh !important;
    max-height: none !important;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.main-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0 !important;
}

/* Profile Header */
.profile-header {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 17px;
    width: 100%;
    flex-shrink: 0;
}

.profile-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.profile-label {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    line-height: 0px;
    align-items: center;
    display: flex;
    gap: 5px;
}

.profile-balance {
    display: flex;
    align-items: center;
    gap: 3px;
}

.profile-balance span {
    font-size: 20px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
}

.profile-title {
    display: flex;
    align-items: center;
    gap: 4px;
}

.profile-title span {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    line-height: 16px;
}

.social-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.social-label {
    font-size: 6px;
    font-weight: 600;
    color: #64748b;
    text-align: center;

}

.social-separator {
    width: 100%;
    height: 2px;
    background-color: #64748b;
    margin: 1px 0;
}

.social-online {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-align: center;

}

.online-dot {
    color: lime;
}



.edit-icon {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-width='1.5' d='M4 22h4m12 0h-8m1.888-18.337l.742-.742a3.146 3.146 0 1 1 4.449 4.45l-.742.74m-4.449-4.448s.093 1.576 1.483 2.966c1.39 1.39 2.966 1.483 2.966 1.483m-4.449-4.45L7.071 10.48c-.462.462-.693.692-.891.947a5.24 5.24 0 0 0-.599.969c-.139.291-.242.601-.449 1.22l-.875 2.626m14.08-8.13L14.93 11.52m-3.41 3.41c-.462.462-.692.692-.947.891c-.3.234-.625.435-.969.599c-.291.139-.601.242-1.22.448l-2.626.876m0 0l-.641.213a.848.848 0 0 1-1.073-1.073l.213-.641m1.501 1.5l-1.5-1.5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    flex-shrink: 0;
}


/* SVG Icons */
.database-icon {
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24' fill='%2364748b'%3e%3cg fill='none' stroke='%2364748b' stroke-linecap='round' stroke-width='1.5'%3e%3cpath d='M9 14h3m-2-2V8.2c0-.186 0-.279.012-.356a1 1 0 0 1 .832-.832C10.92 7 11.014 7 11.2 7h2.3a2.5 2.5 0 0 1 0 5H10Zm0 0v5m0-5H9'/%3e%3cpath d='M7 3.338A9.954 9.954 0 0 1 12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12c0-1.821.487-3.53 1.338-5'/%3e%3c/g%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.database-icon1 {
    width: 23px;
    height: 23px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24' fill='%2364748b'%3e%3cg fill='none' stroke='%2364748b' stroke-linecap='round' stroke-width='1.5'%3e%3cpath d='M9 14h3m-2-2V8.2c0-.186 0-.279.012-.356a1 1 0 0 1 .832-.832C10.92 7 11.014 7 11.2 7h2.3a2.5 2.5 0 0 1 0 5H10Zm0 0v5m0-5H9'/%3e%3cpath d='M7 3.338A9.954 9.954 0 0 1 12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12c0-1.821.487-3.53 1.338-5'/%3e%3c/g%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}
.database-icon2 {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24' fill='%2364748b'%3e%3cg fill='none' stroke='%2364748b' stroke-linecap='round' stroke-width='1.5'%3e%3cpath d='M9 14h3m-2-2V8.2c0-.186 0-.279.012-.356a1 1 0 0 1 .832-.832C10.92 7 11.014 7 11.2 7h2.3a2.5 2.5 0 0 1 0 5H10Zm0 0v5m0-5H9'/%3e%3cpath d='M7 3.338A9.954 9.954 0 0 1 12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12c0-1.821.487-3.53 1.338-5'/%3e%3c/g%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.database-very-small-icon {
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24' fill='%2364748b'%3e%3cg fill='none' stroke='%2364748b' stroke-linecap='round' stroke-width='1.5'%3e%3cpath d='M9 14h3m-2-2V8.2c0-.186 0-.279.012-.356a1 1 0 0 1 .832-.832C10.92 7 11.014 7 11.2 7h2.3a2.5 2.5 0 0 1 0 5H10Zm0 0v5m0-5H9'/%3e%3cpath d='M7 3.338A9.954 9.954 0 0 1 12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12c0-1.821.487-3.53 1.338-5'/%3e%3c/g%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}


.banana-icon {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7.82107C4.1875 6.57107 7 6.57107 8.25 9.07107C8.77883 8.80107 9.36858 8.67266 9.96179 8.69835C10.555 8.72404 11.1314 8.90294 11.635 9.21764C12.1385 9.53233 12.5519 9.97209 12.8349 10.4941C13.118 11.016 13.261 11.6024 13.25 12.1961' stroke='%2364748B' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.21875 11.1812C6.66875 10.2312 8.625 6.875 7.59375 3.68125C7.21875 2.5 7.1875 1.25 8.125 1.25C10.1375 1.25 11.25 4.6875 11.25 6.25C11.25 10.3125 8.625 13.75 4.69375 13.75C3.19375 13.75 1.25 13.75 1.25 12.5C1.25 11.5625 1.9625 11.5312 3.21875 11.1812Z' stroke='%2364748B' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}



/* Divider */
.divider {
    height: 16px;
    width: 100%;
    flex-shrink: 0;
}

.divider svg {
    width: 100%;
    height: 100%;
}

/* Slider Container */
.slider-container {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 5px 0;
    flex-shrink: 0;
}

.slider-wrapper {
    width: 375px;
    overflow: hidden;
    border-radius: 6px;
    position: relative;
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 1029px; /* 343px * 3 слайда = 1029px */
}

.slide {
    width: 375px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.slavery-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box;
}

.slavery-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.slavery-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slavery-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.slavery-info h3 {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 20px;
    margin: 0;
}

.job-info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.job-info span {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    line-height: 16px;
}

.action-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
}

.action-btn {
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    line-height: 20px;
    transition: color 0.2s ease;
}

.action-btn:hover {
    color: #0f172a;
}

.separator-line {
    width: 1px;
    height: 20px;
    background-color: #e2e8f0;
}

.engineering-icon {
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5225 7.5C3.1875 7.5 0.5225 8.17 0.5225 9.5V10.5H8.5225V9.5C8.5225 8.17 5.8575 7.5 4.5225 7.5ZM1.5225 9.5C1.6325 9.14 3.1775 8.5 4.5225 8.5C5.8725 8.5 7.4225 9.145 7.5225 9.5H1.5225Z' fill='%2364748B'/%3E%3Cpath d='M2.3925 4.5H2.5225C2.5225 5.605 3.4175 6.5 4.5225 6.5C5.6275 6.5 6.5225 5.605 6.5225 4.5H6.6525C6.7875 4.5 6.8975 4.39 6.8975 4.255V4.245C6.8975 4.11 6.7875 4 6.6525 4H6.5225C6.5225 3.26 6.1175 2.625 5.5225 2.275V2.75C5.5225 2.89 5.4125 3 5.2725 3C5.1325 3 5.0225 2.89 5.0225 2.75V2.07C4.8625 2.03 4.6975 2 4.5225 2C4.3475 2 4.1825 2.03 4.0225 2.07V2.75C4.0225 2.89 3.9125 3 3.7725 3C3.6325 3 3.5225 2.89 3.5225 2.75V2.275C2.9275 2.625 2.5225 3.26 2.5225 4H2.3925C2.2575 4 2.1475 4.11 2.1475 4.245V4.26C2.1475 4.39 2.2575 4.5 2.3925 4.5ZM5.5225 4.5C5.5225 5.05 5.0725 5.5 4.5225 5.5C3.9725 5.5 3.5225 5.05 3.5225 4.5H5.5225Z' fill='%2364748B'/%3E%3Cpath d='M11.0125 3.115L11.4775 2.7L11.1025 2.05L10.5075 2.245C10.4375 2.19 10.3575 2.145 10.2725 2.11L10.1475 1.5H9.3975L9.2725 2.11C9.1875 2.145 9.1075 2.19 9.0325 2.245L8.4425 2.05L8.0675 2.7L8.5325 3.115C8.5225 3.2 8.5225 3.29 8.5325 3.375L8.0675 3.8L8.4425 4.45L9.0425 4.26C9.1075 4.31 9.1825 4.35 9.2575 4.385L9.3975 5H10.1475L10.2825 4.39C10.3625 4.355 10.4325 4.315 10.5025 4.265L11.0975 4.455L11.4725 3.805L11.0075 3.38C11.0225 3.285 11.0175 3.2 11.0125 3.115ZM9.7725 3.875C9.4275 3.875 9.1475 3.595 9.1475 3.25C9.1475 2.905 9.4275 2.625 9.7725 2.625C10.1175 2.625 10.3975 2.905 10.3975 3.25C10.3975 3.595 10.1175 3.875 9.7725 3.875Z' fill='%2364748B'/%3E%3Cpath d='M9.7225 5.395L9.2975 5.535C9.2475 5.495 9.1925 5.465 9.1325 5.44L9.0425 5H8.5075L8.4175 5.435C8.3575 5.46 8.2975 5.495 8.2475 5.53L7.8275 5.39L7.5575 5.855L7.8875 6.15C7.8825 6.215 7.8825 6.275 7.8875 6.335L7.5575 6.64L7.8275 7.105L8.2575 6.97C8.3075 7.005 8.3575 7.035 8.4125 7.06L8.5025 7.5H9.0375L9.1325 7.065C9.1875 7.04 9.2425 7.01 9.2925 6.975L9.7175 7.11L9.9875 6.645L9.6575 6.34C9.6625 6.275 9.6625 6.215 9.6575 6.155L9.9875 5.86L9.7225 5.395ZM8.7725 6.695C8.5275 6.695 8.3275 6.495 8.3275 6.25C8.3275 6.005 8.5275 5.805 8.7725 5.805C9.0175 5.805 9.2175 6.005 9.2175 6.25C9.2175 6.495 9.0175 6.695 8.7725 6.695Z' fill='%2364748B'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Пагинация */
.pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
}

.pagination-dot {
    width: 8px;
    height: 8px;
    background: #e5e7eb;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.pagination-dot.active {
    width: 20px;
    border-radius: 4px;
}

.dot-progress {
    position: relative;
    left: 0;
    top: 0;
    height: 100%;
    background: #64748b;
    border-radius: inherit;
    width: 0%;
    transition: width 0.1s linear;
}

.pagination-dot.active .dot-progress {
    width: 55%;
    animation: progressFill 4s linear infinite;
}

@keyframes progressFill {
    0% { width: 55%; }
    100% { width: 100%; }
}

/* Action Buttons Section */
.action-buttons-section {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 16px;
    flex-shrink: 0;
}

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

.action-button {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    height: 28px;
    cursor: pointer;
    transition: background-color 0.2s;
    flex: 1;
}

.action-button:hover {
    background-color: #f8fafc;
}

.action-button span {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    line-height: 24px;
}

.reward-button {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    height: 28px;
    cursor: pointer;
    transition: background-color 0.2s;
    width: 100%;
    justify-content: center;
}

.reward-button:hover {
    background-color: #f8fafc;
}

.reward-button span {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    line-height: 24px;
}

.shop-icon {
    width: 16px;
    height: 16px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24' fill='%2364748b'%3e%3cg fill='none' stroke='%2364748b' stroke-width='1.5'%3e%3cpath d='M19.898 16h-12c-.93 0-1.395 0-1.777.102A3 3 0 0 0 4 18.224'/%3e%3cpath stroke-linecap='round' d='M8 7h8m-8 3.5h5m6.5 8.5H8m2 3c-2.828 0-4.243 0-5.121-.879C4 20.243 4 18.828 4 16V8c0-2.828 0-4.243.879-5.121C5.757 2 7.172 2 10 2h4c2.828 0 4.243 0 5.121.879C20 3.757 20 5.172 20 8m-6 14c2.828 0 4.243 0 5.121-.879C20 20.243 20 18.828 20 16v-4'/%3e%3c/g%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.bell-icon {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24' fill='%2364748b'%3e%3cg fill='none' stroke='%2364748b' stroke-width='1.5'%3e%3cpath stroke-linecap='round' d='M22 12H2M12 2v20m1-10a4 4 0 0 0 4 4m-6-4a4 4 0 0 1-4 4'/%3e%3cpath d='M12 10.035a3.247 3.247 0 0 1 2.46-3.15c1.603-.4 3.056 1.052 2.655 2.656a3.247 3.247 0 0 1-3.15 2.46H12v-1.966Zm0 0a3.247 3.247 0 0 0-2.46-3.15c-1.603-.4-3.056 1.052-2.655 2.656a3.247 3.247 0 0 0 3.15 2.46H12v-1.966Z'/%3e%3cpath stroke-linecap='round' d='M22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2c4.714 0 7.071 0 8.535 1.464c.974.974 1.3 2.343 1.41 4.536'/%3e%3c/g%3e%3c/svg%3e");    
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.chat-icon {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24' fill='%2364748b'%3e%3cg fill='none' stroke='%2364748b' stroke-linecap='round'%3e%3cpath stroke-width='1.5' d='M17 3.338A9.954 9.954 0 0 0 12 2C6.477 2 2 6.477 2 12c0 1.6.376 3.112 1.043 4.453c.178.356.237.763.134 1.148l-.595 2.226a1.3 1.3 0 0 0 1.591 1.591l2.226-.595a1.634 1.634 0 0 1 1.149.133A9.958 9.958 0 0 0 12 22c5.523 0 10-4.477 10-10c0-1.821-.487-3.53-1.338-5'/%3e%3cpath stroke-linejoin='round' stroke-width='2' d='M8 12h.009m3.982 0H12m3.991 0H16'/%3e%3c/g%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.settings-icon {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24' fill='%2364748b'%3e%3cg fill='none' stroke='%2364748b' stroke-width='1.5'%3e%3ccircle cx='12' cy='12' r='3'/%3e%3cpath stroke-linecap='round' d='M3.661 10.64c.473.296.777.802.777 1.36s-.304 1.064-.777 1.36c-.321.203-.529.364-.676.556a2 2 0 0 0-.396 1.479c.052.394.285.798.75 1.605c.467.807.7 1.21 1.015 1.453a2 2 0 0 0 1.479.396c.24-.032.483-.13.819-.308a1.617 1.617 0 0 1 1.567.008c.483.28.77.795.79 1.353c.014.38.05.64.143.863a2 2 0 0 0 1.083 1.083C10.602 22 11.068 22 12 22c.932 0 1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083c.092-.223.129-.483.143-.863c.02-.558.307-1.074.79-1.353a1.617 1.617 0 0 1 1.567-.008c.336.178.58.276.82.308a2 2 0 0 0 1.478-.396c.315-.242.548-.646 1.014-1.453c.208-.36.369-.639.489-.873m-.81-2.766a1.617 1.617 0 0 1-.777-1.36c0-.559.304-1.065.777-1.362c.321-.202.528-.363.676-.555a2 2 0 0 0 .396-1.479c-.052-.394-.285-.798-.75-1.605c-.467-.807-.7-1.21-1.015-1.453a2 2 0 0 0-1.479-.396c-.24.032-.483.13-.82.308a1.617 1.617 0 0 1-1.566-.008a1.617 1.617 0 0 1-.79-1.353c-.014-.38-.05-.64-.143-.863a2 2 0 0 0-1.083-1.083C13.398 2 12.932 2 12 2c-.932 0-1.398 0-1.765.152a2 2 0 0 0-1.083 1.083c-.092.223-.129.483-.143.863a1.617 1.617 0 0 1-.79 1.353a1.617 1.617 0 0 1-1.567.008c-.336-.178-.58-.276-.82-.308a2 2 0 0 0-1.478.396C4.04 5.79 3.806 6.193 3.34 7c-.208.36-.369.639-.489.873'/%3e%3c/g%3e%3c/svg%3e");    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.plus-icon {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-width='1.5' d='M15 12h-3m0 0H9m3 0V9m0 3v3m10-3c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2c4.714 0 7.071 0 8.535 1.464c.974.974 1.3 2.343 1.41 4.536'/%3e%3c/svg%3e");    background-repeat: no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.library-icon {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.33333 3.5H1.16667V11.6667C1.16667 12.3083 1.69167 12.8333 2.33333 12.8333H10.5V11.6667H2.33333V3.5ZM11.6667 1.16667H4.66667C4.025 1.16667 3.5 1.69167 3.5 2.33333V9.33333C3.5 9.975 4.025 10.5 4.66667 10.5H11.6667C12.3083 10.5 12.8333 9.975 12.8333 9.33333V2.33333C12.8333 1.69167 12.3083 1.16667 11.6667 1.16667ZM11.6667 9.33333H4.66667V2.33333H11.6667V9.33333ZM7.58333 8.16667H8.75V6.41667H10.5V5.25H8.75V3.5H7.58333V5.25H5.83333V6.41667H7.58333V8.16667Z' fill='%2364748B'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Slaves Section */
.slaves-section {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.slaves-header {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    flex-shrink: 0;
}

.sort-icon {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 8.5L3.5 10.5L1.5 8.5' stroke='%2364748B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M3.5 10.5V4.5' stroke='%2364748B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M10.5 3.5L8.5 1.5L6.5 3.5' stroke='%2364748B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M8.5 7.5V1.5' stroke='%2364748B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}
.slave-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.social-icon-vk {
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 552 384'%3e%3cpath fill='%2364748b' d='M548 85q7 18-43 84q-7 9-18 24q-23 28-26 37q-5 12 4 23q5 6 23 24h1v1q41 37 55 63l2 4l2 7.5v9.5l-7 7.5l-17 3.5l-73 2q-7 1-16.5-2t-14.5-6l-6-4q-9-6-20-18t-19.5-22t-17.5-16.5t-16-4.5q-1 0-2.5 1t-5 4.5t-6 8.5t-4.5 14.5t-2 22.5q0 4-1 7.5t-2 5.5l-1 1q-6 6-16 6h-32q-21 2-42.5-4T189 353.5t-29-19t-20-16.5l-7-7q-3-2-8-8t-20.5-26T74 234t-35-60.5T2 96q-2-5-2-8t1-5l1-1q4-6 16-6h79q3 0 6 1.5l5 2.5l1 1q5 3 7 9q6 14 13.5 29.5T141 143l4 8q9 17 16.5 29.5T175 200t12 11t10 4t8-1l1-1.5l3.5-6.5l4-13l2.5-23v-36q-1-11-3-20.5t-4-13.5l-1-3q-7-10-25-13q-3 0 2-7q5-5 11-8q15-8 68-7q23 0 39 4q5 1 9 3.5t6 7t3 9t1 13V114q-1 8-1 20v24q0 3-.5 12t-.5 14t1 11.5t3.5 11t6.5 6.5q2 1 4.5 1.5t7.5-3t11-10t15-19.5t19-30q17-30 31-65q1-2 2.5-4.5T425 79h1l1-1l4-1h6l82-1q11-1 18.5 1t8.5 5z'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.social-icon-telegram {
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24'%3e%3cpath fill='%2364748b' d='M11.994 2a10 10 0 1 0 10 10a10 10 0 0 0-10-10Zm3.18 15.152a.705.705 0 0 1-1.002.352l-2.715-2.11l-1.742 1.608a.3.3 0 0 1-.285.039l.334-2.989l.01.009l.007-.059s4.885-4.448 5.084-4.637c.202-.189.135-.23.135-.23c.012-.23-.361 0-.361 0l-6.473 4.164l-2.695-.918s-.414-.148-.453-.475c-.041-.324.466-.5.466-.5l10.717-4.258s.881-.392.881.258Z'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}


.slaves-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
}

.slaves-text {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 20px;
}

.slaves-count {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    line-height: 20px;
}

.slaves-income {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    line-height: 20px;
}

.separator-vertical {
    width: 2px;
    height: 10px;
    background-color: #64748b;
    border-radius: 100px;
}

.collect-text {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    line-height: 20px;
    text-decoration: line-through;
}

.database-small-icon {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24' fill='%2364748b'%3e%3cg fill='none' stroke='%2364748b' stroke-linecap='round' stroke-width='1.5'%3e%3cpath d='M9 14h3m-2-2V8.2c0-.186 0-.279.012-.356a1 1 0 0 1 .832-.832C10.92 7 11.014 7 11.2 7h2.3a2.5 2.5 0 0 1 0 5H10Zm0 0v5m0-5H9'/%3e%3cpath d='M7 3.338A9.954 9.954 0 0 1 12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12c0-1.821.487-3.53 1.338-5'/%3e%3c/g%3e%3c/svg%3e");    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Search Section */
.search-section {
    background-color: #ffffff;
    padding: 5px 16px;
    flex-shrink: 0;
}

.search-input {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
}

.search-input input {
    flex: 1;
    height: 24px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 2px 12px;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    background-color: #ffffff;
    outline: none;
}

.search-input input::placeholder {
    color: #64748b;
}

.search-button {
    height: 24px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 2px 16px;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    background-color: #ffffff;
    cursor: pointer;
}

.search-button:hover {
    background-color: #f8fafc;
}

/* Slaves List */
.slaves-list {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;
    padding-bottom: 10px;
}

.slave-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 5px 17px 5px 16px;
    background-color: #ffffff;
    border-radius: 6px;
    width: 100%;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.slave-item:hover {
    background-color: #f8fafc;
}
.slave-income {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-align: right;
    line-height: 16px;
}
.slave-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.slave-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slave-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 230px;
}

.slave-info h4 {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 20px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-info {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 230px;
}

.engineering-icon {
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5225 7.5C3.1875 7.5 0.5225 8.17 0.5225 9.5V10.5H8.5225V9.5C8.5225 8.17 5.8575 7.5 4.5225 7.5ZM1.5225 9.5C1.6325 9.14 3.1775 8.5 4.5225 8.5C5.8725 8.5 7.4225 9.145 7.5225 9.5H1.5225Z' fill='%2364748B'/%3E%3Cpath d='M2.3925 4.5H2.5225C2.5225 5.605 3.4175 6.5 4.5225 6.5C5.6275 6.5 6.5225 5.605 6.5225 4.5H6.6525C6.7875 4.5 6.8975 4.39 6.8975 4.255V4.245C6.8975 4.11 6.7875 4 6.6525 4H6.5225C6.5225 3.26 6.1175 2.625 5.5225 2.275V2.75C5.5225 2.89 5.4125 3 5.2725 3C5.1325 3 5.0225 2.89 5.0225 2.75V2.07C4.8625 2.03 4.6975 2 4.5225 2C4.3475 2 4.1825 2.03 4.0225 2.07V2.75C4.0225 2.89 3.9125 3 3.7725 3C3.6325 3 3.5225 2.89 3.5225 2.75V2.275C2.9275 2.625 2.5225 3.26 2.5225 4H2.3925C2.2575 4 2.1475 4.11 2.1475 4.245V4.26C2.1475 4.39 2.2575 4.5 2.3925 4.5ZM5.5225 4.5C5.5225 5.05 5.0725 5.5 4.5225 5.5C3.9725 5.5 3.5225 5.05 3.5225 4.5H5.5225Z' fill='%2364748B'/%3E%3Cpath d='M11.0125 3.115L11.4775 2.7L11.1025 2.05L10.5075 2.245C10.4375 2.19 10.3575 2.145 10.2725 2.11L10.1475 1.5H9.3975L9.2725 2.11C9.1875 2.145 9.1075 2.19 9.0325 2.245L8.4425 2.05L8.0675 2.7L8.5325 3.115C8.5225 3.2 8.5225 3.29 8.5325 3.375L8.0675 3.8L8.4425 4.45L9.0425 4.26C9.1075 4.31 9.1825 4.35 9.2575 4.385L9.3975 5H10.1475L10.2825 4.39C10.3625 4.355 10.4325 4.315 10.5025 4.265L11.0975 4.455L11.4725 3.805L11.0075 3.38C11.0225 3.285 11.0175 3.2 11.0125 3.115ZM9.7725 3.875C9.4275 3.875 9.1475 3.595 9.1475 3.25C9.1475 2.905 9.4275 2.625 9.7725 2.625C10.1175 2.625 10.3975 2.905 10.3975 3.25C10.3975 3.595 10.1175 3.875 9.7725 3.875Z' fill='%2364748B'/%3E%3Cpath d='M9.7225 5.395L9.2975 5.535C9.2475 5.495 9.1925 5.465 9.1325 5.44L9.0425 5H8.5075L8.4175 5.435C8.3575 5.46 8.2975 5.495 8.2475 5.53L7.8275 5.39L7.5575 5.855L7.8875 6.15C7.8825 6.215 7.8825 6.275 7.8875 6.335L7.5575 6.64L7.8275 7.105L8.2575 6.97C8.3075 7.005 8.3575 7.035 8.4125 7.06L8.5025 7.5H9.0375L9.1325 7.065C9.1875 7.04 9.2425 7.01 9.2925 6.975L9.7175 7.11L9.9875 6.645L9.6575 6.34C9.6625 6.275 9.6625 6.215 9.6575 6.155L9.9875 5.86L9.7225 5.395ZM8.7725 6.695C8.5275 6.695 8.3275 6.495 8.3275 6.25C8.3275 6.005 8.5275 5.805 8.7725 5.805C9.0175 5.805 9.2175 6.005 9.2175 6.25C9.2175 6.495 9.0175 6.695 8.7725 6.695Z' fill='%2364748B'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}


/* Bottom Navigation */
.bottom-navigation {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0px 16px;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0 !important;
    width: 100%;
    flex-shrink: 0;
}

@supports (-webkit-touch-callout: none) {
    /* iOS specific fix */
    .app-container {
        height: -webkit-fill-available !important;
        height: 100dvh !important; /* dvh также работает на современных версиях iOS */
    }
}
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 8px;
    flex: 1;
    cursor: pointer;
    transition: opacity 0.2s;
}

.nav-item.active {
    opacity: 1;
}

.nav-icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.account-box-icon {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%2364748b'%3e%3cg fill='none' stroke='%2364748b' stroke-width='1.5'%3e%3ccircle cx='12' cy='6' r='4'/%3e%3cpath stroke-linecap='round' d='M19.997 18c.003-.164.003-.331.003-.5c0-2.485-3.582-4.5-8-4.5s-8 2.015-8 4.5S4 22 12 22c2.231 0 3.84-.157 5-.437'/%3e%3c/g%3e%3c/svg%3e");
 }

.store-icon {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23a1a1aa'%3e%3cg fill='none' stroke='%23a1a1aa' stroke-linecap='round' stroke-width='1.5'%3e%3cpath d='M9.5 21.5v-3c0-.935 0-1.402.201-1.75a1.5 1.5 0 0 1 .549-.549C10.598 16 11.065 16 12 16s1.402 0 1.75.201a1.5 1.5 0 0 1 .549.549c.201.348.201.815.201 1.75v3m6.5.5H9m-6 0h2.5M19 22v-7M5 22v-7'/%3e%3cpath stroke-linejoin='round' d='M12 2H7.472c-1.203 0-1.804 0-2.287.299c-.484.298-.753.836-1.29 1.912L2.49 7.76c-.324.82-.608 1.786-.062 2.479A2 2 0 0 0 6 9a2 2 0 1 0 4 0a2 2 0 1 0 4 0a2 2 0 1 0 4 0a2 2 0 0 0 3.571 1.238c.546-.693.262-1.659-.062-2.479l-1.404-3.548c-.537-1.076-.806-1.614-1.29-1.912C18.332 2 17.731 2 16.528 2H16'/%3e%3c/g%3e%3c/svg%3e");
 }
 .improvements-icon {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24' fill='%23a1a1aa'%3e%3cg fill='none' stroke='%23a1a1aa' stroke-width='1.5'%3e%3cpath stroke-linecap='round' d='M2.668 5.35A4 4 0 1 0 5.35 2.668M21.832 19.15a4 4 0 1 0-2.682 2.682'/%3e%3cpath d='M2.5 17.5c0-1.886 0-2.828.586-3.414c.586-.586 1.528-.586 3.414-.586c1.886 0 2.828 0 3.414.586c.586.586.586 1.528.586 3.414c0 1.886 0 2.828-.586 3.414c-.586.586-1.528.586-3.414.586c-1.886 0-2.828 0-3.414-.586C2.5 20.328 2.5 19.386 2.5 17.5Zm11-11c0-1.886 0-2.828.586-3.414c.586-.586 1.528-.586 3.414-.586c1.886 0 2.828 0 3.414.586c.586.586.586 1.528.586 3.414c0 1.886 0 2.828-.586 3.414c-.586.586-1.528.586-3.414.586c-1.886 0-2.828 0-3.414-.586C13.5 9.328 13.5 8.386 13.5 6.5Z'/%3e%3c/g%3e%3c/svg%3e");
 }
.widgets-icon {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23A1A1AA'%3e%3cg fill='none' stroke='%23A1A1AA'%3e%3cpath stroke-linecap='round' stroke-width='1.5' d='M13 8.922L7.922 3.845a2.883 2.883 0 1 0-4.077 4.077l12.233 12.233a2.884 2.884 0 0 0 4.078-4.077L17.078 13M6 10l4-4'/%3e%3cpath d='M16.1 2.307a.483.483 0 0 1 .9 0l.43 1.095a.482.482 0 0 0 .272.274l1.091.432a.486.486 0 0 1 0 .903l-1.09.432a.485.485 0 0 0-.273.273L17 6.81a.483.483 0 0 1-.9 0l-.43-1.095a.485.485 0 0 0-.273-.273l-1.09-.432a.486.486 0 0 1 0-.903l1.09-.432a.485.485 0 0 0 .273-.274l.43-1.095Zm3.867 6.823a.483.483 0 0 1 .9 0l.156.399c.05.125.148.224.273.273l.398.158a.486.486 0 0 1 0 .902l-.398.158a.485.485 0 0 0-.273.273l-.156.4a.483.483 0 0 1-.9 0l-.157-.4a.485.485 0 0 0-.272-.273l-.398-.158a.486.486 0 0 1 0-.902l.398-.158a.485.485 0 0 0 .272-.273l.157-.4ZM5.133 15.307a.483.483 0 0 1 .9 0l.157.4a.48.48 0 0 0 .272.273l.398.157a.486.486 0 0 1 0 .903l-.398.158a.484.484 0 0 0-.272.273l-.157.4a.483.483 0 0 1-.9 0l-.157-.4a.484.484 0 0 0-.272-.273l-.398-.158a.486.486 0 0 1 0-.903l.398-.157a.484.484 0 0 0 .272-.274l.157-.399Z'/%3e%3c/g%3e%3c/svg%3e");
 }
.leaderboard-icon {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24' fill='%23a1a1aa'%3e%3cg fill='none' stroke='%23a1a1aa' stroke-width='1.5'%3e%3cpath d='M11.146 12.523c.38-.682.57-1.023.854-1.023c.284 0 .474.34.854 1.023l.098.176c.108.194.162.29.246.354c.085.064.19.088.4.135l.19.044c.738.167 1.107.25 1.195.532c.088.283-.164.577-.667 1.165l-.13.152c-.143.167-.215.25-.247.354c-.032.104-.021.215 0 .438l.02.203c.076.785.114 1.178-.115 1.352c-.23.174-.576.015-1.267-.303l-.178-.082c-.197-.09-.295-.136-.399-.136c-.104 0-.202.046-.399.136l-.178.082c-.691.319-1.037.477-1.267.303c-.23-.174-.191-.567-.115-1.352l.02-.203c.021-.223.032-.334 0-.438c-.032-.103-.104-.187-.247-.354l-.13-.152c-.503-.588-.755-.882-.667-1.165c.088-.282.457-.365 1.195-.532l.19-.044c.21-.047.315-.07.4-.135c.084-.064.138-.16.246-.354l.098-.176Z'/%3e%3cpath stroke-linecap='round' d='M21.838 11.126c.18-1.912.27-2.869-.057-3.264a.992.992 0 0 0-.675-.367c-.476-.042-1.073.638-2.268 1.998c-.618.704-.927 1.055-1.271 1.11a.923.923 0 0 1-.562-.09c-.319-.16-.53-.595-.955-1.464l-2.237-4.584C13.011 2.822 12.61 2 12 2c-.61 0-1.011.822-1.813 2.465L7.95 9.049c-.424.87-.636 1.304-.955 1.464a.925.925 0 0 1-.562.09c-.344-.055-.653-.406-1.271-1.11c-1.195-1.36-1.792-2.04-2.268-1.998a.992.992 0 0 0-.675.367c-.327.395-.237 1.352-.057 3.264l.229 2.436c.378 4.012.566 6.019 1.75 7.228C5.322 22 7.094 22 10.64 22h2.719c3.545 0 5.317 0 6.5-1.21c.914-.935 1.234-2.345 1.507-4.79'/%3e%3c/g%3e%3c/svg%3e");
 }
.nav-item span {
    font-size: 11px;
    font-weight: 600;
    color: #a1a1aa;
    text-align: center;
    line-height: normal;
    letter-spacing: 0.2px;
}

.nav-item.active span {
    color: #64748b;
}

/* Responsive design */
@media (max-width: 375px) {
    .app-container {
        width: 100vw;
    }
}

@media (min-width: 376px) {
    .app-container {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
}

/* Scrollbar styling */
.slaves-list::-webkit-scrollbar {
    width: 6px;
}

.slaves-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.slaves-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.slaves-list::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Touch scroll improvements */
.slaves-list {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Mobile touch feedback */
@media (hover: none) and (pointer: coarse) {
    .action-link:active,
    .action-button:active,
    .pagination-dot:active,
    .nav-item:active {
        transform: scale(0.98);
        background-color: #f1f5f9;
    }
}

/* Icon buttons styles */
.social-icons {
    display: flex;
    width: 100%;
}
.edit-profile-btn {
        background-color: #ffffff;
    border: none;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s;

}
.icon-button {
    background-color: #ffffff;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    cursor: pointer;
    transition: background-color 0.2s;
    flex: 1;
}

.icon-button:hover {
    background-color: #f8fafc;
}
/* Filter Menu Styles для главной страницы */
.filter-menu {
    position: absolute;
    top: 32.5%;
    left: 3%;
    width: 220px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    overflow: hidden;
    z-index: 100;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.filter-menu.active {
    display: block;
}

.filter-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 13px;
    height: 28px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.filter-option:hover {
    background-color: #f8fafc;
}

.filter-option span {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    flex: 1;
}

.filter-option-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 13px;
    height: 28px;
}

.filter-option-input span {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
}

.filter-input {
    width: 60px;
    height: 16px;
    background: #ffffff;
    border: 1px solid #e4e4e7;
    border-radius: 4px;
    padding: 0 4px;
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    outline: none;
}

.filter-input::placeholder {
    color: #64748b;
}

.filter-divider {
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 0;
}

.filter-divider::before {
    content: '';
    width: 220px;
    height: 1px;
    background: repeating-linear-gradient(
        to right,
        #a09cab 0px,
        #a09cab 9px,
        transparent 9px,
        transparent 18px
    );
}

.radio-unchecked {
    width: 16px;
    height: 16px;
    border: 1.5px solid #a09cab;
    border-radius: 50%;
    flex-shrink: 0;
}

.radio-checked {
    width: 16px;
    height: 16px;
    border: 1.5px solid #64748b;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.radio-checked::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #64748b;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sort-icon {
    cursor: pointer;
    transition: opacity 0.2s;
}

.sort-icon:hover {
    opacity: 0.7;
}