.dm-overall {
    text-align: center;
    margin-bottom: 30px;
}

.dm-score-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: white;
}

.dm-score-value {
    font-size: 42px;
    font-weight: 700;
}

.dm-level {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

.dm-description {
    color: var(--text-secondary);
    font-size: 15px;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.8;
}

.dm-risk {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(0, 245, 255, 0.1);
}

.dm-risk h3 {
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.dm-risk-indicator {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border-left: 4px solid;
    margin-bottom: 15px;
}

.dm-risk-icon {
    font-size: 32px;
}

.dm-risk-content {
    flex: 1;
}

.dm-risk-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.dm-risk-recommendation {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.dm-risk-details {
    margin-top: 15px;
}

.dm-risk-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-bottom: 10px;
}

.dm-risk-item.high {
    border-left: 3px solid #ef4444;
}

.dm-risk-item.moderate {
    border-left: 3px solid #f59e0b;
}

.dm-risk-badge {
    background: rgba(0, 245, 255, 0.1);
    color: var(--neon-cyan);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
}

.dm-risk-score {
    color: var(--text-secondary);
    font-size: 14px;
}

.dm-risk-desc {
    flex: 1;
    color: var(--text-secondary);
    font-size: 13px;
}

.dm-dominant {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(0, 245, 255, 0.1);
}

.dm-dominant h3 {
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.dm-dominant-card {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    margin-bottom: 15px;
    border-left: 4px solid;
}

.dm-dominant-card.mature {
    border-left-color: #10b981;
}

.dm-dominant-card.immature {
    border-left-color: #f59e0b;
}

.dm-dominant-rank {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    color: white;
    flex-shrink: 0;
}

.dm-dominant-info {
    flex: 1;
}

.dm-dominant-info h4 {
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.dm-dominant-en {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 400;
}

.dm-dominant-score {
    color: var(--neon-cyan);
    font-size: 14px;
    margin-bottom: 6px;
}

.dm-dominant-type {
    font-size: 13px;
    margin-bottom: 10px;
}

.dm-dominant-desc {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.dm-chart {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(0, 245, 255, 0.1);
}

.dm-chart h3 {
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.dm-bar-item {
    margin-bottom: 12px;
}

.dm-bar-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.dm-bar-name {
    color: var(--text-primary);
    font-size: 14px;
}

.dm-bar-value {
    font-size: 14px;
    font-weight: 600;
}

.dm-bar-track {
    height: 10px;
    background: rgba(0, 245, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

.dm-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}

.dm-dimensions {
    margin-bottom: 30px;
}

.dm-dimensions h3 {
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.dm-dimension-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 245, 255, 0.1);
}

.dm-dimension-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.dm-dimension-header h4 {
    font-size: 18px;
    color: var(--text-primary);
    margin: 0;
}

.dm-dimension-header span {
    color: var(--text-secondary);
    font-size: 13px;
}

.dm-dimension-score {
    margin-left: auto;
    font-weight: 700;
    font-size: 16px;
}

.dm-dimension-desc {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.dm-dimension-level {
    margin-bottom: 15px;
}

.dm-level-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    color: white;
    font-size: 14px;
    font-weight: 500;
}

.dm-dimension-assessment {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.dm-dimension-strengths,
.dm-dimension-risks,
.dm-dimension-suggestions {
    margin-bottom: 15px;
}

.dm-dimension-strengths h5,
.dm-dimension-risks h5,
.dm-dimension-suggestions h5 {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.dm-dimension-strengths ul,
.dm-dimension-risks ul,
.dm-dimension-suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dm-dimension-strengths li,
.dm-dimension-risks li,
.dm-dimension-suggestions li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.dm-dimension-strengths li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
}

.dm-dimension-risks li::before {
    content: "⚠";
    position: absolute;
    left: 0;
    color: #f59e0b;
}

.dm-dimension-suggestions li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--neon-purple);
}

.dm-suggestions {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(0, 245, 255, 0.1);
}

.dm-suggestions h3 {
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.dm-suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dm-suggestion-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.dm-suggestion-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: white;
    flex-shrink: 0;
}

.dm-suggestion-text {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.dm-exercises {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid rgba(0, 245, 255, 0.1);
}

.dm-exercises h3 {
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.dm-exercise-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(0, 245, 255, 0.1);
    margin-bottom: 15px;
}

.dm-exercise-icon {
    font-size: 36px;
    margin-bottom: 12px;
}

.dm-exercise-card h4 {
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.dm-exercise-card p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.dm-exercise-duration {
    display: inline-block;
    background: rgba(0, 245, 255, 0.1);
    color: var(--neon-cyan);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
}

@media (max-width: 768px) {
    .dm-dominant-card {
        flex-direction: column;
    }
    
    .dm-dominant-rank {
        margin: 0 auto;
    }
    
    .dm-dominant-info {
        text-align: center;
    }
    
    .dm-dimension-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .dm-dimension-score {
        margin-left: 0;
    }
}
