.position-entry-circle,
.position-exit-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    border: 2px solid;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

.position-entry-circle[data-direction="BUY"] {
    background: radial-gradient(circle at 30% 30%, 
        rgba(212, 175, 55, 0.95),
        rgba(139, 69, 19, 0.95));
    border-color: #d4af37;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset,
                0 0 10px rgba(212, 175, 55, 0.3);
    color: #1f0202;  
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

.position-entry-circle[data-direction="SELL"] {
    background: radial-gradient(circle at 30% 30%, 
        rgba(100, 26, 169, 0.775),   
        rgba(75, 0, 130, 0.95));     
    border-color: #892be2a6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset,
                0 0 10px rgba(138, 43, 226, 0.3);
    color: #ffffff;  
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.position-exit-circle[data-outcome="profit"] {
    background: radial-gradient(circle at 30% 30%, 
        rgba(129, 199, 132, 0.95), 
        rgba(76, 175, 80, 0.95));
    border-color: #4CAF50;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.15) inset,
                0 0 12px rgba(76, 175, 80, 0.4);
    color: #1f0202;  
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

.position-exit-circle[data-outcome="loss"] {
    background: radial-gradient(circle at 30% 30%, 
        rgba(239, 83, 80, 0.95),
        rgba(198, 40, 40, 0.95));
    border-color: #c62828;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.1) inset,
                0 0 8px rgba(198, 40, 40, 0.3);
    color: #ffffff;  
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

@keyframes circlePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }
}

.position-entry-circle {
    animation: circlePulse 2s ease-in-out infinite;
}

.position-exit-circle {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.position-entry-circle:hover,
.position-exit-circle:hover {
    transform: scale(1.3);
    z-index: 19;
}

.position-entry-circle.details-active,
.position-exit-circle.details-active {
    border-width: 3px;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

.position-level-line {
    position: absolute;
    pointer-events: none;
    transition: top 0.2s ease;
}

.position-sl-line {
    border-top: 2px dashed rgba(244, 67, 54, 0.8);
    box-shadow: 0 0 8px rgba(244, 67, 54, 0.3);
}

.position-tp-line {
    border-top: 2px dashed rgba(76, 175, 80, 0.8);
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
}

.position-risk-zone {
    position: absolute;
    pointer-events: none;
    transition: all 0.3s ease;
}

.position-risk-zone {
    background: rgba(244, 67, 54, 0.08);
    border-top: 1px solid rgba(244, 67, 54, 0.3);
    border-bottom: 1px solid rgba(244, 67, 54, 0.3);
}

.position-reward-zone {
    background: rgba(76, 175, 80, 0.08);
    border-top: 1px solid rgba(76, 175, 80, 0.3);
    border-bottom: 1px solid rgba(76, 175, 80, 0.3);
}

@media (max-width: 768px) {
    .position-entry-circle,
    .position-exit-circle {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }
}